Elsbells
08-08-2011, 09:09 AM
Hi, I am building a website using a template but want to override some css to change the colour of the navigation bar from black to white and the writing from white to black (or another colour). Below is my css. Is there anyone out there who can help me?? Id be extremely grateful!
Thanks!
body {
background-color:#C6E6F9;
background-repeat:repeat-x;
background-position:top left;
background-attachment:;
text-align:center;
margin:0;
padding:20px 0 20px 0;
font-family:Arial,Helvetica,sans-serif;
font-size:13px;
}
div.layout {
width:950px;
margin:0 auto;
text-align:left;
}
div.layout div.top {
background:url(http://s1.yolacdn.net/V0021930/template_resources/0/Gerrard/resources/glass-top.png) top left no-repeat;
_behavior: url(http://s3.yolacdn.net/V0021930/template_resources/0/Gerrard/resources/iepngfix.htc);
height:45px;
font-size:0;
}
div.layout div.middle {
background:url(http://s3.yolacdn.net/V0021930/template_resources/0/Gerrard/resources/glass-middle.png) top left repeat-y;
_behavior: url(http://s3.yolacdn.net/V0021930/template_resources/0/Gerrard/resources/iepngfix.htc);
width:100%;
}
div.layout div.bottom {
background:url(http://s2.yolacdn.net/V0021930/template_resources/0/Gerrard/resources/glass-bottom.png) top left no-repeat;
_behavior: url(http://s3.yolacdn.net/V0021930/template_resources/0/Gerrard/resources/iepngfix.htc);
height:45px;
font-size:0;
}
div.layout div#sys_banner {
background: url(resources/Fotolia_18334854_M.jpg.cropped860x170o-481%2C-665s1327x1326.jpg) top left no-repeat;
margin:0 10px 0 10px;
}
div.layout div#sys_banner div.shadow {
background:url(http://s1.yolacdn.net/V0021930/template_resources/0/Gerrard/resources/banner-shadow.png) top left no-repeat;
_behavior: url(http://s3.yolacdn.net/V0021930/template_resources/0/Gerrard/resources/iepngfix.htc);
width:860px;
height:170px;
padding:1px 0 0 0;
voice-family: "\"
}
\"";
voice-family:inherit;
height:169px;
}
div.layout div#sys_banner h1 {
margin:60px 0 0 40px;
font-size:32px;
}
div.layout div#sys_banner h1 a {
color:#fff;
padding:0 15px;
margin:0;
text-decoration:none;
}
div.layout div.content {
background:#fff;
margin:0 35px;
}
div.sys_navigation {
margin:0 10px;
}
div.ys_nav {
background:#111 url(http://s1.yolacdn.net/V0021930/template_resources/0/Gerrard_Wide/resources/menu-background.png) bottom left no-repeat;
}
div.ys_with_secondary {
background:#111 url(http://s1.yolacdn.net/V0021930/template_resources/0/Gerrard_Wide/resources/menu-background.png) top left no-repeat;
}
div.ys_nav_wrap {
background:url(http://s2.yolacdn.net/V0021930/template_resources/0/Gerrard_Wide/resources/menu-shadow.png) top left repeat-x;
_behavior: url(http://s2.yolacdn.net/V0021930/template_resources/0/Gerrard_Wide/resources/iepngfix.htc);
padding:0 0 0 0;
}
div.ys_nav div.ys_clear {
clear:both;
font-size:0;
height:1px;
}
div.ys_nav ul {
list-style:none;
margin:0;
list-style:none;
margin:0;
width:860px;
padding:4px 10px 0 10px;
voice-family: "\"
}
\"";
voice-family:inherit;
width:840px;
}
div.ys_nav ul li {
display:inline;
}
div.ys_nav ul li a {
color:#fff;
display:inline-block;
padding:6px 11px 9px 11px;
text-decoration:none;
}
div.ys_nav ul li a:hover {
text-decoration:underline;
color:#fff;
}
div.ys_nav ul li.selected a {
font-weight:bold;
}
div.ys_with_secondary ul li.selected a {
font-weight:bold;
background:#555;
padding:6px 14px 9px 14px;
-moz-border-radius:5px 5px 0 0;
-webkit-border-radius:5px 5px 0 0;
-khtml-border-radius:5px 5px 0 0;
-o-border-radius:5px 5px 0 0;
border-radius:5px 5px 0 0;
}
div.ys_secondary_nav {
background:#555;
background:#555 -webkit-gradient(linear, center top, center bottom, from(#555), to(#444));
background:#555 -moz-linear-gradient(center top, #555 0%, #444 60%);
-moz-border-radius:0 0 5px 5px;
-webkit-border-radius:0 0 5px 5px;
-khtml-border-radius:0 0 5px 5px;
-o-border-radius:0 0 5px 5px;
border-radius:0 0 5px 5px;
}
div.ys_secondary_nav ul {
margin:0;
width:860px;
padding:0 10px;
voice-family: "\"
}
\"";
voice-family:inherit;
width:840px;
list-style:none;
}
div.ys_secondary_nav ul li {
display:inline;
}
div.ys_secondary_nav ul li a {
color:#ddd;
display:inline-block;
padding:8px 11px 8px 11px;
text-decoration:none;
}
div.ys_secondary_nav ul li.selected a {
color:#fff;
font-weight:bold;
}
div#content {
margin:10px 10px 0 10px;
}
/* Variables - only edit these */
body {
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
color:#222;
}
a {
color:#0062b5;
text-decoration:underline;
}
a:hover {
text-decoration:none;
color:#0062b5
}
a img {
border:none;
}
p {
margin: 0;
padding: 5px 0;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
color: #333333;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
color: #333333;
}
h1, h2, h3, h4, h5, h6 {
color: #333333;
margin: 5px 0;
padding: 10px 0;
}
h1 {
font-size: 200%;
}
h2 {
font-size: 180%;
}
h3 {
font-size: 160%;
}
h4 {
font-size: 140%;
}
h5 {
font-size: 130%;
}
h6 {
font-size: 100%;
}
Thanks!
body {
background-color:#C6E6F9;
background-repeat:repeat-x;
background-position:top left;
background-attachment:;
text-align:center;
margin:0;
padding:20px 0 20px 0;
font-family:Arial,Helvetica,sans-serif;
font-size:13px;
}
div.layout {
width:950px;
margin:0 auto;
text-align:left;
}
div.layout div.top {
background:url(http://s1.yolacdn.net/V0021930/template_resources/0/Gerrard/resources/glass-top.png) top left no-repeat;
_behavior: url(http://s3.yolacdn.net/V0021930/template_resources/0/Gerrard/resources/iepngfix.htc);
height:45px;
font-size:0;
}
div.layout div.middle {
background:url(http://s3.yolacdn.net/V0021930/template_resources/0/Gerrard/resources/glass-middle.png) top left repeat-y;
_behavior: url(http://s3.yolacdn.net/V0021930/template_resources/0/Gerrard/resources/iepngfix.htc);
width:100%;
}
div.layout div.bottom {
background:url(http://s2.yolacdn.net/V0021930/template_resources/0/Gerrard/resources/glass-bottom.png) top left no-repeat;
_behavior: url(http://s3.yolacdn.net/V0021930/template_resources/0/Gerrard/resources/iepngfix.htc);
height:45px;
font-size:0;
}
div.layout div#sys_banner {
background: url(resources/Fotolia_18334854_M.jpg.cropped860x170o-481%2C-665s1327x1326.jpg) top left no-repeat;
margin:0 10px 0 10px;
}
div.layout div#sys_banner div.shadow {
background:url(http://s1.yolacdn.net/V0021930/template_resources/0/Gerrard/resources/banner-shadow.png) top left no-repeat;
_behavior: url(http://s3.yolacdn.net/V0021930/template_resources/0/Gerrard/resources/iepngfix.htc);
width:860px;
height:170px;
padding:1px 0 0 0;
voice-family: "\"
}
\"";
voice-family:inherit;
height:169px;
}
div.layout div#sys_banner h1 {
margin:60px 0 0 40px;
font-size:32px;
}
div.layout div#sys_banner h1 a {
color:#fff;
padding:0 15px;
margin:0;
text-decoration:none;
}
div.layout div.content {
background:#fff;
margin:0 35px;
}
div.sys_navigation {
margin:0 10px;
}
div.ys_nav {
background:#111 url(http://s1.yolacdn.net/V0021930/template_resources/0/Gerrard_Wide/resources/menu-background.png) bottom left no-repeat;
}
div.ys_with_secondary {
background:#111 url(http://s1.yolacdn.net/V0021930/template_resources/0/Gerrard_Wide/resources/menu-background.png) top left no-repeat;
}
div.ys_nav_wrap {
background:url(http://s2.yolacdn.net/V0021930/template_resources/0/Gerrard_Wide/resources/menu-shadow.png) top left repeat-x;
_behavior: url(http://s2.yolacdn.net/V0021930/template_resources/0/Gerrard_Wide/resources/iepngfix.htc);
padding:0 0 0 0;
}
div.ys_nav div.ys_clear {
clear:both;
font-size:0;
height:1px;
}
div.ys_nav ul {
list-style:none;
margin:0;
list-style:none;
margin:0;
width:860px;
padding:4px 10px 0 10px;
voice-family: "\"
}
\"";
voice-family:inherit;
width:840px;
}
div.ys_nav ul li {
display:inline;
}
div.ys_nav ul li a {
color:#fff;
display:inline-block;
padding:6px 11px 9px 11px;
text-decoration:none;
}
div.ys_nav ul li a:hover {
text-decoration:underline;
color:#fff;
}
div.ys_nav ul li.selected a {
font-weight:bold;
}
div.ys_with_secondary ul li.selected a {
font-weight:bold;
background:#555;
padding:6px 14px 9px 14px;
-moz-border-radius:5px 5px 0 0;
-webkit-border-radius:5px 5px 0 0;
-khtml-border-radius:5px 5px 0 0;
-o-border-radius:5px 5px 0 0;
border-radius:5px 5px 0 0;
}
div.ys_secondary_nav {
background:#555;
background:#555 -webkit-gradient(linear, center top, center bottom, from(#555), to(#444));
background:#555 -moz-linear-gradient(center top, #555 0%, #444 60%);
-moz-border-radius:0 0 5px 5px;
-webkit-border-radius:0 0 5px 5px;
-khtml-border-radius:0 0 5px 5px;
-o-border-radius:0 0 5px 5px;
border-radius:0 0 5px 5px;
}
div.ys_secondary_nav ul {
margin:0;
width:860px;
padding:0 10px;
voice-family: "\"
}
\"";
voice-family:inherit;
width:840px;
list-style:none;
}
div.ys_secondary_nav ul li {
display:inline;
}
div.ys_secondary_nav ul li a {
color:#ddd;
display:inline-block;
padding:8px 11px 8px 11px;
text-decoration:none;
}
div.ys_secondary_nav ul li.selected a {
color:#fff;
font-weight:bold;
}
div#content {
margin:10px 10px 0 10px;
}
/* Variables - only edit these */
body {
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
color:#222;
}
a {
color:#0062b5;
text-decoration:underline;
}
a:hover {
text-decoration:none;
color:#0062b5
}
a img {
border:none;
}
p {
margin: 0;
padding: 5px 0;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
color: #333333;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
color: #333333;
}
h1, h2, h3, h4, h5, h6 {
color: #333333;
margin: 5px 0;
padding: 10px 0;
}
h1 {
font-size: 200%;
}
h2 {
font-size: 180%;
}
h3 {
font-size: 160%;
}
h4 {
font-size: 140%;
}
h5 {
font-size: 130%;
}
h6 {
font-size: 100%;
}