Forum:Tab View Questions

Hello there!

I was wondering about something in regards to.


 * 1) Can the tabs have border in them? If so, how can I add borders to tabs?
 * 2) It is color customizable, but can it be customizable in a way that when you click on one tab, its color will be different from the rest of the tabs? Sort of a highlight?
 * 3) s the font color changeable as well? Or it will be the same color as the whole wiki's link color?

Thank you. Maku! Here is my talkpage 08:29, June 30, 2010 (UTC)


 * From looking at helpwiki:Help:Tab view, you can definitely change the styles of tabs, but hopefully someone who has done it will see this post. The only part that might be tricky is the highlight color. -- Fandyllic  (talk &middot; contr) 9:28 AM PST 30 Jun 2010


 * Unfortunately, the CSS styling on the Tabview help page is not up to date, so a lot of it wont work. I suggest that you get the Firebug extension for Firefox- it makes it much easier to figure out customizations. I've been using tabview on the BioShock Wiki, so I can give you some examples. Take a look at the tabs on this page: w:c:bioshock:Welcome To Rapture. These tabs have borders, rounded edges, background color/image, and different appearance for the selected/unselected tabs. Here is the code we use:

/** TABVIEW EXTENSION **/

/*Style of the 'off' tabs */ .yui-navset .yui-nav li.tabOff, .yui-navset .yui-nav li.tabOn { background: #013354 url(http://images3.wikia.nocookie.net/bioshock/images/5/58/Gradient.png) top left repeat-x; padding-left: 10px; padding-right: 10px; border-top: 1px solid #71D1EF; border-left: 1px solid #020909; border-right: 1px solid #020909; border-bottom: 0px; border-radius: 8px 8px 0px 0px; -moz-border-radius: 8px 8px 0px 0px; -webkit-border-radius: 8px 8px 0px 0px; -o-border-radius: 8px 8px 0px 0px; -khtml-border-radius: 8px 8px 0px 0px; }

/* Style of the selected tab */ .yui-navset .yui-nav li.tabPinned { background-color: #0E192D; border-top: 2px solid #71D1EF; border-left: 2px solid #235566; border-right: 2px solid #235566; border-bottom: 0px; box-shadow:0 4px 5px #235566 inset; -moz-box-shadow:0 4px 5px #235566 inset; -webkit-box-shadow:0 4px 5px #235566 inset; -o-box-shadow:0 4px 5px #235566 inset; -khtml-box-shadow:0 4px 5px #235566 inset; -moz-border-radius: 8px 8px 0px 0px; -webkit-border-radius: 8px 8px 0px 0px; -o-border-radius: 8px 8px 0px 0px; -khtml-border-radius: 8px 8px 0px 0px; }
 * If you wanted to change the color/style of the text in the tabs you would add this:

.yui-navset .yui-nav li a { color: #color; }
 * and replace #color with whatever you want it to be. Gardimuer 18:24, June 30, 2010 (UTC)