[Resolved] Sidebar background image applying on all sidebar widgets

Home Forums Support Sidebar background image applying on all sidebar widgets

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #345043
    Aybars

    Hello,

    I have three widgets on my right sidebar.
    I need to add a background image for only on widget. (Appearance/Customize/Background Images/Sidebar)

    Could you please help me about this…

    Regards

    Note: I’m using latest versions of both GeneratePress and WordPress

    GeneratePress 1.3.48
    #345080
    Leo
    Staff
    Customer Support

    Hi there,

    Any chance you can link me to the page and let me know which widget you are trying to add the background image?

    Thanks!

    #345110
    Aybars

    Hi Leo,

    I did not publish it yet. Still working in local.

    I’ve added several widgets into right sidebar, all of the widgets showing the same “background image”
    There is no section for adding a background image for each image. One background image impacts all sidebar widgets.
    I want to add my background image for only my text widget (At the top)
    Do you know how can I figure out this.

    Let me add backoffice and frontoffice pictures about that:

    Backoffice:
    https://i.hizliresim.com/4MP37J.png

    Frontoffice:
    https://i.hizliresim.com/lWd8oE.png

    #345127
    Tom
    Lead Developer
    Lead Developer

    You could use a plugin like this to add a class to the widget: https://en-ca.wordpress.org/plugins/widget-css-classes/

    Then add some CSS:

    .sidebar .widget.your-chosen-class {
        background-image: url( 'URL TO YOUR IMAGE' );
    }
    #345129
    Aybars

    Thank you very much Dear Tom, I will try it.

    #345133
    Lyle

    Aybars,

    This is quite easy to do with this plugin:

    https://wordpress.org/plugins/widget-css-classes/

    It adds a place in all of your widgets where you can add your own class name. So if you wanted and image in only one widget, just give add a class name and save. E.g. my-widget-image

    Then add the image via CSS:

    .my-widget-image {
        background-image: url("URL_OF_IMAGE");
    }

    I just tried it and it works like a charm 🙂

    Cheers!
    Lyle

    http://snifflevalve.com
    Tutorials and tips for GeneratePress, WP Show Posts, WordPress and Elementor

    #345135
    Lyle

    Tom, you’re too fast! 🙂

    http://snifflevalve.com
    Tutorials and tips for GeneratePress, WP Show Posts, WordPress and Elementor

    #345150
    Tom
    Lead Developer
    Lead Developer
    #345258
    Aybars

    I’ve tried your suggestion and yes, its working like a charm.
    This is absolutely what I want.
    Thank you Dear Lyle and Dear Tom.
    Best Regards…

    #345266
    Lyle

    You’re welcome 🙂

    http://snifflevalve.com
    Tutorials and tips for GeneratePress, WP Show Posts, WordPress and Elementor

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.