Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

changing header overlay png in digg 3

  1. emrjobs
    Member

    I'm trying to replace the header overlay png image for this blog. I see the code references another web site:

    <div id="header-overlay">
    <img alt="" src="http://s1.wordpress.com/wp-content/themes/pub/digg3/images/bg_header_overlay.png"/>
    </div>

    How do I change this using custom CSS? I tried writing something like:

    #header-overlay{
    position: absolute;
    width: 904px;
    height: 250px;
    z-index: -1;
    background: url(http://www.emrjobs.net/blog/header_overlay.png);
    }

    (Only thing I added to the header-overlay was my new image that resides at http://www.emrjobs.net/blog/header_overlay.png)

    It's like I can't get to the source code to change it in the html. Is there a way to do that? Sorry, I'm new to WordPress, and honestly I'm new to overlays too. Thanks in advance for the help.

    The blog I need help with is emrjobs.wordpress.com.

  2. thesacredpath
    Member

    What is the URL of your blog?

  3. emrjobs
    Member

    http://emrjobs.wordpress.com

    sorry, I thought it showed up automatically.

  4. thesacredpath
    Member

    The link to the header overlay you want to use, http://www.emrjobs.net/blog/header_overlay.png , gives me a 404 file not found error.

  5. thesacredpath
    Member

    #header-overlay controls the blog title (in the original theme), the RSS stuff and the search box and button. Using Firebug in Firefox, if I disable it, the above mentioned stuff disappears.

    What exactly are you trying to replace in the header area?

  6. emrjobs
    Member

    Feel like such a novice here! The header overlay is actually http://www.emrjobs.net/blog/bg_header_overlay.png

    I put the wrong address for you and in my code! But I fixed that, and now using that messes up my page. I'm basically trying to replace the little gray areas of the corners around the header. So the only way I knew to do this was to recreate this image (by coloring those corners the same light blue as my background) and then replace it.

    Is there a way to disable or replace the image coming from the s1.wordpress.com site?

  7. thesacredpath
    Member

    I'm afraid I'm at a loss. I expect that the white background of the header area, along with the grey corners are a gif image, but I'll be darned if I can find it.

  8. emrjobs
    Member

    Hmm, if you go to http://s1.wordpress.com/wp-content/themes/pub/digg3/images/bg_header_overlay.png you can see the entire image.

    I was thinking that if I replaced this image somehow on my server or another by redirecting the url, it could be done. I guess my question is how to do this within wordpress? Through CSS or HTML? It looks like it's buried somewhere I can't get to.

    BTW, thanks for your time on this!

  9. thesacredpath
    Member

    If you replace the URL in for a particular element in your CSS, then it overrides (should) the URL in the original CSS. I'm officially lost. I've never played with Digg and it is not straightforward with the header stuff.

  10. thesacredpath
    Member

    Perhaps someone else will come along that has more experience with Digg.

  11. emrjobs
    Member

    That makes two of us! I'll keep playing around. I think I almost have it because my image is showing up -- just below the original overlay image, causing a repeat of the image -- I just must have the syntax wrong or something.

    Anyone else wanna take a stab? Thank you!

  12. devblog
    Member

    I'm basically trying to replace the little gray areas of the corners around the header.

    add this to your CSS code:

    #header-overlay img{display: none;}

    That should take those gray areas out.

  13. emrjobs
    Member

    Bingo! I placed this code with the original that I had above (replacing the image) but I still had the other image (what I thought was the other image) repeating under it. Turns out, I put a "no-repeat" on my image and now it works! You can view this at:

    http://emrjobs.wordpress.com/

    Sweetness. Thanks for all your help guys!

  14. emrjobs
    Member

    Oh, and I meant to tell you, I still had to have my image showing up because if I didn't there was only a header image and no rounded corners overlaying...

  15. thesacredpath
    Member

    Sweet! It looks much better now. Thanks for popping in one that Devblog.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags