Extension:Header Tabs/Skin modification

Jump to navigation Jump to search

About this board

This page lists skin modifications for the Header Tabs extension.

Installing a new style

You can change this to the name of any default shipped style in the /skins-jquery directory; see also $htStyle.

To make a new style, or use one of the styles below:

  1. create a file called 'ext.headertabs.stylenamehere.css'.
  2. 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 instructions on these CSS styles, see the jQuery UI documentation here.

Default styles

See the table in the $htStyle section.

User styles

Please use the 'Start new discussion' link below to add your own style to this list!

Tabs on screen and headers in printouts

Carchaias (talkcontribs)

I like headertabs very much but they have one disadvantage - printing pages to paper. I would prefer the usual floating text design of a page for the printable style and the tabs for the screen style. I think this is possible by hacking the mediawiki:print.css page but I have no idea how?

Reply to "Tabs on screen and headers in printouts"
Ofbeaton (talkcontribs)

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

This post was posted by Ofbeaton, but signed as Olivier Beaton.

Reply to "Rounded tabs"
Dgennaro (talkcontribs)

I am calling this the "retro" style

#headertabs.retro.ui-widget {
  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;

Reply to "Old YUI style (blue and gray)"
Nakohdo (talkcontribs)

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;
Reply to "float problem"
There are no older topics