View source for Help:User style/bottom tabs

<B> See First: [[Help:User style]] </B>  This currently only appears to work with personal customization. [[Please Add Info for Site Wide Implementation]]

To get this:

[[Image:Bottom tabs position corrected.png|framed|none|Bottom tabs in Firefox]]

== For CSS2 browsers (Mozilla, Opera, Safari, etc.) ==
=== 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.

=== CSS tweak ===
Add this into monobook.css:

<pre>
/* bottom tab styling (not for IE currently) */
#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%;
}
#mytabs .hiddenStructure { display: none; }
#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;
}
#mytabs li.selected {
    border-color: #fabd23;
    padding: 0.2em 0 0 0;
}
#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;
}
#mytabs li.selected a { z-index: 3; }
#mytabs .new a { color:#ba0000; }
#mytabs li a:hover {
    z-index: 3;
    text-decoration: none;
}
#mytabs h5 { display: none; }
#mytabs li.istalk { margin-right: 0; }
#mytabs li.istalk a { padding-right: 0.5em; }
#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>

== Simpler version for IE and others ==
[[Image:Bottomlinks.png|framed|none|Simple version of bottom links]]
Drop this in monobook.js:
<pre>
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);
</pre>
Then add some basic styles for the bottom links in your monobook.css:
<pre>
#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;
}
</pre>

=== Tabs for IE6 === 
[[Image:Tabs_downunder_ie6.png|framed|none|left|bottom tabs]]

I have tweaked these css and js to work in ie6. May have a look at [[user:fristu/monobook.js|the js]] and [[user:fristu/monobook.css|the css]]. --[[User:Fristu|WikiWichtel]] 20:43, 5 Jun 2004 (UTC)

[[Category:Uncategorized]]