From Eugene Neighbors

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 <!-- See Talk page for reports of problems using Firefox -->

Contents 1 JavaScript tweak 2 CSS tweak 3 UNDER COSTRUCTION, PLEASE SEE THIS POST IN RESERVE COPY 4 CLICK HERE 4.1 Simpler version for IE, Firefox, and others 4.1.1 Tabs for IE6

[edit] JavaScript tweak

Drop this in monobook.js: <pre> 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); </pre>

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

[edit] CSS tweak

Add this into monobook.css as well:

<pre> /* bottom tab styling (not for IE currently) */

1. mytabs {

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

}

1. mytabs .hiddenStructure { display: none; }
2. mytabs li {

   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;

}

1. mytabs li.selected {

   border-color: #fabd23;
   padding: 0.2em 0 0 0;

}

1. mytabs li a {

   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;

}

1. mytabs li.selected a { z-index: 3; }
2. mytabs .new a { color:#ba0000; }
3. mytabs li a:hover {

   z-index: 3;
   text-decoration: none;

}

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 {

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

/* 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;

}*/ </pre>

---

[edit] 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:

#mytabs { 
  width: 100%;
  font-size: smaller;
  position: static;
}
#mytabs h5 { display: none }
#mytabs ul { margin: 0; }
#mytabs li { display: inline; }
#mytabs li a {
  padding: 0 0.4em;
  border-left: 1px solid Grey;
}

[edit] 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)