Help:User style/bottom tabs

 See First: Help:User style  This currently only appears to work with personal customization. Please Add Info for Site Wide Implementation

To get this:



For CSS2 browsers (Mozilla, Opera, Safari -- NOT Firefox)
Note: Firefox users, please use "Simpler version" below

JavaScript tweak
Drop this in monobook.js: function morelinks { var tabs = document.getElementById('p-cactions').cloneNode(true); tabs.id = 'mytabs'; var listitems = tabs.getElementsByTagName('LI'); for (i=0;i<listitems.length;i++) { if(listitems[i].id) listitems[i].id = 'mytabs-' + listitems[i].id; } document.getElementById('column-content').appendChild(tabs); } if (window.addEventListener) window.addEventListener("load",morelinks,false); else if (window.attachEvent) window.attachEvent("onload",morelinks);

Add this after other functions that alter the tabs, and the same changes will be duplicated on the bottom.

CSS tweak
Add this into monobook.css as well:

/* bottom tab styling (not for IE currently) */ margin: -0.3em 0 0 11.5em; white-space:nowrap; line-height: 1.1em; overflow: visible; border-collapse: collapse; padding: 0 0 0 1em; list-style: none; font-size: 95%; }   display: inline; border: 1px solid #aaaaaa; border-top: none; padding: 0.1em 0 0 0; margin: 0 0.3em 0 0; overflow: visible; background: White; }   border-color: #fabd23; padding: 0.2em 0 0 0; }   background-color: White; color: #002bb8; border: none; padding: 0.3em 0.8em 0 0.8em; text-decoration: none; text-transform: lowercase; position: relative; margin: 0; }   z-index: 3; text-decoration: none; }   padding-left: 0.4em; padding-right: 0.4em; } /* offsets to distinguish the tab groups */ li#mytabs-ca-talk { margin-right: 1.6em; } li#mytabs-ca-watch, li#mytabs-ca-unwatch, li#mytabs-ca-varlang-0, li#mytabs-ca-print { margin-left: 1.6em; }
 * 1) mytabs {
 * 1) mytabs .hiddenStructure { display: none; }
 * 2) mytabs li {
 * 1) mytabs li.selected {
 * 1) mytabs li a {
 * 1) mytabs li.selected a { z-index: 3; }
 * 2) mytabs .new a { color:#ba0000; }
 * 3) mytabs li a:hover {
 * 1) mytabs h5 { display: none; }
 * 2) mytabs li.istalk { margin-right: 0; }
 * 3) mytabs li.istalk a { padding-right: 0.5em; }
 * 4) mytabs-ca-addsection a {

/* remove comment tags if bottom tabs should be rounded as well in moz */ /* #mytabs li, #mytabs li a { -moz-border-radius-bottomleft: 1em; -moz-border-radius-bottomright: 1em; }*/

Simpler version for IE, Firefox, and others
Drop this in monobook.js: function morelinks { var tabs = document.getElementById('p-cactions').cloneNode(true); // don't use the same ids twice- replace the p-cactions id and prepend 'mytabs-' to the li's tabs.id = 'mytabs'; // needs this to be set from js, it ignores the css width for some reason tabs.style.width = '100%'; var listitems = tabs.getElementsByTagName('LI'); for (i=0;i<listitems.length;i++) { if(listitems[i].id) listitems[i].id = 'mytabs-' + listitems[i].id; } // drop them at the bottom of the content area document.getElementById('content').appendChild(tabs); } if (window.addEventListener) window.addEventListener("load",morelinks,false); else if (window.attachEvent) window.attachEvent("onload",morelinks); Then add some basic styles for the bottom links in your monobook.css: width: 100%; font-size: smaller; position: static; } padding: 0 0.4em; border-left: 1px solid Grey; }
 * 1) mytabs {
 * 1) mytabs h5 { display: none }
 * 2) mytabs ul { margin: 0; }
 * 3) mytabs li { display: inline; }
 * 4) mytabs li a {

Tabs for IE6


I have tweaked these css and js to work in ie6. May have a look at the js and the css. --WikiWichtel 20:43, 5 Jun 2004 (UTC)