TabView Colours

Posted by GoVegan on 16 Aug 2009 14:31, last edited by GoVegan on 14 Nov 2010 09:35

Tags: color css tabview

Description

The TabView is a useful User Interface tool. It's colours can be customised by changing any of the colours below in your CSS code:

.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
    border-color:#FF47a0; /* color between tab list and content */
}
 
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
    background-color:#d8d8d8; /* tab background */
    border-color:#FFa3a3;
    color:#000;
}
 
.yui-navset .yui-nav a em,
.yui-navset .yui-navset-top .yui-nav a em {
    border-color: #FFa3a3;
}
 
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a:hover {
    background-image: none;
    background-color:#FF47a0; /* selected tab background */
    color:#fff;
}
 
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
    background-color: #FFdaff; /* selected tab background */
}
 
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a em {
    border-color: #FF3356; /* selected tab border color */
}
 
.yui-navset .yui-content {
    background-color: #FFf5ff; /* content background color */
}
 
.yui-navset .yui-content,
.yui-navset .yui-navset-top .yui-content {
    border-color: #FF8080; /* content border */
    border-top-color:#FF3356; /* different border color */
}
 
.yui-navset-left .yui-content {
    border-color: #FF8080; /* content border */
    border-left-color: #FF3356; /* different border color */
}
 
.yui-navset-bottom .yui-content,
.yui-navset .yui-navset-bottom .yui-content {
    border-color: #FF8080; /* content border */
    border-bottom-color: #FF3356; /* different border color */
}

First

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut nibh at velit ultrices imperdiet. Nulla molestie eleifend placerat. Curabitur fermentum porttitor massa, gravida vulputate tortor fermentum vel.

Second

Sed malesuada tincidunt turpis, id suscipit massa tempus in. Integer vitae odio ac nulla molestie ornare eget nec turpis. Duis tellus nulla, pellentesque ac porttitor non, pulvinar et est.

Third

Praesent dictum arcu nec nisi lobortis cursus vitae ac sapien. Nulla adipiscing, neque at ultrices egestas, ante orci malesuada mi, ut laoreet dui dui in neque. Phasellus sit amet ligula justo, et condimentum eros.

Author

James Kanjo. Please visit his/her userPage.

---

Related articles

• Tabview with ListPages
• Customise The Wikidot Editor
• Keep hidden tags really hidden in tags area
• Hide forum signatures
• Make a Compact Horizontal Account Options Menu
• Override Inline Styles With CSS

Comments

Main Tab Color

VastOne 13 Nov 2010 08:27

Hi James,

I have loaded this as a css module on a test page and can go through it and change every color there except the main Blue color of the selected tab.

I have changed all of the settings on every color and it is still blue, so I am guessing this color is set somewhere else in the main CSS code perhaps?

I appreciate any feedback.. All I want to do is change the selected tab color to a light gray to match my site.

---

Recent Builds

Conky-PitStop

Re: Main Tab Color

rhombus p 13 Nov 2010 17:37

if you post a direct link to the page ill take a look at it

---

Last edited on 13 Nov 2010 17:39 by rhombus p Show more

Re: Main Tab Color

VastOne 13 Nov 2010 19:47

Here is the code running as test:_template at this site on this page

[[tabview]]
[[tab Gque Code]]
%%content%%
[[/tab]]
[[tab  Gque Files]]
[[module Files]]
[[/tab]]
[[tab  Gallery]]
[[gallery]]
[[/tab]]
[[/tabview]]

[[module CSS]]

.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
    border-color:#505a5f; /* color between tab list and content */
}

.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
    background-color:#505a5f; /* tab background */
    border-color:#505a5f;
    color:#505a5f;
}

.yui-navset .yui-nav a em,
.yui-navset .yui-navset-top .yui-nav a em {
    border-color: #505a5f;
}

.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a:hover {
    background-color:#ffffff; /* selected tab background */
    color:#ffffff;
}

.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
    background-color: #505a5f; /* selected tab background */
}

.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a em {
    border-color: #505a5f; /* selected tab border color */
}

.yui-navset .yui-content {
    background-color: #ffffff; /* content background color */
}

.yui-navset .yui-content,
.yui-navset .yui-navset-top .yui-content {
    border-color: #ffffff; /* content border */
    border-top-color:#ffffff; /* different border color */
}

.yui-navset-left .yui-content {
    border-color: #ffffff; /* content border */
    border-left-color: #ffffff; /* different border color */
}

.yui-navset-bottom .yui-content,
.yui-navset .yui-navset-bottom .yui-content {
    border-color: #ffffff; /* content border */
    border-bottom-color: #ffffff; /* different border color */
}

[[/module]]

---

Recent Builds

Conky-PitStop

Re: Main Tab Color

rhombus p 13 Nov 2010 20:52

try this. this is the code that i used on my site

.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
    background:url(http://battleground.wdfiles.com/local--files/admin:tabs/tab_cool_unselected.png) repeat-x; /* tab background */
}

.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a:focus, /* no focus effect for selected */
.yui-navset .yui-nav .selected a:hover { /* no hover effect for selected */
    background:url(http://battleground.wdfiles.com/local--files/admin:tabs/tabs_cool_selected.png) repeat-x;  /* selected tab background */
}

.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
    background:#525050 url(http://battleground.wikidot.com/local--files/admin:tabs/Tab_cool_hover.png) repeat-x; /* selected tab background */
    color:#ffb;

}

---

Re: Main Tab Color

VastOne 13 Nov 2010 21:04

Thank Rhombus, I see now how it needs to be done.

I appreciate the help

---

Recent Builds

Conky-PitStop

Re: Main Tab Color

rhombus p 13 Nov 2010 21:23

no problem, glad i could help

---

TabView Colour Problem: Solved

GoVegan 14 Nov 2010 09:54

Hi guys,

The problem was really really simple… that blue colour you saw was really a image. All that needed to be added to the code was this one line:

.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a:hover {

background-image: none;
background-color:#FF47a0; /* selected tab background */
color:#fff;

}
 

Which fixes all problems

Re: TabView Colour Problem: Solved

VastOne 15 Nov 2010 00:51

Thank you James.

Rhombus colors works perfectly on my Conky-Pitstop Wiki site

And this clarity has allowed me to match my site colors for work on the Guayadeque Wiki - I had been wanting to use tab menus but could not get it to look good until now.

They should both be ready for transition tomorrow sometime.

I appreciate it!

---

Recent Builds

Conky-PitStop

Where...?

FurystormAdmin 17 Sep 2012 17:03

I'm not even sure if you are still an active member, but I'm very new to wikidot CSS and I'm trying to implement this color-changing code. So, here is my really newbie question: where do I put this code? Does it go right into my site's theme code? Does it go somewhere else? :) Thanks.

Re: Where...?

FurystormAdmin 17 Sep 2012 17:20

I've figured this out. :D

But, another question I have is how do you change the color the tab turns when you hover your mouse cursor over it?

Re: Where...?

(account deleted) 17 Sep 2012 19:34

Here is the part that controls the color while hovering:

.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
    background-color: #FFdaff; /* selected tab background */
}

---

Community Admin