Adding Image Behind/In Each Sidebar Widget Title

  • Unknown's avatar
    imaprile · Member ·

    Using the theme Vigilance – I’m trying to add this image: http://imaprile.files.wordpress.com/2010/07/kevinandamanda-fall2009-bookplate-with-paper-warmgraydots-2.png behind/within each sidebar widget title, and do WITHOUT the default bottom border. I can’t seem to figure out the margins to get the widget title text centered within the actual image. I’ve seen this done on several blogs, so I know it’s possible… I just can’t figure it out. I do have the CSS upgrade and have a decent grasp on CSS, again, I’m just stumped.

    Can anyone help? I’d appreciate it!

    April
    http://imaprile.com

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Try this. Since right now can’t add stuff to your CSS (Firefox plugins are acting up), I can’t try it, but it will get you part way there I think.

    .widgettitle  {
background:url("http://imaprile.files.wordpress.com/2010/07/kevinandamanda-fall2009-bookplate-with-paper-warmgraydots-2.png") no-repeat scroll 0 -45px transparent;
padding:25px 0 60px;
}

    Also, you will have to tweak the h2.widgettitle to get the title centered vertically.

  • Unknown's avatar
    hallluke · Member ·

    Try the code below. You will need to change some of your widget titles as they are too long or take up an extra line which doesn’t fit with the new image border.

    #sidebar h2.widgettitle {
background:transparent url("http://imaprile.files.wordpress.com/2010/07/kevinandamanda-fall2009-bookplate-with-paper-warmgraydots-2.png") no-repeat scroll 0 0;
height:80px;
padding:70px 0 0;
font-size:2em;
border:0;}
  • Unknown's avatar
    imaprile · Member ·

    Thanks both of you! The 2nd code worked! I really appreciate it!

  • Unknown's avatar
    thesacredpath · Member ·

    @hallluke, thanks for chiming in. The latest version of Firefox and some of my addons are not getting along well together and Firebug is freezing up on my continually.

  • Unknown's avatar
    hallluke · Member ·

    I’m using FF 3.6.6 and Firebug 1.5.4 and not having any issues, if you have both of those up to date maybe another add-on is causing the problems.

    lh

  • Unknown's avatar
    thesacredpath · Member ·

    Yes, that is what I’m using. There is a console error that keeps coming up that freezes things up and has to do with “skimlinks.” Right now I have all add-ons off except for Firebug. If I activate FB before the page completely loads, the little inspect icon cannot be clicked and the page I’m on stops loading. I have to turn FB off, force reload the page, allow it to completely load, and then activate FB. And after using the inspect feature several times, it becomes unresponsive and I have to quite FB, force refresh the page and then start FB again. All this only happens with .COM blogs. My self-hosted blog is fine.

    The error is:

    skimlinks() is not defined

    It’s part of this chunk of wordpress js (link purposely broken):

    http://wordpresscom .skimlinks .com/api/wordpress.js

  • Unknown's avatar
    thesacredpath · Member ·

    Actually I just turned console off and it looks like it isn’t freezing up anymore.

  • The topic ‘Adding Image Behind/In Each Sidebar Widget Title’ is closed to new replies.