Can't Change Color of Navigation Bar Using Serenity Theme

[sylvia browder]

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 {
border-top: 0;
}

http://mallyssalon.com/

[AnitaC]

Each 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;
}

---

Need help with customization or troubleshooting? Reach out to me.

[sylvia browder]

Thanks 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
--- #footer

I am not sure what the 'image code' is since obviously all nav bars.

Sylvia

[AmyMccTobin]

Here 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/

[Author]

Posts