Extension:Header Tabs/JQueryStyles
JQuery UI tabs styling are all based on the default 'jquery' style.
[edit] Installing a new style
Per the $htStyle configuration section, you can change this to the name of any default shipped style in the /skins-jquery directory. To make a new style, or use one of the ones bellow, simply create a file called 'ext.headertabs.stylenamehere.css'. Then in the style ensure it always uses '#headertabs.stylenamehere'.
If you do not have shell access, you can also add the style to your MediaWiki:Common.css page.
[edit] Default styles
See the table on in $htStyle section.
[edit] User styles
Please use the 'Start new discussion' link bellow to add your own style to this list!
Contents
| Thread title | Replies | Last modified |
|---|---|---|
| float problem | 0 | 15:04, 13 January 2012 |
| Rounded tabs | 0 | 15:35, 27 December 2011 |
If you float elements on a tab the bottom part of the gray background will vanish. You can amend that with the following CSS:
#headertabs.jquery-large.ui-widget {
float: left;
}
However, as the tabs themselves are also floated left they might not display correctly (especially the most right one). Setting a width for whole tab bar seems to solve the problem.
ul.ui-tabs-nav {
min-width: 700px;
}
In order to display rounded tabs (instead of rectangles), we just copied the complete ext.headertabs.bare.css (replaced bare with round) and added a section at bottom of the css.
#headertabs.round .ui-corner-top {
-moz-border-radius-topleft: 3px;
-webkit-border-top-left-radius: 3px;
-moz-border-radius-topright: 3px;
-webkit-border-top-right-radius: 3px;
border-top-left-radius: 3px 3px;
border-top-right-radius: 3px 3px;
}
#headertabs.round .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
border: 1px solid #DDD;
font-weight: normal;
color: #2779AA;
}
by MWJames
