changing title region/header area color in Chateau

• 

  wvando · Member · Oct 7, 2011 at 8:33 pm

  • Copy link
  • Add topic to favorites

  Is it possible for me to make the background area behind my blog title (header region?) a different color, overriding the background image across the top of the page? I would like try it with a gray color…

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

• 

  thesacredpath · Member · Oct 7, 2011 at 8:42 pm

  • Copy link

  See if this would be what you are looking for. You can edit the color code as you see fit.

  #branding {
  background-color: #CCCCCC;
  }

• 

  wvando · Member · Oct 8, 2011 at 1:49 pm

  • Copy link

  Thank you; two follow up questions:

  (1) can the area that is colored at the top of the page be extended to the full width of the page?
  (2) can it have some degree of transparency so that the rooster on the weather vane in my background image still shines through?

• 

  wvando · Member · Oct 8, 2011 at 4:49 pm

  • Copy link

  Solved #2 above with opacity code; anyone know how the branding at the top can now be extended to the full width of display?

  Also, the opacity seems to create issues with the ability to make the title font dark; is there a way to exempt the title itself from the opacity?

• 

  thesacredpath · Member · Oct 8, 2011 at 6:50 pm

  • Copy link

  Something to keep in mind with opacity is that it isn’t recognized by all browsers, namely Internet Explorer 6, 7 and 8. For IE8 and earlier, you would have to also add the following. Also note that all child elements (title, search box) have their opacity changed as well.

  filter:alpha(opacity=50);

  To have the color go completely across the top, no matter the width of the browser window, my suggestion is to create a PNG image (130px tall x 10px wide) with an opacity/transparency of about 50% in the #DEDEDE color and then upload that image and add it into a background declaration in #page. The 130px would be the same height as the grey area now and using repeat-x will just create a band of color across the top.

  #page {
  background: url("URL OF IMAGE") repeat-x scroll 0 0 transparent;
  }

• 

  wvando · Member · Oct 10, 2011 at 8:14 pm

  • Copy link

  Thank you!

• 

  thesacredpath · Member · Oct 10, 2011 at 8:47 pm

  • Copy link

  You are welcome.