Hilfe:Fortgeschrittenes CSS und JS

Hilfeseitenliste • Übersicht

Möchtest du angepassten Code für deine Community oder nur für dich persönlich einsetzen? Die Seite erklärt dir, wie du beides erreichen kannst.

Grundlegende Infos zu Anpassungen mit CSS und JavaScript findest du auf Hilfe:CSS- und JS-Anpassungen.

Spickzettel Bearbeiten

CSS Bearbeiten

Die Standardoption ist in grün hervorgehoben:

Stylesheet	Ort	betroffene Wikis	betroffene Benutzer	betroffener Skin
MediaWiki:Wikia.css	dieses Wiki	dieses Wiki	alle Benutzer	Oasis (Standard)
MediaWiki:Common.css	dieses Wiki	dieses Wiki	alle Benutzer	Oasis (Standard)
Spezial:Meine Benutzerseite/wikia.css	dieses Wiki	dieses Wiki	nur du	Oasis (Standard)
Spezial:Meine Benutzerseite/common.css	dieses Wiki	dieses Wiki	nur du	Oasis (Standard)
w:Special:MyPage/global.css	Community Central^[1]	alle Wikis	nur du	Oasis (Standard)

JavaScript Bearbeiten

Achtung: Um JavaScript auf deiner Community einsetzen zu können, muss es zunächst freigeschaltet werden. Dazu kannst du den FANDOM-Mitarbeitern eine Anfrage schicken. Mehr Informationen hierzu findest du auf Hilfe:JavaScript-Überprüfungsprozess. Ausgenommen hiervon ist MediaWiki:ImportJS (Hilfe:Einbinden von zusätzlichem CSS und JS).

Die Standardoption ist in grün hervorgehoben:

Skript	Ort	betroffene Wikis	betroffen Nutzer	betroffener Skin
MediaWiki:Common.js	dieses Wiki	dieses Wiki	alle Benutzer	Oasis (Standard)
MediaWiki:Wikia.js	dieses Wiki	dieses Wiki	alle Benutzer	Oasis (Standard)
Spezial:Meine Benutzerseite/wikia.js	dieses Wiki	dieses Wiki	einzelner Benutzer	Oasis (Standard)
Spezial:Meine Benutzerseite/common.js	dieses Wiki	dieses Wiki	einzelner Benutzer	Oasis (Standard)
w:Special:MyPage/global.js	Community Central^[1]	alle Wikis	einzelner Benutzer	Oasis

Doppeltes JavaScript

Viele Skripte können Probleme verursachen, wenn sie mehrere Male in der gleichen Seite ausgeführt werden. Code sollte also nur in einer der aufgeführten Seiten eingefügt werden, weil sonst irritierende Fehler auftreten könnten.

CSS- und JS-Fehlersuche Bearbeiten

FANDOMs CSS- und JS-Editoren haben eine aktive Fehlersuche und Syntaxhervorhebung.

Wenn du einen Code schreibst, wird dich die Seite über alle Fehler im Syntax informieren, die auftreten könnten.
Beachte, dass nicht jeder Fehler behoben werden muss - CSS (und auch JS) entwickelt sich immer und nicht alle Browser reagieren gleich: Einige Nachrichten brauchen möglicherweise keine Fehlerbehebung.
Um den Fehler einzugrenzen kannst du:
- Dein eigenes JavaScript deaktivieren, indem du ?useuserjs=0 an die URL anfügst
- Das JavaScript des jeweiligen Wiki deaktivierst, indem du ?usesitejs=0 an die URL anfügst
  - Beachte: Hast du schon ein Fragezeichen (?) in der URL, dann tausche weitere Fragezeichen mit einem & -Zeichen aus.

Bekannte Fehler Bearbeiten

CSS-Fehler
Fehler	Erklärung
`@import prevent parallel downloads, use <link> instead`	Link-Tags werden normalerweise benutzt, um CSS zu importieren. MediaWiki unterstützt das Importieren von CSS mit Link-Tags ohne JS nicht, sodass dieser Fehler normalerweise ignoriert werden kann.
`Expected X but found Y`	Das bedeutet, dass du einen ungültigen Wert für eine Eigenschaft festgelegt hast. Zum Beispiel ist in '`color: foo;`' "foo" ein ungültiger Wert für die color-Eigenschaft, weil es keine Farbe ist.
`Benutzung von !important`	`!important` sollte generell bei CSS vermieden werden, da es das Instandhalten von CSS erschwert. Außerdem lassen sich dadurch Befehle schwerer überschreiben. Meistens hilft dir eine Anzeige beim Vermeiden von `!important`
`Unknown property 'codename'`	Nicht jeder CSS-Code wird von dem Werkzeug erkannt (weil CSS selber sehr häufig aktualisiert wird). Sichere CSS-Codes können immer noch gelesen werden, wenn diese implementiert wurden (Zum Beispiel `mix-blend-mode: color-dodge;`).

