• Locked
No replies
Sat, 2013-06-15 17:30
gaffnere
gaffnere's picture
Offline
newbie
Last seen: 9 years 40 weeks ago
Timezone: GMT+1
Joined: 2013-06-15
Posts: 3
Points: 5

Hi there.

Hoping someone can please help me...

I am using the premium Wordpress theme 'Disillusion > Responsive One Page WordPress Theme'.
Installed here.

I want the background of the tabs in the nav to each be a different colour while active.
And I want the text in each tab to change to that same colour upon hover.

home = #3FA9F5
about = #7AC943
news = #FF7BAC
locations = #FF243F
contact = #FF931E

When not selected or hover, I want the background of each tab to be #FFFFFF and the text to be #000000.

I have tried all of the code below for each of the five tabs (gotten from Firebug)... to no success.

There is a choice in the wordpress back-end to pick a "secondary colour" for the site. This colour, by default, is the colour for the background of the active navigation tab, as well as being the colour the text in the tabs turn when hovered over. It is currently set to #FFFFFFF. I don't really know how to override it.

#navigation li#menu-item-1216
.navbar .nav > li > a:hover:before, .navbar .nav > li.active > a:before, .navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus, {
    background: none repeat scroll 0 0 #3FA9F5 !important;
}
 
#navigation li#menu-item-1216 {
 background-color: #ffffff;
}
#navigation li#menu-item-1216 
a:hover { 
background-color: #3FA9F5;
}
#navigation li#menu-item-1216
a:active { 
background-color: #3FA9F5;
}
 
#navigation li#menu-item-1216
.navbar .nav > li > a:hover:before, .navbar .nav > li.active > a:before, .navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus, .navbar .nav li.dropdown.active > .dropdown-toggle, .portfolio-item-detail a.close:hover, .blog-item-detail a.close:hover, .client-testimonials .client:hover:before, .bx-controls-direction a, .slideshow-left-nav a, .flex-direction-nav a, .contact-form button:hover, #commentform #submit:hover, .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .btn-solid, .btn-solid:hover, .btn-solid:link, .btn-solid:visited, .btn-solid:active {
    background: none repeat scroll 0 0 #3FA9F5;
}
 
#navigation li#menu-item-1216
.navbar .nav > li > a:before {
    background: none repeat scroll 0 0 transparent;
    content: "";
    height: 24px;
    left: 50%;
    margin-left: -1px;
    position: absolute;
    top: 14px;
    width: 2px;
}
 
#navigation li#menu-item-1216
.navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus, .navbar .nav li.dropdown.active > .dropdown-toggle {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    box-shadow: none;
    color: #FFFFFF;
    text-shadow: none;
}
 
#navigation li#menu-item-1216
.text-color, a.link-big:hover, .navbar .nav > li > a:hover, .navbar .nav li.dropdown.open > .dropdown-toggle, .navbar .nav li.dropdown.open.active > .dropdown-toggle, .portfolio-image:after, .blog-post h3 a:hover, footer .tweet_list .tweet_text a, .nav-pills > li > a:hover, .accordion-heading a, .home-header .link:hover {
    color: #3FA9F5;
}

Sorry this is probably easy but I can't figure it out. Would love some advice! Thanks.

//mod edit: See http://csscreator.com/topic/individual-colours-tabs-background-text-active-hover-0 ~gt

Top
Tags: