Changes
Categorized - Meta:MetaProject to Overhaul Meta
<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]]
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]]
