Frequently Asked Questions:

FAQ: Can I change the background color of just the top header area?

If you want to change the background color of just the top header area, so it looks something like this:

You can pull it off by adding one line to your stylesheet. Open up your stylesheet by going to “Design” (”Presentation” in old versions of WP) –> “Theme Editor” and selecting “Stylesheet (style.css)”. Scroll down to line 158, which looks like this:

#header {
    height: 108px; /*height of header: logo & top links - see 5 lines below*/
}

Add a line in like so and change the color code to whatever you want it to be.

#header {
    height: 108px; /*height of header: logo & top links - see 5 lines below*/
    background: #ff9900;
}

Click “update file” to save your changes, visit your blog and force your browser to refresh to see your changes.

Questions? Instead of emailing for support, leave a comment below so everyone can benefit from any clarification.

This entry was posted on Wednesday, April 23rd, 2008 and is filed under Customizing ProPhoto, Frequently Asked Questions. You can leave a response, or trackback from your own site.

19 Responses to “FAQ: Can I change the background color of just the top header area?”

  1. On July 3rd, 2008 at 3:04 pm Cherie Irwin said:

    Jared, line 158 looks like this on my stylesheet.

    #header {
    height: 108px;

    I don’t want to mess anything up, so what do I need to do to change the color of the top header area?

  2. On July 3rd, 2008 at 7:15 pm Jared said:

    @Cherie Irwin: Cherie, that’s just because you have a slightly older version of the stylesheet. that’s the right spot, go for it!

  3. On August 20th, 2008 at 5:43 pm debra parker said:

    Hey Jared,

    Is there a way to make this line go away completely so that the top header bar is smaller?

  4. On August 21st, 2008 at 4:44 am Jared said:

    @debra parker: what do you mean by “this line”?

  5. On August 21st, 2008 at 7:51 pm debra parker said:

    the area on top of the logo and top nav bar.

  6. On August 22nd, 2008 at 6:15 am Jared said:

    @debra parker: yeah, it’s in the tutorials. see this link:

    http://www.professionalphotographertheme.com/tutorials/css-guide.html#topbar

  7. On August 22nd, 2008 at 2:45 pm debra parker said:

    thanks.

  8. On September 16th, 2008 at 10:53 pm Mikael said:

    I’d like to add space to the top header area (example:150 pixels looks right).
    However this adds space below the links. I’d like the space at the top of the logo header instead of below the links. Suggestions?

  9. On September 17th, 2008 at 6:40 am Jared said:

    @Mikael: just increase the height of the header in your stylesheet, then add extra padding to the #topnav and h1#blog-title to make them align at the bottom.

  10. On September 17th, 2008 at 8:50 pm Mikael said:

    I’m not clear on how to add padding. Will it be labeled as ‘padding’?

  11. On September 17th, 2008 at 9:00 pm Mikael said:

    Thank you in advance.

    Where do I find h1#blog-title? I this in the topnav section?

  12. On September 18th, 2008 at 5:51 am Jared said:

    @Mikael: yeah, it’s labeled as padding. and h1#blog-title is in the stylesheet, around line 146 (count down from line 140).

  13. On October 4th, 2008 at 3:31 pm Juliana Pessoa said:

    Hello Jared,

    I looked for a FAQ about this, but i didn´t find it. So here goes my question…
    Can I put the top header area and the top nav links below the flash header, just like in this blog?
    http://lisarussophotography.com/blog/

  14. On October 5th, 2008 at 4:30 pm Jared said:

    @Juliana Pessoa: there’s no tutorial for doing this because it is not a basic, supported customization. some people have figured it out on their own, or some have hired us to do it at extra cost. sorry!

  15. On November 24th, 2008 at 9:51 pm Michelle said:

    Is there a way to change the header-logo file to a png? I’ve changed the color of the top header, added a matching color to my logo background, but can’t seem to get the background of my logo to match the color of the header on the website. There is a slight difference. Also, if I change the logo to a png, will it reveal the name of my blog that hides under the logo before the logo loads? Thanks in advance.

  16. On November 25th, 2008 at 7:41 am Jared said:

    @Michelle: you can change it to a .png, but you’ll need to edit the style sheet around line 168:

    h1#blog-title span {
    background-image: url(images/header-logo.jpg);
    background-repeat: no-repeat;
    position: absolute;
    height: 100%;
    width: 100%;
    }

    change the .jpg to .png

    and then yes, the blog name will be shown. you can get rid of that by adding this line:

    h1#blog-title { text-indent:-999em; }

    on a new line somewhere on your stylesheet

  17. On December 5th, 2008 at 10:24 pm Kim said:

    I don’t have a line 158…

  18. On December 6th, 2008 at 9:03 am Jared said:

    @Kim: not all of the lines are numbered, count up or down from a numbered line.

  19. On January 11th, 2011 at 11:39 am Billie Leese said:

    Do you folks have a facebook fan web page? I appeared for one on twitter but couldn’t uncover one, I would love to turn into a fan!

Leave a Reply