Extension talk:Header Tabs/Skin modification

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!

Previous page history was archived for backup purposes at Extension:Header Tabs/Skin modification/LQT Archive 1 on 2015-07-10.

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 ?

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.

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?

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.

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?

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?

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.

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