easy question about how to change color in a stylesheet. Please help

Discussion in 'Web Design and Development' started by Rob587, Jun 27, 2009.

  1. Rob587 macrumors 6502a

    Rob587

    Joined:
    Jul 4, 2004
    Location:
    Orlando, FL
    #1
    Im using a wordpress theme at spygolfer.com and im newish to stylesheets.

    Where do I change the code in my stylesheet in order to change the main background color(inside the edge borders, but not the posts)?

    Also, what do I edit to change the color of my menu links in the upper right hand corner of spygolfer.com? The ones under the search bar.

    I copy and pasted my stylesheet below. Sorry its so long. I didnt know how else to show it though. I will remove when my question are answered. thanks

    Code:
    /*
    Theme Name: Citrus Theme
    Description: A Premium WordPress theme by Unique Blog Designs.
    Author: Unique Blog Designs
    Author URI: [url]http://www.uniqueblogdesigns.com[/url]
    */
    /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    	General
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
    /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    	Layout Control
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
                                                                                      
    	              
                                                                                            
    body {
    	text-align:center;
    	font:62.5%/1.42 "trebuchet ms",arial,helvetica,sans-serif;
    	min-width:994px;
    }
    #page {
    	width:994px;
    	margin:0 auto 11px;
    	padding:0 0 18px;
    	font-size:1.2em;
    	text-align:left;
    }
    #header {
    	width:100%;
    }
    #wrap {
    	width:100%;
    	clear:both;
    	padding:34px 0 0;
    }
    #content {
    	width:655px;
    	margin:0 313px 0 26px;
    	float:left;
    	display:inline;
    }
    .home #content {
    	width:518px;
    	margin:0 450px 0 26px;
    }
    .sidebars {
    	float:left;
    	display:inline;
    }
    #sidebarOne {
    	width:268px;
    	margin:0 0 0 -294px;
    }
    .home #sidebarOne {
    	width:405px;
    	margin:0 0 0 -431px;
    }
    #footer {
    	width:100%;
    	clear:both;
    	overflow:hidden;
    	text-align:center;
    	font-size:1.2em;
    	padding:20px 0;
    }
    /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    	Header
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
    #logo {
    	display:inline;
    	float:left;
    	font-size:.833em;
    	padding:9px 0 0 67px;
    	margin:26px 0 0 41px;
    }
    #logo a,
    #logo a:visited {
    	display:block;
    	font-size:3.8em;
    	line-height:1.05;
    	font-weight:normal;
    }
    #logo a:hover,
    #logo a:focus {
    	text-decoration:none;
    }
    #logo em {
    	display:block;
    	padding:0 0 0 2px;
    	clear:both;
    	font-size:1.2em;
    	line-height:1.05;
    	font-style:normal;
    	font-weight:normal;
    	color:inherit;
    }
    #logo img {
    	display:block;
    	margin:0 0 0 -67px;
    	position:relative;
    }
    #header .inner {
    	float:right;
    	width:415px;
    	margin:17px 41px 0 0;
    	display:inline;
    }
    #header .rss {
    	float:right;
    	width:53px;
    	height:34px;
    	margin:0 0 8px;
    	overflow:hidden;
    	text-indent:-9999px;
    }
    #searchform {
    	float:left;
    	padding:12px 0 0;
    }
    #searchform label {
    	float:left;
    	margin:0 10px 0 0;
    }
    input#s {
    	width:206px;
    	width/**/:/**/200px;
    	height:18px;
    	height/**/:/**/15px;
    	padding:1px 3px 0;
    	float:left;
    	text-align:left;
    	font-size:.833em;
    }
    #menu {
    	width:100%;
    	clear:both;
    	font-size:1em;
    }
    #menu li {
    	margin-left: 0;
    	margin-bottom: 0;
    	margin-right: 25px;
    	margin-top: 0;
    	float:left;
    	position:relative;
    	z-index:11;
    	padding:5px 0 0;
    }
    #menu li a {
    	float:left;
    	padding:5px 2px;
    }
    #menu li.hover a,
    #menu li:hover a,
    #menu li:focus a,
    #menu li.current_page_item a,
    #menu li a:hover,
    #menu li a:focus {
    	text-decoration:none;
    }
    #menu li ul {
    	position:absolute;
    	width:200px;
    	left:-999em;
    	top:26px;
    	line-height:2;
    	font-size:1em;
    }
    #menu li ul li {
    	float:none;
    	background:none;
    	padding:0;
    	margin:0;
    	width:100%;
    	height:auto;
    	float:left;
    	display:inline;
    }
    #menu li.hover ul,
    #menu li:hover ul {
    	left:0;
    }
    #menu li.hover ul li.hover,
    #menu li:hover ul li:hover,
    #menu li:hover ul li:focus {
    	border:none;
    }
    #menu li.hover ul li ul,
    #menu li:hover ul li ul,
    #menu li.hover ul li.hover ul li ul,
    #menu li:hover ul li:hover ul li ul,
    #menu li.hover ul li.hover ul li.hover ul li ul,
    #menu li:hover ul li:hover ul li:hover ul li ul,
    #menu li.hover ul li.hover ul li.hover ul li.hover ul li ul,
    #menu li:hover ul li:hover ul li:hover ul li:hover ul li ul,
    #menu li.hover ul li.hover ul li.hover ul li.hover ul li.hover ul li ul,
    #menu li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul li ul {
    	top:-1px;
    	left:-999em;
    }
    #menu li.hover ul li.hover ul,
    #menu li:hover ul li:hover ul,
    #menu li.hover ul li.hover ul li.hover ul,
    #menu li:hover ul li:hover ul li:hover ul,
    #menu li.hover ul li.hover ul li.hover ul li.hover ul,
    #menu li:hover ul li:hover ul li:hover ul li:hover ul,
    #menu li.hover ul li.hover ul li.hover ul li.hover ul li.hover ul,
    #menu li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul,
    #menu li.hover ul li.hover ul li.hover ul li.hover ul li.hover ul li.hover ul,
    #menu li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {
    	left:200px;
    }
    #menu li.hover ul li a,
    #menu li:hover ul li a,
    #menu li ul li a {
    	display:block;
    	float:none;
    	width:200px;
    	width/**/:/**/190px;
    	border-top:0;
    	padding:0 5px;
    	margin:0;
    	text-decoration:none;
    }
    #menu li.hover ul li a:hover,
    #menu li:hover ul li a:hover,
    #menu li ul li a:hover,
    #menu li ul li a:focus {
    	padding:0 5px;
    	margin:0;
    	text-decoration:none;
    }
    /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    	Content
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
    #featured {
    	width:100%;
    	margin: 0 0 10px6px;
    }
    #featured div {
    	position:relative;
    }
    #featured h2 {
    	margin-bottom: 10px;
    	font-size: 2.5em;
    	font-weight:normal;
    	line-height:1.1;
    	padding: 10px 25px 0;
    }
    #featured a:hover,
    #featured a:focus {
    	text-decoration: none;
    }
    #featured p {
    	padding: 0 25px 5px;
    }
    .more {
    	display:block;
    	padding:0 0 0 8px;
    	width:91px;
    	height:19px;
    	font-size:.92em;
    	font-weight:bold;
    	line-height:1.72;
    	cursor:pointer;
    }
    #featured .more {
    	margin: 10px 0 20px 25px;
    }
    #content #featured .more:hover {
    	text-decoration: underline;
    }
    #wrap .apost {
    	margin:0 0 16px;
    	clear:both;
    	width:100%;
    }
    .home #wrap .apost {
    	margin:0 20px 16px;
    	height:1%;
    	width:auto;
    }
    #wrap .apost .head {
    	padding:10px 15px;
    }
    #wrap .apost h1,
    #wrap .apost h2 {
    	font-size:1.5em;
    	line-height:1.25;
    	font-weight:normal;
    }
    #wrap .apost h3 {
    	margin-top: 10px;
    	font-size:1.5em;
    	line-height:1.25;
    }
    #wrap .apost h4 {
    	font-size:1.17em;
    	line-height:1.25;
    	margin:5px 0;
    }
    #wrap .apost h5 {
    	font-size:1.15em;
    	line-height:1.47;
    }
    #wrap .apost h6 {
    	font-size:1.08em;
    	line-height:1.5;
    }
    #wrap .apost .content {
    	clear:both;
    	padding:12px 15px;
    	height:1%;
            font-family:"arial";
            font-size:10pt;
    }
    #wrap .apost p,
    #wrap .apost blockquote {
    	padding-left: 0;
    	padding-bottom: 15px;
    	padding-right: 0;
    	padding-top: 8px;
    	text-align:justify;
    }
    #wrap .apost a:hover {
    	text-decoration: underline;
    	text-align:justify;
    }
    #wrap .apost blockquote {
    	padding:2px 15px;
    	margin:5px 20px;
    }
    #wrap .apost ul {
    	padding:10px 20px;
    }
    #wrap .apost ol {
    	list-style-type:decimal;
    	list-style-position:inside;
    	padding:10px 20px;
    	margin:0 0 0 18px;
    }
    #wrap .apost a.more-link {
    	font-style:italic;
    }
    #wrap .apost a.download {
    	display:block;
    	width:262px;
    	width/**/:/**/232px;
    	padding:8px 15px 10px;
    	margin:10px 0 15px;
    	cursor:pointer;
    }
    #wrap .apost a.download:hover,
    #wrap .apost a.download:focus {
    	background-position:96% 50%;
    	text-decoration:none;
    }
    #wrap .apost a.download span {
    	font-size:1.5em;
    	display:block;
    }
    #wrap .apost ul li {
    	padding:0 0 0 16px;
    	margin:0 0 5px 20px;
    }
    #wrap .apost ol li {
    	margin:0 0 5px;
    }
    #wrap .apost .foot {
    	font:bold 1.17em/1.5 "trebuchet ms",sans-serif,arial;
    	overflow:hidden;
    	clear:both;
    	margin:0;
    	padding:13px 15px;
    	height:1%;
    	list-style:none outside;
    }
    #wrap .apost .foot a {
    	font-weight:normal;
    }
    #wrap .apost .foot li {
    	margin:0;
    	padding:0;
    	float:left;
    	background:none;
    }
    #wrap .apost .foot .first {
    	padding:0 0 0 22px;
    	margin:0 35px 0 0;
    }
    #wrap .apost .foot .first a {
    	font-weight:bold;
    }
    #wrap .lead {
    	clear:both;
    	font-weight:bold;
    	margin:8px 0 0;
    	width:100%;
    }
    #wrap .lead a:hover,
    #wrap .lead a:focus {
    	text-decoration:underline;
    }
    #wrap .lead .prev {
    	float:left;
    }
    #wrap .lead .next {
    	float:right;
    }
    #wrap .banner {
    	text-align:center;
    	padding:10px 0;
    	margin:0 0 16px;
    }
    /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    	Sidebar(s)
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
    .sidebars a:hover,
    .sidebars a:focus {
    	text-decoration:underline;
    }
    .columns {
    	clear:both;
    	margin:0 0 16px;
    	padding:0 0 7px;
    	width:100%;
    }
    .columns h2 {
    	font-size:2em;
    	padding:10px 20px;
    }
    .columns .inner {
    	padding:0 7px;
    }
    .columns ul {
    	margin:0 23px;
    	padding:0 0 10px;
    }
    .columns ul li {
    	margin:0 0 10px;
    	padding:0 0 0 16px;
    }
    .columns p {
    	padding:5px 0;
    }
    .columns ul ul {
    	margin:5px;
    }
    .columns .continue {
    	font-size:1.5em;
    	display:block;
    	width:254px;
    	width/**/:/**/230px;
    	padding:6px 12px;
    	margin:0 7px;
    	cursor:pointer;
    }
    .columns .continue:hover,
    .columns .continue:focus {
    	background-position:97% 50%;
    	text-decoration:none;
    }
    .sidebars .ads .inner {
    	padding:0 0 0 7px;
    }
    .sidebars .ads ul {
    	margin:0 0 5px;
    	padding:0;
    }
    .sidebars .ads ul li {
    	float:left;
    	width:130px;
    	height:130px;
    	margin:0;
    	padding:0;
    	background:none;
    }
    .sidebars .ads ul li a {
    	float:left;
    }
    .sidebars .news {
    	padding:0;
    }
    .sidebars .news .rMore {
    	font-weight: bold;
    	padding:0;
    }
    .sidebars .news .inner {
    	padding:0 20px;
    }
    .sidebars .news ul {
    	margin:0;
    	padding:0;
    	width:100%;
    }
    .sidebars .news ul li {
    	margin:0;
    	padding:0 0 20px;
    	width:100%;
    	float:left;
    	clear:both;
    	display:inline;
    	background:none;
    }
    .sidebars .news ul li .thumb {
    	float:left;
    	margin:5px 0 0;
    	width:60px;
    	height:60px;
    	overflow:hidden;
    }
    .sidebars .news ul li .thumb div {
    	z-index:11;
    	position:relative;
    }
    .sidebars .news ul li .thumb img {
    	position:absolute;
    	left:0;
    	top:0;
    	z-index:6;
    }
    .sidebars .news ul li .entry {
    	font-style: normal;
    	font-weight: normal;
    	font-size: 11px;
    	float:right;
    	width:290px;
    }
    .sidebars .news ul li .info {
    	color: black;
    
    }
    .sidebars .news ul li h3 {
    	line-height: 1.5em;
    	font-size: 1.25em;
    }
    .sidebars .news ul li p {
    	padding:0 0 5px;
    	line-height:1.2;
    }
    /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    	Comment
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
    #commentBox {
    	position:relative;
    	height:1%;
    	padding:15px 15px 5px;
    }
    #commentform {
    	padding:10px 0;
    	overflow:hidden;
    	width:100%;
    }
    #commentform p {
    	padding:0 0 10px;
    }
    #commentform .changeAva {
    	float:right;
    	text-align:center;
    	width:220px;
    	width/**/:/**/200px;
    	padding:8px 10px;
    	font-size:.92em;
    }
    #commentform .changeAva h4 {
    	font-size:1.09em;
    	margin:0 0 3px;
    }
    #commentform .changeAva span {
    	display:block;
    }
    #commentform input,
    #commentform textarea {
    	padding:4px 3px 0;
    }
    #commentform #author,
    #commentform #email,
    #commentform #url,
    #commentform #comment {
    	display:block;
    	font-size:1em;
    	border:none;
    	font-family:"trebuchet ms",arial,sans-serif;
    	width:254px;
    	width/**/:/**/250px;
    	height:24px;
    	height/**/:/**/20px;
    }
    #commentform textarea#comment {
    	width:619px;
    	min-height:100px;
    	border-width:1px;
    	margin:0 0 10px;
    	padding:4px 3px;
    }
    * html #commentform textarea#comment {
    	height:100px;
    }
    #commentform input#submit { width:10em; padding:5px 0; margin:-10px 0 0; font:bold 1em "Trebuchet MS", arial, sans-serif; text-transform:uppercase; float:left; border-style: none; cursor:pointer; }
    .commentlist {
    	list-style:none outside;
    	width:100%;
    }
    .commentlist li {
    	margin:0 0 10px;
    	padding:0 0 10px;
    	width:100%;
    	float:left;
    	display:inline;
    	clear:both;
    }
    .commentlist li div.avatar {
    	float:left;
    	width:75px;
    	font:0/0 serif;
    	position:relative;
    }
    .commentlist li div.avatar img {
    	margin:0!important;
    	display:block!important;
    }
    .commentlist li .content {
    	float:left;
    	width:550px;
    }
    .commentlist li .content .info {
    	font-size:1.08em;
    	padding:0 0 5px;
    }
    .commentlist li .content .info .author {
    	font-weight:bold;
    }
    .commentlist li .content .info .author img {
    	display:none!important;
    }
    .commentlist li p {
    	padding:0 0 10px;
    	clear:both;
    	text-align:justify;
    }
    .commentlist .commentTip {
    	position:absolute;
    	left:0;
    	top:0;
    	z-index:1;
    	padding:5px 10px;
    }
    .commentlist .reply {
    	float:right;
    	font-size:.92em;
    	margin:-10px 0 0;
    }
    .commentlist .commentTip .reply {
    	display:none;
    }
    h3#respond,
    h3#comments {
    	font-size:1.33em;
    	line-height:1.38;
    }
    /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    	Extra
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
    #extra {
    	width:978px;
    	width/**/:/**/918px;
    	overflow:hidden;
    	padding:20px 30px;
    	margin:0 auto;
    	text-align:left;
    	font-size:1.2em;
    }
    .home #extra {
    	width:978px;
    	padding:0;
    	background:none;
    }
    #extra .box { height: 215px; float:left; }
    #extra .box-1 {
    	width:140px;
    	margin:0 10px 0 0;
    }
    #extra .box-2 {
    	width:180px;
    	margin:0 10px 0 0;
    }
    #extra .box-3 {
    	width:578px;
    }
    .home #extra .box {
    	width:315px;
    	width/**/:/**/279px;
    	margin:0;
    	padding:12px 18px 20px;
    }
    .home #extra .box-2 {
    	margin:0 16px;
    }
    .home #extra .box-3 {
    	float:right;
    }
    #extra h2 {
    	font-size:1.5em;
    	margin:0 0 8px;
    }
    #extra p {
    	padding:0 0 10px;
    }
    #extra ul {
    	padding:0 0 15px;
    }
    .alignright { float: right; margin-left: 10px; }
    caption { float: right; }
    .aligncenter { margin-right: auto; margin-left: auto; }
    .alignleft { float: left; margin-right: 10px; }
    #featured {
    	width:100%;
    	margin:0 0 16px;
    }
    hr {
    	margin-top: 10px;
    	margin-bottom: 10px;
    	border-top-color: #d8d8d8;
    	border-top-style: solid;
    	border-left-width: 0px;
    	border-bottom-width: 0px;
    	border-right-width: 0px;
    	border-top-width: 1px;
    }
     
  2. j.earnshaw macrumors newbie

    Joined:
    Apr 19, 2009
    #2
    if memory serves try adding...

    background-color: //your colour;

    ...within the #page container for the main background.

    then try....

    color: //your colour;

    in the #menu li section.


    If neither of these work then just try cutting pasting the lines into the different sections until the one you need becomes the correct colour.

    Hope this helps.
     
  3. design-is macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #3
    That should do the trick :)

    Let us know how you get on!
     

Share This Page