Extension:Header Tabs/Skin modification

This page used the LiquidThreads extension to give structured discussions. It has since been converted to wikitext, so the content and history here are only an approximation of what was actually displayed at the time these comments were made.

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:

create a file called 'ext.headertabs.stylenamehere.css'.
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!

Rounded tabs

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. <pre>

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; } </pre> by MWJames Olivier Beaton 15:35, 27 December 2011 (UTC)

float problem

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;
} Nakohdo 15:04, 13 January 2012 (UTC)

Old YUI style (blue and gray)

I am calling this the "retro" style

<pre>

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;

}

</pre> Dgennaro 16:45, 2 November 2012 (UTC)

Tabs on screen and headers in printouts

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? Carchaias (talk) 13:16, 17 October 2017 (UTC)

HeaderTab styling with Extension:CSS?

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? Revansx (talk) 03:35, 15 October 2020 (UTC)

Not able to Modify Skin

Hello,

MediaWiki 1.39.6

PHP 8.1.27

Header Tabs 2.2 (61f068f) 05:00, 9 February 2024

I am trying to enable 'large' style from old version of HT. But this is not working.

Whatever I try, nothing takes effect. Tabs are showing in gray color only. I wanted to have 'sky blue colored tabs' I hope this is from the 'large' style sheet. Also it does not allow to add link as tab header. In old version wiki(1.35) its working, but we needed it in our new wiki 1.39.6.

can someone help with this ? Testergt1302 (talk) 06:41, 2 April 2024 (UTC)

I don't think this is possible any more, unfortunately, after the move to the OOUI JavaScript library. You would have to make changes manually, in MediaWiki:Common.css. Yaron Koren (talk) 13:32, 2 April 2024 (UTC)

Thanks for the reply. I managed to do the styling by editing the core.css file.

But I need one more thing thats about the link. I saw some of our wiki pages have tab header like this.

=[http://domain/page TabHeader]=

In older version the tab shows the 'TabHeader' and when clicked on that, it redirects to the link. But in new version. I am unable to do that, it shows as text like,

<a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="http://domain/page">TabHeader</a>

can you tell me how to format this? Testergt1302 (talk) 14:32, 2 April 2024 (UTC)

Right - I'm not sure that this is doable either, unfortunately. OOUI is generally much more restrictive than the previous library used in Header Tabs, jQuery UI. Apparently it used to be possible to embed images within tabs also, but that is no longer possible. Yaron Koren (talk) 15:43, 2 April 2024 (UTC)

Add topic