Support » Plugins and Hacks » change plain widget / sidebar headings to cute images?

change plain widget / sidebar headings to cute images?

  • I am running cutline three column split at bloggingforjesus.net

    I have searched for days on all types of forums for what I want to change and am noth having any luck.

    I have two sidebars with various types of widgets. I have no problem getting images onto the “text” widgets using the html tag <img src=”imagesource”>, but I was hoping to change the other widget titles like Meta, Categories, Blogroll, Archives, Recent Comments, and Search to the same type of image headings that you see on the left (faith lifts & christian links – which are text box widgets witht the image html as above).

    I have tried all kinds of things from hacking the stylesheet to the sidebar.php and can’t find it!! Any help would be majorly appreciated and I am even considering a $10 donation to paypal account if I can get this done soon!!!

Viewing 5 replies - 1 through 5 (of 5 total)
  • I haven’t seen your site, but if you are describing replacing the <h2> headers in the sidebar with graphics (or text with graphic backgrounds), this is something that is usually done with the CSS file.

    If it’s a background image with regular HTML text over it, you would do something like:

    #sidebar h2 {
    background: url (images/h2_background.jpg);
    repeat: none;

    (Don’t copy and paste that — it’s just a generalized example.) You may also have to use “display: block;” for the h2 and specify a height and width to fit your graphic. You may also have to add padding, margin, and position the background to fit your text properly, depending on what you are trying to do.

    If you have a graphical treatment of the text itself in your background graphic, you will then want to suppress the display of the HTML text. There’s more than one way of doing this — one popular current method is to absolutely position the text 9999px to the left or right, where it won’t be seen until the day in the future when we have flying jet cars and screens with resolutions of 10000 pixels wide.

    For more info, google variations of “CSS background image replacement” and “CSS replacing text with images” etc.

    PS Took a quick look at your site, and it is VERY slow loading. I don’t know why, but just thought you ought to know.

    hmmmm, I wonder why it is so slow? It pops right up for me. I went to a friends house this weekend and it was ok there too? I am now going on day 5 of looking into how to do this and still cant figure it out. I am going to keep trying – I will also try the

    #sidebar h2 {
    background: url (images/h2_background.jpg);
    repeat: none;

    that you suggested. I am not wanting to keep the titles that are there, and I also don’t want to scoot them out into neverland.

    I will certainly update if I figure this one out.

    Hi jennyb7: I found this post Googling around, hoping someone had found a better method than the one I’m working in.

    What I’m doing is going through the widgets.php file (found in the wordpress/wp-includes directory) which seems to have the coding for all of the default widgets. I’m finding each one I want to change and adding this in the appropriate spot:
    <?php echo “<img src=/sidebar-heads/subscribe.png”; ?>

    The path is the location of the substituted image headers. It’s a lot of work but the bigger problem is that it might not survive a WordPress upgrade. Surely there’s got to be a better way?

    i use my own plugin http://wordpress.org/extend/plugins/widget-logic/other_notes/ to replace widget headings with text rendered in a font using another plugin (http://templature.com/2007/10/18/ttftitles-wordpress-plugin)

    it provides a ‘widget_content’ filter that allows you to modify the appearance of all widgets without hacking their code.

    i still reckon CSS might be the way for the original poster!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘change plain widget / sidebar headings to cute images?’ is closed to new replies.