I meant this , a blank space.
In what widget? And can I ask why you’re trying to output a blank widget heading?
Basically, what I am trying to do is replace my widget text titles with images (so I can photoshop shadow effects on the widget title text, etc.).
I am trying to use this CSS insert:
div#awpcpclassifieds div.widget-title {
background: url(http://www.myurl.net/wp-content/uploads/2009/12/LatestClassifieds.png) center left;
}
to replace the widget title with the image I want. Yet “div.widget-title” doesn’t exist unless some text is there, hence why I am trying to output a blank widget heading that will have the image I select placed over it.
Is there a better way to do this?
Thank you.
Try googling on ‘css image replacement’.
Ah, that was a very helpful search term. I’m reading up on some of the techniques now, thank you.
Glad I could help. There are a few different approaches out there. The best one really depends upon what you’re replacing, where and what your design priorities are. So it’s really down to trying a few and seeing what works for you.
I will try some approaches and report back.
So I tried using technique 3 [URL=”http://css-tricks.com/css-image-replacement/”%5Dfrom this page[/URL]:
[CODE]<h1 class=”technique-three”>
CSS-Tricks
</h1>[/CODE]
[CODE]h1.technique-three {
width: 350px; height: 75px;
background: url(“images/header-image.jpg”);
text-indent: -9999px;
}[/CODE]
Yet that didn’t work either as again WordPress is not accepting “<h1 class=”technique-three”>
CSS-Tricks
</h1>” as a valid title and instead strips the tags and outputs “CSS-Tricks”. How can I bypass the title box in the widget area?
I found this ended up working:
div.widget_awpcplatestads h3 {
display: block;
width: 180px;
height: 23px;
text-indent: -9999px;
background-image: url(‘http://www.myurl.net/wp-content/uploads/2009/12/LatestClassifieds.png’);
background-repeat: no-repeat;
background-position: center center;
}
Thanks for everyone’s help!
