Change Header Background for Elegant Grunge?

• 

  barbmm1 · Member · Sep 2, 2011 at 9:34 am

  • Copy link
  • Add topic to favorites

  Hello

  Can anyone help me with CSS customization – I wish to change the background color for the header-image in the Elegant Grunge theme.
  I have succeeded in change the overall background color of the theme but still have not been able to change the color of the header which is my main-problem.
  If possible I would also like to know where in the stylesheet I change the background-color of the different columns.

  Thank you very much!

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

• 

  thesacredpath · Member · Sep 2, 2011 at 9:57 am

  • Copy link

  There are two image that do the header area, one in #header-wrap and the other in .content-sidebar-sidebar #header . Here are the links to the two images.

  

  

• 

  barbmm1 · Member · Sep 2, 2011 at 10:21 am

  • Copy link

  Thank you very much for your reply. Maybe it is my SCC-skills (limited) that are the probmlem -because it seems to me that the codes are only for the header-image and not for the background color of the header?
  Below are the codes from my style-sheet, should it not say “color” in order for me to change the color (right now it is a very dark grey)..:

  #header-wrap {
  background: url(images/header-repeat.png) repeat-x center top;
  position: relative;

  }
  .content-sidebar-sidebar #header {
  background-image: url(images/header-double-sidebar.png);

• 

  thesacredpath · Member · Sep 2, 2011 at 10:31 am

  • Copy link

  The dark brownish grey is a repeating image (the second image I listed above). It isn’t just a declared color, and if you set the image to “none” and declare a color, it will extend down below the header image. Give the following a try and see what I mean.

  #header-wrap {
  background: none repeat-x scroll center top red;
  }

  What you need to do is to recreate that image to the exact size in the color you want and then upload it to your media library, get the URL, and then replace the relative URL in the #header-wrap background declaration with the full URL of your image.

  You will also have to get rid of the ragged edge image that wraps the header image by doing the following.

  .content-sidebar-sidebar #header {
  background-image: none;
  }

  Or you will also have to edit or recreate the ragged border image.

• 

  barbmm1 · Member · Sep 2, 2011 at 10:42 am

  • Copy link

  Thank you very much for your detailed reply -now it makes sense since it is an image an not a color. I will try your suggestions and if it turns out to complicated I might change to an other theme which is more customizing-friendly : )

  Thanks againg – I love to get more knowledgable in stead of giving up!

• 

  barbmm1 · Member · Sep 2, 2011 at 12:36 pm

  • Copy link

  It is a little difficult to work with this theme – but it has already improved with your help! Can you tell me if it is the same case with the background color of the blog-text area and the sidebar columns – that they are images and you cannot change them with a color-code??

  Thank you

• 

  designsimply · Member · Sep 2, 2011 at 4:26 pm

  • Copy link

  Correct. The Elegant Grunge design is pretty image heavy! Here’s the image that is used for the content and sidebar columns: http://s0.wp.com/wp-content/themes/pub/elegant-grunge/images/body.png

• 

  barbmm1 · Member · Sep 3, 2011 at 2:11 pm

  • Copy link

  Thanks again!

• 

  designsimply · Member · Sep 3, 2011 at 2:23 pm

  • Copy link

  Cheers! Let us know how it turns out. :)

• 

  barbmm1 · Member · Sep 6, 2011 at 7:30 am

  • Copy link

  I think it is turning out allright – I like the design of the EG-theme and have decided to keep working with it although it is challenging : )