Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Need different images for title of each widget in sidebar WordPress

  • SOLVED

Using Studiopress Genesis/Pretty Young Thing theme at www.lusciouslime.com

Need to have a unique title image for each widget in the sidebar - ie. one for the "need to contact me" section, a different one for "video lusciousness" etc.

Would like you to show me how to properly code ONE of these so I can learn to properly do the coding.

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.

Answers (4)

2011-03-10

S├ębastien | French WordpressDesigner answers:

add this
.widget-area .Social_Widget h4 {background: red;}
.widget-area .widget_text h4 {background: green;}
.widget-area .latest-tweets h4 {background: orange;}

on you styles.css at the bottom and you can see the different color of each title.

So after that, you can replace each color by an image with a code like that
background: url("images/new-sidebar-h4.png") no-repeat center center;
in this case, the image is in the folder images and this folder is in the folder of your theme
It's very simply !

2011-03-07

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

2011-03-08

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.

2011-03-08

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.