Hilfe:CSS

Hilfeseiten
Allgemein: Erste Schritte Auskunft Einstellungen Tipps und Tricks
Seitengestaltung Artikel VisualEditor Bearbeitungshilfe Neuen Artikel anlegen Links Trivia Zitate und Quellen Dateien Bilder Sprites Pokémon-Ids Videos Audio Vorlagen Übersicht Farben Formatvorlagen ParserFunctions Tabellen Toggle Variablen Variables Kategorien
Community: Diskussionsseiten Abstimmungen Signatur Benutzerseiten Benutzergruppen
Spezielles: CSS Versionen kontrollieren

Jeder registrierte Benutzer hat die Möglichkeit, den in den Einstellungen ausgewählten Skin anzupassen. Der Standard-Skin ist „PokéWiki“. Man kann aber auch alle anderen Skins auf diese Weise anpassen.

Dazu benötigt man ein gewisses Grundwissen von Javascript (JS) und Cascading Style Sheets (CSS). Sein eigenes Skript befindet sich jeweils hier:
Benutzer:Dein Name/pokewiki.js/.css.
Auf diesen Seiten kannst du ganz normales JS/CSS schreiben, welches dann für dich auf allen Seiten eingebunden wird.

Design-Tipps

Runde Ecken

Standardmäßig werden Boxen wie die Navigationsleisten mit gering runde Ecken angezeigt. Wer diese anders angezeigt haben möchte, kann sich folgendes in sein pokewiki.css einbauen.

.navigationsleiste, .navigationsleiste th {
  border-radius: 1em; // andere Browser mit CSS3-Unterstüzung
  -moz-border-radius: 1em; // Firefox
}

Auch sind statt 1em andere Größenangaben möglich. 1em ist genau die Größe der Schrift, daher ist diese Einheit sehr einfach und skaliert gut. Alternativwerte sind zum Beispiel 0.5em, 1.5em, aber auch genaue Pixelangaben sind möglich, wie 10px, 15px usw. AUch 0 zur Abschaltung der runden Ecken ist möglich.

Letzte Änderungen

Mit diesem CSS werden die "Unterschied"-Links auf der Seite der letzten Änderungen durchgestrichen, die du bereits gesehen hast. Das eignet sich vor allem für Leute (Admins), die möglichst alle Änderungen mitverfolgen möchten.

.page-Spezial_Letzte_Änderungen #bodyContent li a:visited {
  color: #2222d0 !important;
}
.page-Spezial_Letzte_Änderungen #bodyContent li > a:first-child:visited {
  color: #7d7dff !important;
  font-size:96%;
  text-decoration:line-through;
}