Extension:Header Tabs/Skin modification

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!


HeaderTab styling with Extension:CSS?

1
Revansx (talkcontribs)

System:

  • MediaWiki 1.34.1 (b1f6480) 18:15, 30 April 2020
  • Header Tabs 1.2 (b548d42) 01:17, 2 August 2019
  • CSS 3.5.0 (2354958) 02:41, 11 September 2020

ISSUE - pasting the "Rounded tabs" example CSS into an in-page CSS parser function like:

{{#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;
}

}}

does not work. Is this to be expected?

Reply to "HeaderTab styling with Extension:CSS?"

Tabs on screen and headers in printouts

1
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"

Old YUI style (blue and gray)

1
Dgennaro (talkcontribs)

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;
}

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