[SOLVED] How to Make Sidebar Titles An Image
 

Love this theme! We are working it out and will definitely make a donation! I was wondering how to make the sidebar titles (like blogroll, or site admin, or gallery, or subscribe) as an image.

I saw this site here on the forum and like how she did them. Where would I put the image and what form should it be in? Here's the site I'm trying to emulate!

[url="http://misspickyscolumn.com/"]

Thanks so much!

you could make image and then use it as a background image for the widget title box (ATO->Widgets->Widget Title Box

Thanks for the reply. I made an image to try that I called welcomebutton.gif. I put the image in the media library of my localhost test site. Then I put this code in the widget title section.

<img src="http://localhost/wp-content/uploads/2009/06/welcomebutton.gif" alt="welcomebutton" title="welcomebutton" width="150" height="50"/>

Nothing happened, so I am obviously trying to call the image in the wrong way. Thanks for helping

There is a writeup at http://hoyet.wordpress.com/2008/05/0...le-in-sidebar/ that explains how to do this. You will have to make some adjustments.

I created a image called 'widget.gif' and stuck it in the atahualpa images folder. I then used the TEXT widget and as teh article says, I looked at the source and created my CSS insert. Note I used the ID of teh widget instead of the class. If I used the class, every occurance of the text widget would get the image, this way I could have a different image for each occurance of the widget. I also used H#'s instead of the H2's described in the articls because that is what the text widget uses.

Here is the CSS insert I used

Hello!

I was able to get very close to what I'm aiming for using this post (THANK YOU!), but still need a help.

In my right sidebar I'm setting up a MailChimp subscription box. I want the chimp graphic to sit behind the email, name, etc. Currently they are falling below.

This is what I have in my CSS inserts currently.
div#mailchimp-widget h3 {
display: block;
width: 290px;
height: 250px;
text-indent: -9999px;
background-image: url('http://www.polkcitysquare.com/wp-content/themes/atahualpa/images/mailchimp_bg2.jpg');
background-repeat: no-repeat;
background-position: center center;
}


http://polkcitysquare.com/?page_id=340

PS. If you have a suggetion to get the form fields to right align, I'd love the insight on that as well. :)

ok two things here.
1) change your CSS selector to 'div#mailchimp-widget {'
2) you are going to have to look at the code that makes up the mailchinp widget and locate the code that generates the
and remove the 'background-color: #f3bb4c;

this widget is putting it's style after the atahualpa style and it overriding what atahualpa sets.

Thank you so much! I don't think I could have figured that out on my own. You guys are amazing!