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

rating: +4+x

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 */
}

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.

Author

James KanjoJames Kanjo. Please visit his/her userPage.


Related articles

Comments

Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-Share Alike 2.5 License.