Extension:Header Tabs/JQueryStyles
JQuery UI tabs styling are all based on the default 'jquery' style.
Installing a new style [edit]
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.
For some documentation on these CSS styles, see the jQuery UI website here.
Default styles [edit]
See the table on in $htStyle section.
User styles [edit]
Please use the 'Start new discussion' link bellow to add your own style to this list!
Contents
| Thread title | Replies | Last modified |
|---|---|---|
| Old YUI style (blue and gray) | 0 | 00:29, 19 December 2012 |
| float problem | 0 | 15:04, 13 January 2012 |
| Rounded tabs | 0 | 15:35, 27 December 2011 |
I am calling this the "retro" style
#headertabs.retro.ui-widget {
font-family:inherit;
font-size: 1em;
background: #fff;
border: 0px;
}
#headertabs.retro .ui-tabs-panel {
border-color: rgb(36,51,86) rgb(128,128,128) rgb (128,128,128);
border-style: solid;
border-width: 1px;
}
#headertabs.retro .ui-widget-header {
border-bottom: 5px solid #2647A0;
}
#headertabs.retro .ui-state-default,
#headertabs.retro .ui-state-default a {
background: #CCC;
border-color: #666;
color: #000;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
}
#headertabs.retro .ui-state-hover,
#headertabs.retro .ui-state-hover a {
background: rgb(191,218,255);
color: #000;
}
#headertabs.retro .ui-state-active,
#headertabs.retro .ui-state-active a {
background: #2647A0;
border-color: #000;
border-width: 1px 1px 0px 1px;
color: #fff;
}
#headertabs.retro .ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
font-family: inherit;
font-size: 1em;
}
#headertabs.retro .ui-widget-content a {
color: #0645ad;
}
#headertabs.retro .ui-widget a:visited {
color: #0b0080;
}
#headertabs.retro .ui-widget-content a.new {
color: #CC2200;
}
#headertabs.retro .ui-widget-content a.new:visited {
color: #A55858;
}
#headertabs.retro .ui-widget-content a.exitw {
color: #3366BB;
}
#headertabs.retro .ui-widget-content a.redirect {
color: #308050
}
#headertabs.retro .ui-widget-content a.redirect:visited {
color: #3070A0;
}
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
