[Superhero Theme] Change Header Background Color

• 

  sarahqsuhail · Member · Sep 2, 2014 at 5:09 am

  • Copy link
  • Add topic to favorites

  I’d like to change the header background color to white. How can I do this?

  Thanks so much!

  The blog I need help with is: (visible only to logged in users)

• 

  staff-happychia · Staff · Sep 2, 2014 at 8:36 am

  • Copy link

  You need to purchase the Custom Design upgrade to be able to change the color of your header.

• 

  hallluke · Member · Sep 2, 2014 at 10:55 am

  • Copy link

  Your blog is also set to private so you will either need to make it public or let us know what theme you are using so we can check what CSS code would be needed (it’s different for each theme!).

• 

  sarahqsuhail · Member · Sep 2, 2014 at 11:51 am

  • Copy link

  Hi I’m using the Superhero theme and have already purchased the upgrade. I’m able to change the header text color but don’t know the code for the header background color.

  I’d like to keep my blog private for now but if there’s no way to help me without seeing it I’ll make it public.

  Much appreciated!

• 

  hallluke · Member · Sep 2, 2014 at 1:42 pm

  • Copy link

  Try this and let me know if it works – it should turn the entire header background an extremely bright red:

  #masthead-wrap {background-color:#f00;}

• 

  sarahqsuhail · Member · Sep 2, 2014 at 3:23 pm

  • Copy link

  AHHHH you’re a genius!

  Thank you so much! Worked perfect.

  masthead-wrap….no why couldn’t they use something simple like header-background :|

• 

  sarahqsuhail · Member · Sep 2, 2014 at 3:28 pm

  • Copy link

  Is there like a dictionary/glossary of CSS terms used by this theme?

  Sorry if that’s a beginner question.

  Thanks again!

• 

  hallluke · Member · Sep 2, 2014 at 3:53 pm

  • Copy link

  Many browsers have an option on the right-click menu to “inspect element” (or something similar) which will bring up the HTML source code so that you can poke around inside and check out the structure, classes and IDs – that’s what I do!

• 

  thesacredpath · Member · Sep 3, 2014 at 7:04 pm

  • Copy link

  If you are not yet familiar with the web inspector tool in your browser, take a look at our support document on How to Find Your Theme’s CSS, which has some brief screencasts to get you started using it. It makes working with CSS much easier.

• 

  sarahqsuhail · Member · Sep 4, 2014 at 4:11 am

  • Copy link

  Thanks!

  I’ve been doing that for chrome. The challenge comes in elements like sub-menu items where I know there’s an overall “main-menu” object but it can be a challenge to find.

  So far so good though!

• 

  thesacredpath · Member · Sep 4, 2014 at 5:23 pm

  • Copy link

  Yes, they can be confusing. This is a simplifed general structure of a menu item with a submenu:

  <ul> (entire menu)
           <li>top level menu item
                 <ul> (submenu)
                        <li>first submenu item</li>
                        <li>second submenu item</li>
                        <li>third submenu item</li>
                        <li>etc.....</li>
                 </ul>
           </li>
  </ul>

  I don’t know if that will help, but I thought I would offer it just in case.

• 

  sarahqsuhail · Member · Sep 8, 2014 at 4:14 am

  • Copy link

  Much appreciated!

  Quite addictive it is!

• 

  thesacredpath · Member · Sep 8, 2014 at 5:30 pm

  • Copy link

  Indeed it is.