Is there a way to add a custom image to the sidebar titles? I've done a workaround, which is adding a text widget with the image but eventually that creates problems. (between IE & Firefox) Just to give you an idea of what I mean you can go to the site which is still under major construction.
Sandy's Test site

I'm not a coder which is why I'm falling in love with this theme. This is just my 2nd site using it but I learn more each time. This is version 3.4.1

I just notice a couple of posts that may ansdwer my question. I'm giving them a look now but feel free to answer anyway.

You can turn off the title text with

div.widget-title h3 {
display:none;
}

and put a background image on the parent container

div.widget-title {
background: url(/path/to/image.gif) center left;
}

See http://www.w3schools.com/css/css_background.asp for positioning the image

Different images per widget

div#widget-id-name div.widget-title {
background: url(path/to/image.gif) center left;
}
div#other-widget-id-name div.widget-title {
background: url(path/to/other-image.gif) center left;
}
div#third-widget-id-name div.widget-title {
background: url(path/to/third-image.gif) center left;
}

or

div.widget-class-name div.widget-title {
background: url(path/to/image.gif) center left;
}
div.other-widget-class-name div.widget-title {
background: url(path/to/other-image.gif) center left;
}
div.third-widget-class-name div.widget-title {
background: url(path/to/third-image.gif) center left;
}

Thanks, I will give this a try since the way I'm doing it seem to mess things up in Firefox.

Hi,

I'm back to this issue because first, I know I need to do it the right way. Secondly, I think that doing the way I've been doing it, with customer images is messing up my Widget Contect plugin. If I undersatnd correctly, if I want a different image for each header I would put in

This is what I've entered to test and nothing happens. It should show up as a custom header (background only at this point. I get the test word in the widget but no header. I know it is something simple that I'm missing.

div.widget-title h3 {
display:none;
}

div#id="text-41" class="widget_text"><div class="widget-title{
background: url(/sandygluckman/wp-content/themes/atahualpa34/images/zebra_header.gif) center left;
}


How do I deal with the flexi-page widget titles? Same thing, just use the flexipage ID?

It seems it might be easier just to change the style of the container of the widget title box? I can then style the lettering within, right? That way, all title boxes on the sidbar would be the same and I just have to type the name of the text widget in it.

I can't find the other posts that were disucssing this or at least I thought they were.

This is such a great theme. I'm so much further along now than I would have been without it. Thx for a great theme because it also creates a great learning environment.

your ccss insert is formated incorrectly you need to use

div#text-41 {
background: url(/sandygluckman/wp-content/themes/atahualpa34/images/zebra_header.gif) center left;
}

Thanks. (Can you tell I don't code?) I was trying to change the title box only however, your information gave me what I needed to undersatnd the rest. I just need to do some tweaking.

Again thanks so much for your assistance.

I am so excited!! I got the widget title exactly as I wanted it. The custom image and the right lettering AND got it centered. I know that may not seem like much to some, but for me it is MAJOR. And the bonus was my Widget Context plugin now works also.

I love this theme!!

Now on to a couple of more minor issues.

Can someone please help me understand why my code does not work? I am trying to replace all the widget titles with images on here.

div#awpcpclassifieds div.widget-title {
background: url(/wp-content/uploads/2009/12/LatestClassifieds.png) center left;
}

This code only makes my image appear when I give the widget a text title as well so div.widget-title exists. Yet I only want the image to show.

Thank you.

Originally Posted by Wimbledon

Can someone please help me understand why my code does not work? I am trying to replace all the widget titles with images on here.

div#awpcpclassifieds div.widget-title {
background: url(/wp-content/uploads/2009/12/LatestClassifieds.png) center left;
}

This code only makes my image appear when I give the widget a text title as well so div.widget-title exists. Yet I only want the image to show.

Thank you.

@Wimbledon: Your site looks great! Would you mind telling me how you got the image into the right side of your logo area? Thanks! --sandy (Sorry I'm not answering your question -- I'm following this thread to learn the sidebar image thing myself!)

Originally Posted by WebsitesDemystified

@Wimbledon: Your site looks great! Would you mind telling me how you got the image into the right side of your logo area? Thanks! --sandy (Sorry I'm not answering your question -- I'm following this thread to learn the sidebar image thing myself!)

Thank you!

Are you referring to the 468x60 rotating ads in the header? For that site, I had to hardcode that into the header on an older version of Atahualpa.

You can do this MUCH easier now with Atahualpa's new widget area function.

http://forum.bytesforall.com/showthr...ht=widget+area

