Changing entire site background colour and text colour

• 

  dcmresidential · Member · Feb 20, 2012 at 1:30 pm

  • Copy link
  • Add topic to favorites

  Hello all,

  Apologies for the basic request, I’ve been looking through the forums to try and find the answers but being incredibly new at the CSS editing, this is all a bit of a foreign language at the moment. Here’s what I need to do.

  The website is http://dcmresidential.wordpress.com

  It’s a very basic site for some friends, nothing fancy needed and won’t be updated much, so WordPress the ideal tool for it. However, there are two things that I need to do. First is to change the entire background (behind the posts and all menus, sidebars etc) to the same grey colour (#666666) and then make all of the text white.

  I have upgraded the account to allow me to edit CSS and have Firebug installed on my browser, hopefully that is enough to be able to do this.

  Thank you in advance for your help.

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

• 

  designsimply · Member · Feb 21, 2012 at 3:40 pm

  • Copy link

  To change the background color of the main content area on the Twenty Ten theme, use this CSS:

  #wrapper {
    background: #666;
  }

  You’ve set a darker gray background on the entry-content class. You can remove this and use the above CSS instead.

  .entry-content {
    background-color:#333333;
  }

  To change the main bits of text to white, add this:

  #content, #content input, #content textarea {
    color: #fff;
  }

  Note that you may also want to adjust link colors. Here are a few of the link color settings from the Twenty Ten stylesheet. You can copy this and adjust the colors as necessary.

  .entry-meta a,
  .entry-utility a {
  	color: #888;
  }
  .entry-meta a:hover,
  .entry-utility a:hover {
  	color: #ff4b33;
  }
  .comment-meta a:link,
  .comment-meta a:visited {
  	color: #888;
  }
  .comment-meta a:active,
  .comment-meta a:hover {
  	color: #ff4b33;
  }
  
  #site-info a {
  	color: #000;
  }
  #site-generator a {
  	color: #666;
  }

• 

  dcmresidential · Member · Feb 21, 2012 at 9:22 pm

  • Copy link

  That is nothing short of fantastic – thank you so much for your help.

  As also seems to be the way with these posts, once one problem is solved another appears! If you have time and can answer these two questions, that would be such a help.

  1) How do I now get rid of the small black bar above the header now?
  2) How would I change the font colour and background colour of the navigation bar?

  Thank you again!

• 

  designsimply · Member · Feb 21, 2012 at 10:28 pm

  • Copy link

  1) How do I now get rid of the small black bar above the header now?

  #branding img {
  border-top: none;
  }

• 

  designsimply · Member · Feb 22, 2012 at 1:48 am

  • Copy link

  2) How would I change the font colour and background colour of the navigation bar?

  To see how the gist of the menu styles in Twenty Ten, check the original stylesheet and look for the “=Menu” section.

  You can change the top navigation background and font colors with this CSS:

  #access {
  	background: #fff;
  }
  #access a {
  	color: #000;
  }
  #access ul ul {
  	box-shadow: 0px 3px 3px rgba(255,255,255,0.2);
  	-moz-box-shadow: 0px 3px 3px rgba(255,255,255,0.2);
  	-webkit-box-shadow: 0px 3px 3px rgba(255,255,255,0.2);
  }
  #access ul ul a {
  	background: #fff;
  }
  #access li:hover > a,
  #access ul ul :hover > a {
  	background: #ddd;
  	color: #333;
  }
  #access ul li.current_page_item > a,
  #access ul li.current_page_parent > a,
  #access ul li.current-menu-ancestor > a,
  #access ul li.current-menu-item > a,
  #access ul li.current-menu-parent > a {
  	color: #000;
  }
  * html #access ul li.current_page_item a,
  * html #access ul li.current_page_parent a,
  * html #access ul li.current-menu-ancestor a,
  * html #access ul li.current-menu-item a,
  * html #access ul li.current-menu-parent a,
  * html #access ul li a:hover {
  	color: #666;
  }

  Adjust the colors as necessary. See this page for more info about colors: http://www.w3.org/TR/css3-color/#svg-color

• 

  dcmresidential · Member · Feb 23, 2012 at 6:45 pm

  • Copy link

  I cannot thank you enough for your help on this, thank you so much.

• 

  designsimply · Member · Feb 28, 2012 at 5:42 pm

  • Copy link

  I’m happy I could help!