Forums

easy color change on stylesheet question (2 posts)

  1. SpyGolfer
    Member
    Posted 2 years ago #

    Im using a wordpress ubd citrus 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.

    /*
    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;
    }
  2. Christian Schenk
    Member
    Posted 2 years ago #

    change the main background color

    The light blue? In your theme's folder there's an additional stylesheet under "css/tangerine.css". Search for "background: #B8D3F6 ..." and replace it with just "background-color: #ff0000" if red is what you want.

    change the color of my menu links

    That's inside "tangerine.css" as well. Search for ".sidebars a" and change the value after "color".

Topic Closed

This topic has been closed to new replies.

About this Topic