Help:Duplicate tabs at bottom

From Homestar Runner Wiki

Revision as of 21:20, 24 March 2006

The following JavaScript and CSS code will add a duplicate set of page action tabs (article, discussion, edit, history, etc.) to the bottom of every page. The code was originally taken from Wikipedia:WikiProject User scripts/Scripts/Duplicate tabs at bottom, but the CSS has been updated so the tabs look right on our modified version of the MonoBook skin.

CSS2 Browsers (Mozilla, Opera, Safari, etc.)

Javascript

Put this code in your monobook.js file.

// Adds bottom tabs
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);

CSS

And put this code in your monobook.css file.

/* bottom tab styling (not for IE currently) */
#mytabs {
   margin: -0.4em 0 0  12em;
   white-space: nowrap;
   width: 76%;
   line-height: 1.1em;
   overflow: visible;
   background: none;
   border-collapse: collapse;
   padding: 0 0 0 1em;
   list-style: none;
   font-size: 95%;
}
#mytabs .hiddenStructure {
   display: none;
}
#mytabs ul {
   list-style: none;
}
#mytabs li {
   display: inline;
   border: 1px solid #aaa;
   border-top: none;
   padding: 0.1em 0 0.1em 0;
   margin: 0 0.3em 0 0;
   overflow: visible;
   background: #fff;
}
#mytabs li.selected {
   border-color: #fabd23;
   padding: 0.2em 0 0.1em 0;
}
#mytabs li a {
   background-color: #fff;
   color: #002bb8;
   border: none;
   padding: 0.3em 0.8em 0 0.8em;
   text-decoration: none;
   text-transform: lowercase;
   position: relative;
   z-index: 0;
   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 #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;
}

Simpler version for IE and others

Javascript

Put this in your monobook.js file.

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

CSS

And put this code in your monobook.css file.

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