Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Adding Image Behind/In Each Sidebar Widget Title

  1. 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 imaprile.com.

  2. 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.

  3. 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;}

  4. imaprile
    Member

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

  5. 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.

  6. 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

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

  8. thesacredpath
    Member

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

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags