Help:Duplicate tabs at bottom: Difference between revisions
imported>HRWikiMirrorBot Reimported from hrwiki.org Wayback HTML→wikitext (full reconvert) |
imported>HRWikiMirrorBot Reimported from hrwiki.org Wayback HTML→wikitext (full reconvert) |
||
| Line 1: | Line 1: | ||
<!-- | <!-- Wayback HTML body (hrwiki.org); RawHtml --> | ||
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 for CSS2 browsers was originally taken from | <html> | ||
<p>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 for CSS2 browsers was originally taken from <a class="extiw" href="/index.php?title=Wikipedia:WikiProject_User_scripts/Scripts/Duplicate_tabs_at_bottom" title="wikipedia:Wikipedia:WikiProject User scripts/Scripts/Duplicate tabs at bottom">Wikipedia:WikiProject User scripts/Scripts/Duplicate tabs at bottom</a>, but the CSS has been updated so the tabs look right on our modified version of the MonoBook skin. The code for Internet Explorer has been copied from <a class="extiw" href="/index.php?title=Help:User_style/bottom_tabs" title="meta:Help:User style/bottom tabs">Help:User style/bottom tabs</a> and has not been modified. | |||
</p> | |||
<a id="CSS2_Browsers_.28Mozilla.2C_Opera.2C_Safari.2C_etc..29" name="CSS2_Browsers_.28Mozilla.2C_Opera.2C_Safari.2C_etc..29"></a><h2> <span class="mw-headline"> CSS2 Browsers (Mozilla, Opera, Safari, etc.)</span></h2> | |||
<a id="Javascript" name="Javascript"></a><h3> <span class="mw-headline"> Javascript </span></h3> | |||
<p>Put this code in <a href="/index.php?title=Special:MyPage/monobook.js" title="Special:MyPage/monobook.js">your monobook.js file</a>. | |||
</p> | |||
<pre>// Adds bottom tabs | <pre>// Adds bottom tabs | ||
function morelinks() { | function morelinks() { | ||
| Line 13: | Line 13: | ||
tabs.id = 'mytabs'; | tabs.id = 'mytabs'; | ||
var listitems = tabs.getElementsByTagName('LI'); | var listitems = tabs.getElementsByTagName('LI'); | ||
for (i=0;i | for (i=0;i<listitems.length;i++) { | ||
if(listitems[i].id) listitems[i].id = 'mytabs-' + listitems[i].id; | if(listitems[i].id) listitems[i].id = 'mytabs-' + listitems[i].id; | ||
} | } | ||
| Line 21: | Line 21: | ||
else if (window.attachEvent) window.attachEvent("onload",morelinks); | else if (window.attachEvent) window.attachEvent("onload",morelinks); | ||
</pre> | </pre> | ||
<a id="CSS" name="CSS"></a><h3> <span class="mw-headline"> CSS </span></h3> | |||
=== CSS | <p>And put this code in <a href="/index.php?title=Special:MyPage/monobook.css" title="Special:MyPage/monobook.css">your monobook.css file</a>. | ||
</p> | |||
And put this code in | |||
<pre>/* bottom tab styling (not for IE currently) */ | <pre>/* bottom tab styling (not for IE currently) */ | ||
#mytabs { | #mytabs { | ||
| Line 100: | Line 98: | ||
} | } | ||
</pre> | </pre> | ||
<a id="Simpler_version_for_IE_and_others" name="Simpler_version_for_IE_and_others"></a><h2> <span class="mw-headline"> Simpler version for IE and others </span></h2> | |||
== Simpler version for IE and others | <a id="Javascript_2" name="Javascript_2"></a><h3> <span class="mw-headline"> Javascript </span></h3> | ||
<p>Put this in <a href="/index.php?title=Special:MyPage/monobook.js" title="Special:MyPage/monobook.js">your monobook.js file</a>. | |||
=== Javascript | </p> | ||
Put this in | |||
<pre>function morelinks() { | <pre>function morelinks() { | ||
var tabs = document.getElementById('p-cactions').cloneNode(true); | var tabs = document.getElementById('p-cactions').cloneNode(true); | ||
| Line 114: | Line 109: | ||
tabs.style.width = '100%'; | tabs.style.width = '100%'; | ||
var listitems = tabs.getElementsByTagName('LI'); | var listitems = tabs.getElementsByTagName('LI'); | ||
for (i=0;i | for (i=0;i<listitems.length;i++) { | ||
if(listitems[i].id) listitems[i].id = 'mytabs-' + listitems[i].id; | if(listitems[i].id) listitems[i].id = 'mytabs-' + listitems[i].id; | ||
} | } | ||
| Line 122: | Line 117: | ||
if (window.addEventListener) window.addEventListener("load",morelinks,false); | if (window.addEventListener) window.addEventListener("load",morelinks,false); | ||
else if (window.attachEvent) window.attachEvent("onload",morelinks);</pre> | else if (window.attachEvent) window.attachEvent("onload",morelinks);</pre> | ||
<a id="CSS_2" name="CSS_2"></a><h3> <span class="mw-headline"> CSS </span></h3> | |||
=== CSS | <p>And put this code in <a href="/index.php?title=Special:MyPage/monobook.css" title="Special:MyPage/monobook.css">your monobook.css file</a>. | ||
</p> | |||
And put this code in | |||
<pre>#mytabs { | <pre>#mytabs { | ||
width: 100%; | width: 100%; | ||
| Line 139: | Line 132: | ||
border-left: 1px solid Grey; | border-left: 1px solid Grey; | ||
}</pre> | }</pre> | ||
<div class="visualClear"></div> | |||
</html> | |||
Latest revision as of 21:00, 18 July 2026
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 for CSS2 browsers 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. The code for Internet Explorer has been copied from Help:User style/bottom tabs and has not been modified.
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;
}