Customize Tabs in Wikidot

GirlCalledBlu

Here's the code to change the entire design of the tabs for Wikidot wikis. I have kept everything very plain here, so it is easy to change to fit your wiki style guide. I've also added a few tips that I've found are helpful for redesigning the tabview code for Wikidot.

/*SETTINGS HORIZONTAL LINE*/
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
    border:solid #000; /* color of the horizontal line between tab list and selected content */
    border-width:0 0 5px; /*thickness of the horizontal line between tab list and content */
}
.yui-navset .yui-nav li,
.yui-navset .yui-navset-top .yui-nav li {
    margin:0 2px 0 0; /* space between tabs */
}
.yui-navset .yui-nav .selected,
.yui-navset .yui-navset-top .yui-nav .selected {
    margin:0 1px -1px 0; /* for overlap */
}
/* SETTINGS FOR UNSELECTED TABS */
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
    background:#FFFFFF url(http://themes.wikidot.com/local--files/rainbow-base/tabcolor.png) repeat-x -3px;
    border-top:solid #000 1px;
    border-left:solid #000 1px;
    border-right:solid #000 1px;
    font-weight:none;
    font-family:Arial;
    font-size:140%;
    color:#000;/*tab text color*/
}
.yui-navset .yui-nav a em,
.yui-navset .yui-navset-top .yui-nav a em {
    border:solid #000 0px;
}

/*HOVER SETTINGS FOR UNSELECTED TABS*/
.yui-navset .yui-nav a:hover,
.yui-navset .yui-navset-top .yui-nav a:hover {
    background:#DDD
}

/* SETTINGS FOR SELECTED TABS */
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a:hover {
    background:#CCC url(http://themes.wikidot.com/local--files/rainbow-base/tabcolor.png) repeat-x -3px;
    color:#fff;border:1px solid #000;font-weight:600
}

/* SETTINGS FOR SELECTED CONTENT */
.yui-navset .yui-content {
    background-color: #FFF; /* content background color */
}
 
.yui-navset .yui-content,
.yui-navset .yui-navset-top .yui-content {
    border-color: #000; /* content border */
    border-top-color:#DDD; /* different border color */
}
 
.yui-navset-left .yui-content {
    border-color: #000; /* content border */
    border-left-color: #DDD; /* different border color */
}
 
.yui-navset-bottom .yui-content,
.yui-navset .yui-navset-bottom .yui-content {
    border-color: #000; /* content border */
    border-bottom-color: #DDD; /* different border color */
}

So, some tips:

You can use Google Fonts here in the font sections for content and tabs. It creates unique fonts for these features. I tend to stay away from changing the content font (hello, Verdana, my old friend), but you totally can.
Don't go too crazy with colors here. Try to stay consistent. I'm a huge fan of creating a palette for a wiki, and sticking to it. If you haven't played with http://paletton.com/, it is a really great website for creating color palettes that give both hex and RGB codes for colors. Those RGB codes can be really important if you're playing with transparent elements.

Here is this code in action: http://ablusandbox.wikidot.com/tabexamples

Enjoy, and happy wikifooing.

EDIT: Actually used the correct website name for Paletton. Oops.

krmbm

If you're not keen on self-styling, there's a decent-looking template to redesign the look of the tabs here: http://snippets.wikidot.com/code:tabview-csi

GirlCalledBlu

@krmbm said in Customize Tabs in Wikidot:

If you're not keen on self-styling, there's a decent-looking template to redesign the look of the tabs here: http://snippets.wikidot.com/code:tabview-csi

Definitely! Thanks for sharing that. Hadn't seen that before.