Hope that helps you.

Thanks, Wimbledon. (Why is that your screen name? My life comes to a complete stop during Wimbledon -- it's a strange post-menopausal fanaticism of unknown origin. What a show!)

I am just upgrading to the newest Atahualpa so I guess I won't have to learn that more difficult method! Will follow your kind link and learn about widget areas. Thanks again!

Originally Posted by WebsitesDemystified

Thanks, Wimbledon. (Why is that your screen name? My life comes to a complete stop during Wimbledon -- it's a strange post-menopausal fanaticism of unknown origin. What a show!)

I am just upgrading to the newest Atahualpa so I guess I won't have to learn that more difficult method! Will follow your kind link and learn about widget areas. Thanks again!

What better show on earth to watch than a gripping tennis match?

Glad that helped you.

the reason it doesn't work is that if the title is blank, the <div class="widget-title">...</div> never gets generated.
try this, put 1 blank character in the title and see if it will work

I tried placing spaces, \n, \0, and nothing worked.

If I am understanding correctly, sleenie's code uses a separate text widget for the title, yet I would like to understand how to implement Flynn's advice in post three.

If I use

Originally Posted by Flynn

You can turn off the title text with

div.widget-title h3 {
display:none;
}

Then how can I use this?

Originally Posted by Flynn

Different images per widget

div#widget-id-name div.widget-title {
background: url(path/to/image.gif) center left;
}
div#other-widget-id-name div.widget-title {
background: url(path/to/other-image.gif) center left;
}
div#third-widget-id-name div.widget-title {
background: url(path/to/third-image.gif) center left;
}

or

div.widget-class-name div.widget-title {
background: url(path/to/image.gif) center left;
}
div.other-widget-class-name div.widget-title {
background: url(path/to/other-image.gif) center left;
}
div.third-widget-class-name div.widget-title {
background: url(path/to/third-image.gif) center left;
}

Am I missing something obvious?

oh I see, what he is saying! Put in a title. This will cause the generation of

<div class="widget-title">
<h3>your title</h3>
</div>

The first bit of CSS

div.widget-title h3 {
display:none;
}

will cause the title (in this case 'your title'0 not to display, but the HTML elements are defined. The second part of the CSS is to assign the background image to the correct widget.
Each widget gets a unique ID which you can see in the generated source of the page. For example, let's say you add two text widgets, you would see in the code

<div id="text-1" class="widget widget_text">
  <div class="widget-title">
    <h3>Text Title 1</h3>
  </div>
  <div class="textwidget">
     blah blah
   </div>
</div>
<div id="text-2" class="widget widget_text">
  <div class="widget-title">
    <h3>Text title 2 </h3>
  </div>
  <div class="textwidget">
    blah blah
  </div>
</div>

so now you can identify each one seperately i.e.

div#text-1 div.widget-title {
background: url(path/to/third-image.gif) center left;
}

for the first occurance vers

div#text-2 div.widget-title {
background: url(path/to/third-image.gif) center left;
}

for the second occurance.

Hope this helps

Your post is very helpful.

I inserted this:

div.widget_awpcplatestads h3 {
display:none;
} 

div#awpcpclassifieds div.widget-title {
background: url(/wp-content/uploads/2009/12/LatestClassifieds.png) center left;
}

While the first part successfully removed the title, when I added the second part my image did not appear (even though I kept the widget's text title). I believe I have followed the code exactly, so what have I done wrong?

try using the full address as the url

I tried the full URL and it still did not work.

(I made sure to test the URL in my address bar first of course, so I know the URL is correct)

what is the site url? so I can take a look

Click here

Thanks

ok, here is how to do it. The first user just wanted a background image behind her text where you want to remove the text and just display the image. But you can't do that. teh minute you put in the

div.widget_awpcplatestads h3 {
display:none;
}

that element is no longer being displayed, so you can't put a image behind it.

There is a get around. Remove the CSS Insert

div.widget_awpcplatestads h3 {
display:none;
}

and change the title to '&nbsp;' - this is a space. Now the text of the title will be a space and you can put the image behind it.

OH, NOW I understand.

I tried inserting &nbsp; with and without "", '', and the widget title prints out the string rather than interpreting it as a blank space.

you need to put &nbsp; in the title, nothing more. It will look like it vanishes but it will be there, if you look in the page source you should see <h3>&nbsp;</h3> - actually in your case, once it is in, you will see your image.

Okay, Wimbledon, I'm waiting to see if you can get this before I try it! Rooting for you here...
--sandy