Homepage Background Change Question

• 

  roomzdesign · Member · Nov 27, 2015 at 7:06 pm

  • Copy link
  • Add topic to favorites

  I need to change the text box color (where my business logo is at) above the menu header to match the background color but keep menu header color white. How can I do that?

  Much thanks!

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

• 

  spencerwberry · Member · Nov 30, 2015 at 10:23 pm

  • Copy link

  Do you mean to change the background to the logo in the header but not to any other elements? If so, try this:

  #masthead img{
  	background-color:#30302f;
  }

• 

  roomzdesign · Member · Nov 30, 2015 at 10:28 pm

  • Copy link

  Thanks, Spencer!

  It need to go all the way to where the social media icons are at.

  Much thanks!

  Joshua

• 

  thesacredpath · Member · Dec 2, 2015 at 8:22 am

  • Copy link

  Joshua, due to the way things are structured in the header area, this may be about the best we can do without causing things to go awry on smaller screens. Remove the code above from your custom CSS and then add the following and see what you think.

  .site-header {
      background-color: #30302f;
  }
  #masthead .widget-area {
      background: #fff;
      padding-left: 20px;
  }
  .navigation-main {
      background-color: #fff;
      margin-bottom: 0;
  }

• 

  roomzdesign · Member · Dec 2, 2015 at 6:55 pm

  • Copy link

  It is looking great! Thank you!

  I am thinking maybe it would look better if social media icons/Instagram feed area have same background color but change the social media icons colors to match their current brand colors and font color to white to make it easier to read. Is that possible to do that?

  Much thanks!

• 

  thesacredpath · Member · Dec 3, 2015 at 7:50 am

  • Copy link

  Hi, we can certainly make the background full width and change the colors of the widgets you have at upper right. Due to the dark color of the header background, using the actual brand colors on the icons would result in too low of contrast and they would sort of get lost (the dark blue of FB, the Red for Pinterest. Let’s try this. Remove this from your custom CSS.

  #masthead .widget-area {
      background: #fff none repeat scroll 0 0;
      padding-left: 20px;
  }

  and then add this at the bottom and see what you think.

  .widget_wpcom_instagram_widget {
      color: #fff;
  }
  .widget_wpcom_instagram_widget a {
      color: #719843;
  }
  .widget_wpcom_social_media_icons_widget li a, .widget_wpcom_social_media_icons_widget .widget-title {
      color: #fff;
  }