Headers and Repeats and Backgrounds…oh, my!

  • Alderwoman

    (@alderwoman)


    13 years ago

    Hi, all

    I’m not a total newbie to HTML and CSS, but I inherited a Web site from someone who was either a giant expert or knew how to copy and paste the right stuff in the right places, and this site has me completely flummoxed.

    The situation is this: I want to change the header of the site (nextstepsnfp.org) from blue to black, and get rid of the yellow rule lines underneath the header. Honestly, that’s it. Seemed pretty simple to me: just download the images, make the changes to the images, save the images with the same filename, delete the old ones, upload the new ones, and voila! all done.

    Alas, no joy with that.

    I found the file for the header in style.css (not in header.php), but it has repeats, and a bunch of other files that I can’t find in the File Manager. Here’s the code for the repeats:

    /* =Structure
-------------------------------------------------------------- */

/* The main theme structure */
#top_container{background-image:url(images/bkg-hdr-repeat.jpg); background-repeat:repeat-x; width:100%; height:205px;}
#content_container{width:100%; background-image:url(images/bg_header_repeat.gif); background-repeat:repeat-x; background-position:top;}
#content_container_inner{ width:100%; background-image:url(images/bg_header_inner_repeat.gif); background-repeat:repeat-x; background-position:top; padding:20px 0px 20px 0px}
#bottom_container{background-image:url(images/bg_bottom.gif); background-repeat:repeat-x; width:100%; height:60px;}
#footer_container{width:100%; height:51px; background-color:#fff;}
.centercolumn{width:940px; margin:0px auto 0px auto;}

    The only image that’s in the images folder is “bkg-hdr-repeat.jpg” all of the other images listed in the images folder aren’t there.

    I was able to replace the actual header, but it only filled the center of the top of the Web site; the rest of the top of the Web site stayed the same. Here’s the more code that seems to have something to do with the header:

    [CSS code moderated – the link to your site is sufficient to access the stylesheet]

    So, I get that most of the code doesn’t have a whole lot to do with the actual image bkg-hdr.jpg (which is the one I successfully changed, but which only filled up the middle of the header), but I included it because I have a strong suspicion that the yellow bar is in there…somewhere. On the other hand, the repeat image (which is 1 px wide) has the thicker of the two yellow rule lines in it; bdg-hdr.jpg does not.

    Hope this gives you what you need to help me. Seriously, all I wanted to do was swap out the blue header for a black and white one, get rid of the yellow rule line (or change its color), drop in the updated logo, and change the text colors to the red-and-black color scheme that the client wants, all of which I thought I could handle. But dammit, Jim, I’m a graphic designer, not a coder! All this CSS and HTML is giving me a headache in my eye…

    Help me, Obi Wan Kenoders…you’re my only hope…

    Thanks!

Viewing 1 replies (of 1 total)
  • thedebolavirus

    (@thedebolavirus)

    There are three background images that need to be deleted that will take away the blue and the yellow and reveal the black background colour. You’ll find them in these blocks of code:

    [please read the forum rules for posting code]

    #top_container {
    background-image: url(“images/bkg-hdr-repeat.jpg”);
    background-repeat: repeat-x;
    height: 205px;
    width: 100%;
    }

    #top {
    background-image: url(“images/bkg-hdr.jpg”);
    float: left;
    height: 95px;
    width: 940px;
    }

    .hdr-bkg {
    background: url(“images/bkg-hdr.jpg”) no-repeat scroll center top transparent;
    height: 194px;
    }

Viewing 1 replies (of 1 total)
  • The topic ‘Headers and Repeats and Backgrounds…oh, my!’ is closed to new replies.