Wikipedia:Technik/Archiv/Skin/Baukasten
Hier soll eine Sammlung von kleinen Codeschnipseln für eigene Javascripts und Stylesheets entstehen. Komplett selbständig lebensfähige Modifikationen sind auf Wikipedia:Technik/Skin zu finden.
finger weg von fremden benutzerseiten[Quelltext bearbeiten]
eine kleine idee für alle, die sich schonmal in den arsch gebissen haben, weil sie schon wieder jemandem auf die benutzer- statt auf die diskussionsseite geschrieben haben: firefox und safari unterstützen im CSS schicke attribut-selektoren, mit denen man den "seite editieren"-link auf fremden benutzerseiten ein wenig umgestalten kann, so daß man es rechtzeitig bemerkt, daß man im begriff ist, etwas dummes zu tun. einfach untigen code in die monobook.css kopieren und das "D" in "Benutzer:D" durch den eigenen benutzernamen ersetzen. wichtig: statt leerzeichen im namen unterstriche ("_") verwenden.
/* monobook.css */
li#ca-edit a[href*="title=Benutzer:"] { background: left url(http://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Stop_hand.png/32px-Stop_hand.png); }
li#ca-edit a[href*="title=Benutzer:D/"] { background: none; }
li#ca-edit a[href*="title=Benutzer:D&"] { background: none; }</nowiki></pre>
logo weg und suchbox nach oben[Quelltext bearbeiten]
diese beiden sehen besonders in kombination schick aus, die searchbox wandert dann bis fast zum oberen bildschirmrand. der erste teil kommt ins monobook.css. blendet das logo aus und schiebt die linke spalte nach oben. der zweite teil ist für die monobook.js und schiebt das searchbox-portler direkt unter das (ausgeblendete) logo.
/* monobook.css */
#column-one { padding-top: 1.8em; }
#p-logo { display: none; }
/* monobook.js */
function searchToTop() {
function $(id) { return document.getElementById(id); }
var search = $('p-search');
search.parentNode.removeChild(search);
$('column-one').insertBefore(search, $('p-navigation'));
}
if (window.addEventListener) window.addEventListener("load", searchToTop, false);
else if (window.attachEvent) window.attachEvent( "onload", searchToTop);</nowiki></pre>
enthäßlichter kackbalken[Quelltext bearbeiten]
ein schnipsel für die monobook.css, ein versuch das ding mal deutlich unauffälliger zu gestalten.
/* monobook.css */
div.usermessage {
font-weight: normal;
background-color: transparent !important;
border-color: transparent transparent black transparent !important;
border-style: groove;
margin-top: -1em; /* evtl. weglassen */
}
div.usermessage a { color: darkred; }
quellen verstecken[Quelltext bearbeiten]
für baumanns gebastelt: die Quellen werden erst dargestellt, wenn man einen link zu einer referenz klickt. klickt man in den referenzen auf den ↑-link, werden sie wieder versteckt.
/**
* shows the references tags contents when a reference link is clicked
* and hides it when a backlink is clicked
*/
function referencesOnDemand() {
/** finds the references tag which sadly has no id */
function findReferences() {
var ols = document.getElementsByTagName("ol");
for (var i=0; i<ols.length; i++) {
var ol = ols[i];
if (ol.className == "references") return ol;
}
return null;
}
/** show the references tag */
function showReferences() {
references.style.display = null;
return true;
}
/** hide the references tag */
function hideReferences() {
references.style.display = "none";
return true;
}
var references = findReferences();
if (!references) return;
// patch reference links to show the references tag
var sups = document.getElementsByTagName("sup");
for (var i=0; i<sups.length; i++) {
var sup = sups[i];
if (sup.className != "reference") continue;
var a = sup.firstChild;
a.onclick = showReferences;
}
// patch reference backlinks to hide the references tag
var as = references.getElementsByTagName("a");
for (var i=0; i<as.length; i++) {
var a = as[i];
if (!/#_ref-/(a.href)) continue;
a.onclick = hideReferences;
}
// initially hide references tag
hideReferences();
}
addOnloadHook(referencesOnDemand);
verkürzte sprachlinks auf vector.js[Quelltext bearbeiten]
also mir reicht das kürzel einer sprachversion, der voll ausgeschriebene name einer sprache kann auch im tooltip stehen.
/** language-links verkürzen, FF only (?) */
window.addEventListener("DOMContentLoaded", function() {
function array(arrayLike) Array.prototype.slice.apply(arrayLike);
function first(array) array.length ? array[0] : null;
var pLang = document.getElementById("p-lang"); if (!pLang) return;
var body = first(pLang.getElementsByClassName("body")); if (!body) return;
var ul = first(body.getElementsByTagName("ul")); if (!ul) return;
var lis = array(ul.getElementsByTagName("li"));
lis.forEach(function(li, index) {
if (index != 0) {
body.appendChild(document.createTextNode(" "));
}
var a = first(array(li.children));
if (a) {
var newA = document.createElement("a");
newA.className = li.className;
newA.href = a.href;
newA.title = a.textContent;
newA.textContent = li.className.replace(/^interwiki-/, "");
newA.style.fontSize = "0.75em";
body.appendChild(newA);
}
});
ul.parentNode.removeChild(ul);
pLang.style.lineHeight = "100%";
}, false);
reftoggle, schaltet die Einzelnachweisliste ein und aus
- Zusätzlicher Link zwischen "Eigene Beiträge" und "Abmelden": [1]
- Weitere zusätzliche Links an diversen Stellen: Benutzer:Flominator/change links.js
- Löschlink für NowCommons-Bilder, der automatisch das neue Bild als Löschgrund angibt: Benutzer:Revvar/dellink_nowcommons.js
Hier meine „Bausteine“. Umfangreichere Bausteine befinden sich in der Regel auf einer getrennten Seite, die per JavaScript (z.B. mit der gleich als erstes vorgestellten Funktion) in die eigene JavaScript-Datei übernommen werden können. Wenn jemand diese Bausteine benutzt, bitte ich darum, im JavaScript einen Wikilink auf die entsprechende Seite zu setzen (bei Verwendung meiner includeJS ist das gar nicht anders möglich; amsonsten einfach in einen Kommentar setzen).
Einbinden von anderen JavaScript-Seiten[Quelltext bearbeiten]
Zwar gab es bereits andere JavaScript-Lösungen dafür, aber ich habe mir dennoch eine eigene Lösung gebaut, und zwar aus folgendem Grund: Wenn man die JavaScript-Seite von jemand anderem einbindet, dann sollte man stets auch einen Wikilink auf diese Seite setzen, damit die Wiki-Software die einbindende Seite in den "Links auf diese Seite" anzeigt, und so der Autor feststellen kann, ob eine Änderung andere Benutzer betrifft. Bei den anderen Lösungen (zumindest, soweit ich sie gesehen habe) sind das Einbinden und der Wikilink zwei völlig unabhängige Aktionen (der Wikilink wird z.B. in einem JavaScript-Kommentar gesetzt), was bedeutet, dass
- es leicht ist, diesen Wikilink zu vergessen (oder ihn fehlerhaft anzulegen, ohne dass man es überhaupt mitbekommt), und
- man dieselbe Information (welche Seite man einbindet) gleich zweimal angeben muß.
Deshalb habe ich meine eigene Funktion geschrieben, die diese Aufgabe bewältigt. Als Bonus erledigt die Funktion auch alle URL-Spezialcodierungen (z.B. Umlaute) automatisch (man könnte ja beispielsweise auch eine Datei von einem Nutzer mit Umlaut einbinden wollen).
Die Funktion ist nur unter Mozilla getestet, sollte aber m.E. auf allen hinreichend aktuellen Browsern funktionieren. Es ist jedoch zu beachten, dass (wie auch bei den erwähnten anderen Lösungen) der eingebundene Code nicht an der Stelle des Funktionsaufrufes eingebunden wird, sondern erst nach dem Ende des aktuellen <script>-Tags. Da diese Funktion selbst nichts an der Seite ändert, ist sie selbstverständlich skinunabhängig.
Der Code der Funktion selbst kann natürlich nicht mit ihrer Hilfe eingebunden werden, daher hier für Interessierte der Code zum Copy&Paste:
// Original in [[Benutzer:Ce2/standard.js]] (Diese Zeile bitte mitkopieren)
/************************************/
/* Hilfsfunktion: Kodieren von UTF8 */
/************************************/
function encode_utf8(text)
{
var encoded = '';
for (var i = 0; i < text.length; ++i)
{
var codepoint = text.charCodeAt(i)
if (codepoint < 0x80)
encoded += String.fromCharCode(codepoint)
else
{
var encoded_char = ''
var lastone = 0x80;
while (codepoint >= lastone/2) // lastone=00100000 -> 1110xxxx
{
var charcode = (codepoint & 0x3f) + 0x80; // 10xxxxxx
encoded_char = String.fromCharCode(charcode) + encoded_char;
codepoint >>= 6;
lastone >>= 1;
}
var charcode = 0x100 - lastone + codepoint
encoded_char = String.fromCharCode(charcode) + encoded_char;
encoded += encoded_char;
}
}
return encoded;
}
/************************************************/
/* Javascript von einer anderen Seite einbinden */
/************************************************/
// <nowiki>
// Links werden in Wikisyntax inklusive eckiger Klammern übergeben,
// dadurch wird bei die Benutzung von der Wikipedia-Software erkannt
// und auf Spezial:Whatlinkshere aufgelistet.
// Hierbei müssen Interwiki-Links mit : eingeleitet werden (also z.B.
// [[:en:User:Foo/bar.js]], nicht [[en:User:Foo/bar.js]]. Achtung:
// Dieser Fehler wird nicht erkannt!
//
// Beispiel für die Benutzung:
// includeJS('[[Benutzer:Ce2/gibtsnet.js]]')
function includeJS(pagelink)
{
// decode the link
var decoded = /^\[\[(:(\w*):)?([^\]]*)\]\]$/.exec(pagelink)
if (!decoded || !decoded[3])
{
alert(pagelink + ' is not a valid link!')
return
}
var lang = decoded[2]
if (!lang) lang="de"
var pagename = decoded[3]
// encode the pagename
pagename = escape(encode_utf8(pagename.replace(/ /g,'_')))
// load the code
var url = 'http://' + lang + '.wikipedia.org/w/index.php?title='
+ pagename + '&action=raw&ctype=text/javascript&dontcountme=s';
document.write('<script type="text/javascript" src="'+url+'"></script>')
}
// </nowiki>
Link-Tags hinzufügen[Quelltext bearbeiten]
Dieses Modul, zu finden unter Benutzer:Ce2/JavaScript/linktags.js, erweitert das HTML um Link-Tags. Diese Link-Tags werden z.B. vom Mozilla bei aktivierter Site-Navigationsleiste (Menü Ansicht -> Anzeigen/Verstecken -> Site-Navigationsleiste bzw. in der englischen Version View -> Show/Hide -> Site Navigation Bar) ausgewertet. Diese Funktionen sind unabhängig vom Skin, nützen aber natürlich nur etwas bei Browsern, die die Tags auch auswerten. Im Einzelnen wird definiert
rel-Attribut
|
deutscher Linkname in der Navigationsleiste | Linkziel | Kommentar |
|---|---|---|---|
| start | Anfang | Wikipedia:Hauptseite | |
| help | Mehr -> Hilfe | Wikipedia:Handbuch | |
| index | Dokument -> Index | Spezial:Allpages | |
| chapter | Dokument -> Kapitel -> Kapitelname | #Kapitelname | |
| prev | Vorhergehender | Link zum vorherigen Unterschied | nur bei Diffs (bei Versionen wäre es auch schön, da fehlt aber die Auszeichnung der Links, siehe auch diesen Verbesserungsvorschlag |
| next | Nächster | Link zum nächsten Unterschied | wie bei prev |
Wahren Benutzernamen anzeigen[Quelltext bearbeiten]
Wenn ein Benutzer seine Unterschrift anpaßt, ist zuweilen nicht offensichtlich, welcher wahre Benutzername dahintersteckt. Der Code unter Benutzer:Ce2/JavaScript/showusers.js fügt hinter jedem Link auf eine Benutzerseite, dessen Linktext nicht mit dem Benutzernamen (oder demselben mit "Benutzer:" davor) identisch ist (Ein Unterschied zwischen Groß- und Kleinbuchstabe am Anfang wird ignoriert), noch einmal den korrekten Benutzernamen in Klammern hinzu. Dies passiert in einem eigenen span der Klasse loginname, so dass das Erscheinungsbild dieses Links per CSS angepasst werden kann. Beispielsweise findet sich in meiner standard.css die folgende Angabe:
/* Loginnamen kleiner anzeigen*/
span.loginname { font-weight: lighter; font-size:0.7em; font-style:oblique; }
Der Code ist skinunabhängig und sollte m.E. auch browserunabhängig sein.
Link zum Editieren der Einleitung[Quelltext bearbeiten]
Für die Einleitung gibt es keinen eigenen Bearbeiten-Link. Es gibt zwar bereits ein paar Code-Schnipsel, um dieser Tatsache abzuhelfen, aber diese scheinen unter dem Klassik-Skin nicht zu funktionieren. Deshalb habe ich eine Lösung programmiert, die skinunabhängig sein sollte (getestet habe ich sie aber nur im Klassik-Skin). Der Bearbeiten-Link wird der Hauptüberschrift hinzugefügt, analog zu den Bearbeiten-Links der Unterabschnitte. Wenn es keine Unterabschnitte gibt, wird auch kein getrennter Bearbeiten-Link für die Einleitung angelegt, da dieser funktionsgleich zum Seitenbearbeitungs-Link wäre (und außerdem hätte ich keine Vorlage zum Kopieren per JavaScript :-)). Der Code liegt unter Benutzer:Ce2/JavaScript/editintro.js; bitte bei Verwendung einen Wiki-Link im JavaScript unterbringen.
Anzeige der Zeit der letzten Bearbeitung eines Benutzers auf seiner Benutzerseite[Quelltext bearbeiten]
Dieser Code ist aufgrund einer Anfrage von Benutzer:Thire entstanden. Er fügt auf Benutzerseiten Datum und Zeit der letzten Änderung ein, und zwar direkt nach dem Benutzernamen. Das Modul befindet sich unter Benutzer:Ce2/JavaScript/showlatestedit.js und kann mit den üblichen Methoden (z.B. meiner includeJS, siehe oben) eingebunden werden. Bitte bei Einbinden gegebenenfalls einen Wikilink auf diese Datei ins JavaScript setzen (automatisch für includeJS).
Die Datumsangabe ist in einen Span der Klasse latestedit eingebunden. Der Stil kann also in der css-Datei (z.B. monobook.css) über
span.latestedit { Stil-Optionen }
gesetzt werden. Der einleitende Text für die Zeitangabe (standardmäßig "Letzter Beitrag dieses Benutzers: ") kann vom einbindenden JavaScript über
var latesteditintro = 'Text, der vor der Zeitangabe erscheinen soll: '
ersetzt werden.
Der Code sollte browser- und skinunabhängig sein.
Sperrstatus: Dieses Skript zeigt den Sperrstatus einer Seite an und hebt den Reiter „Seite bearbeiten“ entsprechend farbig hervor: Unterliegt die Seite einer Halbsperre, ist die Reiterfarbe orange und bei vollgeschützten Seiten rot. Zum Benutzen bitte folgende Zeilen in deine monobook.js einfügen:
document.write('<script src="'
+ 'http://de.wikipedia.org/w/index.php?title=Benutzer:Stefan/Sperrstatus.js'
+ '&action=raw&ctype=text/javascript"></script>');
Danke an dieser Stelle auch an ParaDox für die Hilfe beim Umsetzen meiner Idee!
Ein Script zum vereinfachten Setzen der DÜP-Vorlage[Quelltext bearbeiten]
Auf allen Dateibeschreibungsseiten wird im normalen Lesemodus durch diese Funktion ein zusätzlicher Tab (Ein Tab ist z. B. „Beobachten“) mit dem Namen „DÜP“ hinzugefügt. Klickt man auf diesen Tab, so wird ein kleines Fenster geöffnet, in dem man auswählen kann, welche Mängel vorliegen. Es erfolgt daraufhin das automatische Setzen der Vorlage:Dateiüberprüfung mit den entsprechenden Parametern. Gleichzeitig werden bisherige Einbindungen (wenn es welche gibt) von Vorlage:DÜP und Vorlage:Dateiüberprüfung herausgenommen. Beim Verweilen auf den jeweiligen Parameter-Bezeichungen wird der jeweilige Parameter nochmals per Tooltip erklärt.
Wie du diese Funktion „bekommst“, kannst du unter Wikipedia:Dateiüberprüfung/Monobook/DÜP-Setzen nachlesen.
Eigene Links[Quelltext bearbeiten]
Diese Skinmodifikation wurde für das Standardskin Monobook geschrieben und verändert nur eine Sache: Es fügt in der Navigationsleiste links am Ende eine eigene Linkliste im Monobookstil hinzu, in der eigene Links zum schnellen auffinden eingetragen werden können.
Das Skript ist ausführlich dokumentiert. Der Quellcode entstammt von Benutzer:Dbenzhuser/showRedundantLinks.js. Das Skript wurde eigentlich aus einen spezifischen Grund geschrieben, daher findet sich die Anleitung und das Skript unter:
Die neue Editleiste selbst gestalten[Quelltext bearbeiten]
Wer die neue Editleiste mit eigenen Buttons bestücken möchte (oder gar noch mehr) und sich vor einer etwas länglichen Dokumentation nicht scheut, der kann mein Skript Benutzer:Schnark/js/wikieditor.js verwenden, die Dokumentation dazu befindet sich unter Benutzer:Schnark/js/wikieditor.