Community Forums › Forums › Archived Forums › Design Tips and Tricks › Can't Change Color of Navigation Bar Using Serenity Theme
Tagged: navigation, subnav
- This topic has 3 replies, 3 voices, and was last updated 10 years, 7 months ago by AmyMccTobin.
-
AuthorPosts
-
August 4, 2013 at 10:45 am #54124sylvia browderMember
Hello All,
I am lost and hope you can help. I am designing a site for a client and using 'SERENITY' theme. The site is http://mallyssalon.com/. I can't seem to change the color of the top and bottom navigation bar. The color as you can see is green and I am trying to change it to blue. I did go into CSS and changed the color code to no avail. I contacted copyblogger support and was told to remove the image from the css, url(images/subnav.png). I did so (I think) but the navigation bars are still green. Please help!This is what I have:
/***** Nav Menu ********************/#nav {
clear: both;
background: url(images/nav.png);
width: 960px;
height: 40px;
color: #0D96E6;
font-weight: bold;
margin: 0 auto 0;
padding: 0;
}#nav .wrap {
width: 940px;
height: 40px;
background: #FFFFFF;
margin: 0 auto 0;
padding: 0;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-khtml-border-radius: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 0;
}#nav ul {
width: 930px;
float: left;
list-style: none;
margin: 0;
padding: 0 0 0 10px;
}#nav li {
float: left;
list-style: none;
margin: 0;
padding: 0;
}#nav li a {
color: #e4147c;
display: block;
font-size: 12px;
font-weight: bold;
margin: 0 10px 0 0;
padding: 10px;
text-decoration: none;
position: relative;
}#nav li a:hover, #nav li a:active, #nav .current_page_item a {
color: #0D96E6;
}#nav li a.sf-with-ul {
padding-right: 20px;
}#nav li a .sf-sub-indicator {
background: url(images/arrow-down.png);
display: block;
width: 10px;
height: 10px;
text-indent: -9999px;
overflow: hidden;
position: absolute;
top: 17px;
right: 5px;
}#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #FFFFFF;
color: #e4147c;
width: 148px;
font-size: 11px;
margin: 0 0 0 -1px;
padding: 6px 10px 6px 10px;
border-left: 1px solid #A5D448;
border-right: 1px solid #A5D448;
border-bottom: 1px solid #A5D448;
position: relative;
}#nav li li a:hover, #nav li li a:active {
background: #EEEEEE;
color: #0D96E6;
}#nav li li a .sf-sub-indicator {
background: url(images/arrow-right.png);
top: 10px;
}#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}#nav li ul a {
width: 150px;
}#nav li ul a:hover, #nav li ul a:active {
}#nav li ul ul {
margin: -33px 0 0 169px;
}#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfHover ul ul, #nav li.sfHover ul ul ul {
left: -999em;
}#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfHover ul, #nav li li.sfHover ul, #nav li li li.sfHover ul {
left: auto;
}#nav li:hover, #nav li.sfHover {
position: static;
}#nav li.right {
float: right;
margin: 0 15px 0 0;
padding: 10px 10px 0 0;
}#nav li.right a {
display: inline;
margin: 0;
padding: 0;
border: none;
background: none;
color: #7BA520;
font-weight: bold;
text-decoration: none;
}#nav li.right a:hover {
color: #0D96E6;
text-decoration: none;
}#nav li.date {
padding: 10px 10px 0 0;
}#nav li.rss a {
background: url(images/rss.png) no-repeat left center;
margin: 0 0 0 10px;
padding: 3px 0 3px 16px;
}#nav li.search {
padding: 3px 0 0 10px;
}#nav li.twitter a {
background: url(images/twitter-nav.png) no-repeat left center;
padding: 3px 0 1px 20px;
}/***** SubNav Menu ********************/
#subnav {
clear: both;
width: 960px;height: 35px;
color: #E4147C;
margin: 0 auto 0;
padding: 0;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-khtml-border-radius: 10px;
-webkit-border-top-left-radius: 0;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
}#subnav ul {
width: 100%;
float: left;
list-style: none;
margin: 0;
padding: 0 0 0 10px;
}#subnav li {
float: left;
list-style: none;
margin: 0;
padding: 0;
}#subnav li a {
color: #E4147C;
display: block;
font-size: 12px;
margin: 0;
padding: 7px 10px 8px 10px;
text-decoration: none;
text-shadow: #607E18 1px 1px;
position: relative;
}
#subnav li a:hover, #subnav li a:active, #subnav .current_page_item a, #subnav .current-cat a {
background:
color: #e4147c;
text-shadow: #055669 1px 1px;
}#subnav li a.sf-with-ul {
padding-right: 20px;
}#subnav li a .sf-sub-indicator {
background: url(images/arrow-down.png);
display: block;
width: 10px;
height: 10px;
text-indent: -9999px;
overflow: hidden;
position: absolute;
top: 13px;
right: 5px;
}#subnav li li a, #subnav li li a:link, #subnav li li a:visited {
background: #0A9FC9;
color: #FFFFFF;
text-shadow: #055669 1px 1px;
width: 158px;
font-size: 11px;
margin: 0;
padding: 6px 10px 6px 10px;
border-left: 1px solid #59CFF4;
border-right: 1px solid #59CFF4;
border-bottom: 1px solid #59CFF4;
position: relative;
}#subnav li li a:hover, #subnav li li a:active {
background: #E4147C;
color: #FFFFFF;
text-shadow: #607E18 1px 1px;
}#subnav li li a .sf-sub-indicator {
background: url(images/arrow-right.png);
top: 10px;
}#subnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 180px;
margin: 0;
padding: 0;
}#subnav li ul a {
width: 160px;
}#subnav li ul a:hover, #subnav li ul a:active {
}#subnav li ul ul {
margin: -33px 0 0 179px;
}#subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfHover ul ul, #subnav li.sfHover ul ul ul {
left: -999em;
}#subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul, #subnav li.sfHover ul, #subnav li li.sfHover ul, #subnav li li li.sfHover ul {
left: auto;
}#subnav li:hover, #subnav li.sfHover {
position: static;
}/***** Inner ********************/
#inner {
background: #FFFFFF;
width: 880px;
margin: 0 auto 0;
padding: 20px 20px 5px 20px;
overflow: hidden;
border-top: 10px solid #EEEEEE;
border-left: 10px solid #EEEEEE;
border-right: 10px solid #EEEEEE;
border-bottom: 5px solid #EEEEEE;
}.home #inner {
http://mallyssalon.com/
border-top: 0;
}August 4, 2013 at 11:51 am #54139AnitaKeymasterEach element has it's own PNG. So for the left side there is a PNG here. Remove the image code and change the #EEEEEE.
#content #slider h4, #content #featured-bottom h4, #content #featured-top h4 { background: url("images/widget-header.png") repeat scroll 0 0 #EEEEEE; color: #FFFFFF; font-family: Trebuchet MS,Arial,Verdana; font-size: 12px; font-weight: normal; margin: 0; padding: 4px 5px 4px 10px; text-shadow: 1px 1px #055669; }
Then look for this. Remove the image code, and change the #EEEEEE.
#sidebar h4, #sidebar-alt h4 { background: url("images/widget-header.png") repeat scroll 0 0 #EEEEEE; color: #FFFFFF; font-family: Trebuchet MS,Arial,Verdana; font-size: 12px; font-weight: normal; margin: 0; padding: 4px 5px 4px 10px; text-shadow: 1px 1px #055669; }
To change the color of the footer area, look for this and change the #00B3D5.
#footer-widgeted { background: none repeat scroll 0 0 #00B3D5; color: #FFFFFF; font-size: 11px; margin: 0 auto 10px; overflow: hidden; padding: 0; width: 940px; }
If you want to change out the green above the footer, look for this. Remove the image and change the word transparent to an actual color code.
#footer { background: url("images/footer.png") repeat scroll 0 0 transparent; clear: both; color: #FFFFFF; height: 40px; margin: 0 auto; padding: 0; text-shadow: 1px 1px #607E18; width: 960px; }
Love coffee, chocolate and my Bella!
August 6, 2013 at 10:29 am #54387sylvia browderMemberThanks so much for your assistance. I made the changes as you suggested, but something went wrong. I actually lost the green bar, its gone. When you say remove the image code, are you referring to ("images/footer.png"). I removed ("images/footer.png") from each of the following:
--- #content #slider h4,
--- #sidebar h4, #sidebar-alt h4
--- #footerI am not sure what the 'image code' is since obviously all nav bars.
Sylvia
September 12, 2013 at 12:56 pm #62130AmyMccTobinMemberHere is the answer to all of the customizing. To get that bar back you may have to reload the theme via ftp. http://uploadwp.com/serenity-theme-tutorial-4-theme-customization/
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.