1. Guide
  2. Have your wiki tabs vbulletin style
like calendar - Printable Version

https://www.vaultwiki.org/pages/Tutorials/Guide:Have-your-wiki-tabs-vbulletin-style-like-calendar

This page has been seen 192,884 times.

To have your wikitabs display the same as your vbulletin calendar tabs (which you can control in your stylevars)
add the following snippet to your additional.css in the template editor

Code:
/*
* Wiki tab overwrite
*/
.p-cactions {margin: 0}


ul.p-cactions li {
float:{vb:stylevar left};
}

ul.p-cactions li a {
font-size:{vb:stylevar small_fontSize};
font-weight:bold;
color:{vb:stylevar body_color};
text-decoration:none;
text-align:center;

padding:0 {vb:stylevar padding};
min-width:{vb:stylevar tabslight_size.width}{vb:stylevar tabslight_size.units};
height:{vb:stylevar tabslight_size.height}{vb:stylevar tabslight_size.units};
line-height:{vb:stylevar tabslight_size.height}{vb:stylevar tabslight_size.units};
display:block;

border:{vb:stylevar tabslight_border};
background-color:{vb:stylevar blocksubhead_background.backgroundColor};

margin-{vb:stylevar left}:-{vb:stylevar tabslight_border.borderWidth}{vb:stylevar tabslight_border.units};


-moz-border-radius-top{vb:stylevar left}:5px;
-moz-border-radius-top{vb:stylevar right}:11px;
-webkit-border-top-{vb:stylevar left}-radius:3px;
-webkit-border-top-{vb:stylevar right}-radius:11px;
border-top-{vb:stylevar left}-radius:3px;
border-top-{vb:stylevar right}-radius:11px;
}

html>/**/body ul.p-cactions li.selected a,
html>/**/body ul.p-cactions li.selected a:hover {
position:relative;
border-bottom: {vb:stylevar tabslight_border.borderWidth}{vb:stylevar tabslight_border.units} {vb:stylevar tabslight_border.borderStyle} transparent;
background:{vb:stylevar tabslight_selected_background};
}
* ul.p-cactions li.selected a, * ul.p-cactions li.selected a:hover {
border-bottom: {vb:stylevar tabslight_border.borderWidth}{vb:stylevar tabslight_border.units} {vb:stylevar tabslight_border.borderStyle} transparent;
background:{vb:stylevar tabslight_selected_background};
}

ul.p-cactions li a:hover {
color:{vb:stylevar linkhover_color};
background:{vb:stylevar tabslight_selected_background};
}