Need different images for title of each widget in sidebar WordPress

Denzel Chia answers:

Hi Jill,

This is a big topic.
How a widget is styled depends on the theme, the registered sidebar, and the widget class itself.

1) In a theme, you need to register sidebar and the attributes such as before widget, after widget, before title, after title, can be very different and it all depends on what the theme author wants in the html code.

Please read this codex example. http://codex.wordpress.org/Function_Reference/register_sidebar

2) The widget itself is an extension of the WordPress WP_Widget class.

You can read this tutorial to understand how to create a widget.
http://justintadlock.com/archives/2009/05/26/the-complete-guide-to-creating-widgets-in-wordpress-28

3) The styles of the theme also affects how a widget looks. You can use css to control the styles of the widget font, background image or color, etc.


<strong>Back to your theme on http://www.lusciouslime.com/</strong>

1) Your theme has a sidebar with the following code, the sidebar is registered with <h4> as the widget title.

<div id='sidebar' class='widget-area'>


and this is the style found on line 885 in your style.css that produces the background image of all your widget titles. It is actually just an image carefully positioned with enough white area.


.widget-area h4 {
background: url("images/sidebar-h4.png") no-repeat scroll center center transparent;
color: #64002F;
font-size: 16px;
height: 40px;
margin: 0 0 10px;
padding: 30px 0 10px;
text-align: center;
text-transform: lowercase;
width: 244px;
z-index: 1000;
}


So in order for you to use a different background on "need to find me?"
Just use css in your style.css to do it. There is no need to create a new widget for this.
Looking at your source code, there is a Social_Widget style css for this widget, so we can make use of that.

For example, some style like this, just change the background image url to that of your new image, and use a important! to force it to overwrite the default .widget-area h4 background image.


.Social_Widget h4 {
background: url("images/new-sidebar-h4.png") no-repeat scroll center center transparent !important;
color: #64002F;
font-size: 16px;
height: 40px;
margin: 0 0 10px;
padding: 30px 0 10px;
text-align: center;
text-transform: lowercase;
width: 244px;
z-index: 1000;
}


Unfortunately both "video lusciousness", and "need to contact me" are using the same widget.
Perhaps you need to modify a widget to a new one with its own unique class name.
Look the the tutorial on
http://justintadlock.com/archives/2009/05/26/the-complete-guide-to-creating-widgets-in-wordpress-28
and you will know what I mean.

<blockquote>
Would also like a tutorial on doing the same, with the image going over the right side boundary of the column like on http://listplanit.com/ on the right sidebar.
</blockquote>

If you understand all the above I mentioned, you will be able to do it, just create widgets with different class names and style it using css.

Thanks.
Denzel

JAKE ABIVA answers:

Hello Jill,

Denzel is right. You need to create a different set of widget for each title with different image. Good luck on your project.

Naweed Shams answers:

Dear Jill,

I'm an experience Genesis/StudioPress user and customer.

Download and install the <strong>Genesis Simple Sidebars</strong> plugin which you can create as many sidebars as you need for your website.

Then download and install <strong>Image Widget</strong> - you can upload images straight from the widget menu, drag and drop as many as you need to any widgets.

Here are the links to the plugins.

1. http://wordpress.org/extend/plugins/genesis-simple-sidebars/
2. http://wordpress.org/extend/plugins/image-widget/

It's very simple to do.