PDA

View Full Version : easy question about how to change color in a stylesheet. Please help




Rob587
Jun 27, 2009, 04:12 PM
Im using a wordpress theme at spygolfer.com (http://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

/*
Theme Name: Citrus Theme
Description: A Premium WordPress theme by Unique Blog Designs.
Author: Unique Blog Designs
Author URI: http://www.uniqueblogdesigns.com
*/
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
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;
}



j.earnshaw
Jun 29, 2009, 05:23 AM
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.

design-is
Jun 29, 2009, 06:14 AM
That should do the trick :)

Let us know how you get on!