Weitere Notizen Bearbeiten

Ladereihenfolge: Die generell Ladereihenfolge auf FANDOM ist: Standard-Code, danach lokaler Code der Community und danach persönlicher Code. Auf jedem Level ist die Ladereihenfolge wie folgt: Zuerst der Standard-Code und dann der Skin spezifische Code.

Seitenspezifisches CSS

Das <body>-Element einer Wiki-Seite besitzt eine CSS-Klasse, mit der man gezielt die Seite ansprechen kann. Für diese Hilfeseite wäre die CSS-Klasse:

.page-Hilfe_Fortgeschrittenes_CSS_und_JS

!important: Manchmal ist es nötig, !important zu verwenden, da der Code sonst nicht angewendet wird. In den meisten Fällen reicht es aber, die CSS-Klasse zu spezifizieren.

Häufig benutztes JavaScript: Häufig benutzte Skripte können aus der Open Source Library importiert werden.

Doppeltes JavaScript: Bei vielen Skripts treten Fehler auf, wenn sie mehrfach gleichzeitig auf einer Seite laufen. Du solltest es daher vermeiden, Code auf mehreren Seiten hinzuzufügen, die parallel geladen werden.

Auffrischen über das Bearbeiten-Menü

Es gibt im Developer Wiki ein nettes Skript, das einen PurgeButton zum Bearbeiten-Menü hinzufügt. Das erspart das eigenhändige Ändern der Adresse.

Mit Firebug testen

Verwender von Firebug können einfach herausfinden, ob eine Skript geladen wurde oder nicht, indem sie den Namen einer Variable oder Funktion des Skripts in die Konsole eingeben. Erfolgt die Ausgabe undefined, dann wird noch nicht die aktuellste Version der Seite angezeigt.

Wenn das alles nicht hilft, bleibt nur noch, geduldig zu sein. Nach ein paar Stunden sind alle Caches auch von selbst aufgefrischt worden.

Siehe auch Bearbeiten

Hilfe:Systemnachricht/Whitelist - Systemnachrichten, die derzeit bearbeitet werden können.
Hilfe:JavaScript-Überprüfungsprozess
Hilfe:Skins
Hilfe:Theme-Designer
Hilfe:Einbinden von zusätzlichem CSS und JS - Einbinden mehrere CSS- oder JS-Dateien.
Hilfe:Chat mit JavaScript und CSS anpassen - Benutze CSS und JS im Chat
Hilfe:Wie man Google Fonts importiert - Einbinden einer eigenen Schriftart.
FANDOMs Developers Wiki

Weitere Hilfe Bearbeiten

Ein Stichwortverzeichnis zu verschiedensten Hilfeseiten findest du auf Hilfe:Index.
Einen geordneten Einstieg zur Hilfe gibt es auf der Seite Hilfe:Übersicht.
Fragen an andere Benutzer kannst du im deutschen Community-Forum stellen; Diskussionen zu dieser Hilfeseite findest du hier.
Anmerkungen zu dieser Hilfeseite kannst du auf der dazugehörigen Diskussionsseite hinterlassen.
Lerne auf der Seite Fandom-Universität wie du Fandom benutzt: Kurze, informative Videos rund um Fandom.
Um die Betreiber dieser Webseite zu sprechen, lies bitte Hilfe:Kontakt!

Notizen Bearbeiten

↑ ^1,0 ^1,1 Diese Seite befindet sich im englischen Community Wiki. Dieses ist das einzige Wiki, in dem diese Seite funktioniert. Das Erstellen einer Seite mit dem gleichen Namen in einem anderen Wiki wird keinen Effekt haben.

[community-0] 1,0 ^1,1 Diese Seite befindet sich im englischen Community Wiki. Dieses ist das einzige Wiki, in dem diese Seite funktioniert. Das Erstellen einer Seite mit dem gleichen Namen in einem anderen Wiki wird keinen Effekt haben.

[1]