Help:Tab view
Talk9this wiki
Redirected from Tabview
- This extension is enabled by default on Wikia.
- Due to restrictions, please see Help:Tab view on Wikia Help for fully working examples if you are reading this page via Shared Help.
Tab view gives an easy way of combining pages into one page with a tab for each sub-page. This can be an attractive and useful view for organising content.
Contents |
Using tab view 
Edit
To use this feature, just list the pages you want to include inside the special tabs:
<tabview> Help:Page for tab 1 Help:Page for tab 2 Help:Page for tab 3 </tabview>
This will give you:
Changing tab textEdit
To change the text on the tabs, add a title separated from the page name with a pipe ("|"):
<tabview> Help:Page for tab 1|Tab 1 Help:Page for tab 2|Tab 2 Help:Page for tab 3|Tab 3 </tabview>
This will give you:
Disabling tab cacheEdit
If a page is showing very frequently updated information, you may want to force the tab to check for new content on each page load. This can be done with a second pipe. This should be used sparingly.
<tabview> Help:Page for tab 1|Tab 1|false Help:Page for tab 2|Tab 2 Help:Page for tab 3|Tab 3 </tabview>
Preset an open tabEdit
The last variable chooses which tab is open when the page loads. By default, all tabs are closed, but you can choose an open tab by using a third pipe:
<tabview> Help:Page for tab 1|Tab 1 Help:Page for tab 2|Tab 2||true Help:Page for tab 3|Tab 3 </tabview>
This will give you:
Skipping variablesEdit
As you can see in the last example, any variables you don't need can be left blank. For example, if you want to have the third tab as the active tab on page load, but not to set any other variables, you would use:
<tabview> Help:Page for tab 1 Help:Page for tab 2 Help:Page for tab 3|||true </tabview>
ParametersEdit
The only parameters available in tabview is "title" and "id". You cannot customize each tabview in the page. Currently it has to be done via site CSS. The parameters are:
<tabview title="..." id="...">
Styling the tabs via CSSEdit
Tab view has default styles and formatting provided automatically, but it can also be given a custom style through CSS. You may copy the following CSS (the blue tab style as seen on Wikia Help) to your site's global CSS, i.e. MediaWiki:Common.css (or MediaWiki:Wikia.css for the new default-wikia skin). You can adjust the values in the example below to create a unique color scheme and layout for the tabs.
/*** TabView extension ***/
/* Style of all unselected tabs */
.yui-navset .yui-nav li
{
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
background-color: #D9D9D9;
color: #3A3A3A;
font-size: 12px;
margin-top: 7px;
padding: 6px 20px 3px;
}
/* END Style of all unselected tabs */
/* Style of the selected tab */
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a
{
background-color: #7FB5D7;
color: white;
font-weight: bold;
}
/* END Style of the selected tab */
/* Padding between tabs */
.ui-tabs .ui-tabs-nav li
{
margin: 0 0.2em 1px 0;
padding: 0;
}
/* END Padding between tabs */
/* Remove the border & space between tabs & content */
.ui-tabs .ui-tabs-nav
{
border-bottom: 0 none;
margin-bottom: 0;
}
/* Remove the border & space between tabs & content */
/* Background color and border of tab content */
.ui-tabs .ui-tabs-panel
{
background: none repeat scroll 0 0 white;
border: 2px groove gray;
}
/* END Background color and border of tab content */
