Changing header background color via CSS

  • Resolved melange

    (@melange)


    11 years, 6 months ago

    Hi,

    I’m trying to change the background color of the entire header (to look something like the black background in the header of this page). I know there is an option in the theme options panel but I would prefer to do it via code.

    I used this code in my child theme:

    #header {
	background: #000;
}

    But the header color is still white. Also I have tried other ways of writing the same thing (like using background-color instead) but to no avail.

    Am I doing something wrong?

Viewing 3 replies - 1 through 3 (of 3 total)
  • RossMitchell

    (@rossmitchell)

    11 years, 6 months ago

    It would help us help you if you posted a link to your website.

    Are you using a browser inspector like firebug (for firefox) ? Each browser has an equivalent. It will show you your html and css.
    Are you sure that the header block has in id of “header” ?
    Are there other components of the header which also have background settings. The browser inspector will answer all these questions.

    Thread Starter melange

    (@melange)

    11 years, 6 months ago

    Sorry, I can’t post a link because I’m currently working on a local copy of the site. But yes I am sure the header block has an ID of header.

    This is how the style.css of the Hueman theme itself styles the header block: 

    #header { background: #33363b; position: relative; padding-bottom: 60px; }
#header .pad { padding-top: 30px; padding-bottom: 30px; }
#header .container-inner { position: relative; }

    However using the code I mentioned in my previous post doesn’t work in my child theme.

    I am using Firebug Lite in Chrome.

    “Are there other components of the header which also have background settings” <– not sure what this means?

    Thread Starter melange

    (@melange)

    11 years, 6 months ago

    (Edit) Using the !important keyword works. But that seems a bit hackish?

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Changing header background color via CSS’ is closed to new replies.