Sidebar background image applying on all sidebar widgets

[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

[Leo]

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!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

[Tom]

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' );
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Aybars]

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

[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

[Lyle]

Tom, you’re too fast! 🙂

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

[Tom]

Ha, we had the same idea 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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…

[Lyle]

You’re welcome 🙂

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

[Author]

Posts