Background color change after multiple solves

• 

  lisarhode · Member · Dec 8, 2013 at 11:28 pm

  • Copy link
  • Add topic to favorites

  I posted this issue in a previous thread and the design modification was not resolved.

  I want to change the background-color of my header, body and sidebar. Earlier in design development I added code that was advised from CSS support for positioning the header image and positioning background-color for top to bottom consistency. I think these changes are creating design difficulties with updating this color change.

  This is the color change:
  header/body: #B3B8BA
  sidebar: #BFB2BC

  This is the most recent code I added from CSS support, the answer provided by staff “thesacredpath”:

  .site-header {
  background-color: #B3B8BA;
  }

  Sidebar:
  #secondary {
  background-color: #BFB2BC;
  }

  Content area:
  #primary {
  background-color: #B3B8BA;
  }

  This modification does not replace all the previous background-color. How do I code the new background-colors to align with previous modifications without loosing the image header position?

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

• 

  thesacredpath · Member · Dec 9, 2013 at 9:34 pm

  • Copy link

  Lisa, let’s take this a step at a time. You have added the colors to the content and sidebar, but we still have the background image set in #main. Try temporarily removing the following rule from your CSS and let’s go from there.

  #main {
      background: url("http://lisarhode.files.wordpress.com/2013/10/backgroundcolorline.png") repeat-y scroll 0 center rgba(0, 0, 0, 0);
      min-height: 410px;
  }

• 

  lisarhode · Member · Dec 10, 2013 at 12:11 am

  • Copy link

  Thanks,
  What is next?

• 

  thesacredpath · Member · Dec 10, 2013 at 3:59 am

  • Copy link

  Ok, let me know what you are wanting things to look like. I know that we had included a minimum height at one point so that the grey area of the page would flow all the way to the bottom. Is that your desire now? If so, add the following to the #primary rule you have in your existing custom CSS.

  min-height: 478px;

  so that it looks like this.

  #primary {
      background-color: #B3B8BA;
      min-height: 478px;
  }

  And then, what is next on your wish list. :)

• 

  lisarhode · Member · Dec 10, 2013 at 6:26 pm

  • Copy link

  That solved it thanks!
  I’ll post a new topic.

• 

  thesacredpath · Member · Dec 10, 2013 at 9:31 pm

  • Copy link

  You are welcome, and I’ll watch for the new topic.