changing header overlay png in digg 3

  • Author
    Posts
  • #327627

    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.

    #327779

    What is the URL of your blog?

    #327813

    emrjobs
    Member

    http://emrjobs.wordpress.com

    sorry, I thought it showed up automatically.

    #327817

    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.

    #327823

    #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?

    #327833

    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?

    #327841

    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.

    #327842

    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!

    #327844

    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.

    #327845

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

    #327847

    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!

    #327852

    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.

    #327855

    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!

    #327857

    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…

    #327858

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

The topic ‘changing header overlay png in digg 3’ is closed to new replies.