WordPress.org

Ready to get started?Download WordPress

Forums

change plain widget / sidebar headings to cute images? (6 posts)

  1. jennyb7
    Member
    Posted 6 years ago #

    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!!!

  2. StrangeAttractor
    Member
    Posted 6 years ago #

    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.

  3. StrangeAttractor
    Member
    Posted 6 years ago #

    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.

  4. jennyb7
    Member
    Posted 6 years ago #

    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.

  5. martinkelley
    Member
    Posted 6 years ago #

    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?

  6. alanft
    Member
    Posted 6 years ago #

    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!

Topic Closed

This topic has been closed to new replies.

About this Topic