Hilfe:Benutzung von CSS im Wiki

aus Wiki Aventurica, dem DSA-Fanprojekt
Wechseln zu: Navigation, Suche
Hilfe

Ansprechpartner

Hilfe für Leser
FAQ - Suche im Wiki - Navigieren im Wiki
Wiki-Inhalte offline benutzen
Optimale Darstellung des Wikis
Personalisieren des Wikiaussehens

Hilfe für neue Autoren
Seite bearbeiten - Tutorium
Anleitung zu den Letzten Änderungen
Feeds der Wikiänderungen
Produktartikel erstellen
Richtlinien zur Mitarbeit

Seiten bearbeiten
Erstellen neuer Artikel
Editierhilfe
Erzeugen von Links
Einbinden von Bildern
Tabellenformatierung

Konventionen
Abkürzungen
Artikelformat
Kommentare zu bearbeiteten Seiten
Typographie
Inhaltliche Richtlinien
Erstellen neuer Artikel
Nomenklatur und Syntax für Quellenangaben
Kategorisierung des Wikis
Meisterinformationen

Weiterführende Seiten
Vorlage
Infobox
Kategorie
Namensraum
DPL
Roboter
Benutzung von CSS im Wiki
Links per CSS mit eigenen Grafiken versehen
Exceltabellen ins Wiki kopieren
Hilfeseiten der Wikipedia

Einführung[Bearbeiten]

CSS bedeutet "Cascaded Style Sheets" und ist eine Webseiten-Formatierungssprache, die zusätzlich zu der eigentlichen Internetseitensprache "HTML" benutzt wird. Die meisten neueren Anzeigeprogramme (Web-Browser) unterstützen CSS. Allerdings ist gerade der Internet-Explorer <7.0 berüchtigt für falsche Darstellungen im Sinne von fehlerhafter Interpretation des CSS-3.0-Standards.

Das heißt:

  • Der Computer ruft vor dem Anzeigen der jeweiligen Seite den HTML-Quelltext ab.
  • Dann ruft er die eingebundenen CSS-Dateien ab.
  • Dann erzeugt er abhängig von den dort gemachten Formatierungsanweisungen die Artikelansicht, so wie sie im Browser gezeigt wird.

Dabei werden die css-Ebenen übereinander gelegt, wobei die Einstellungen der unteren Schichten durch die der oberen Schichten überschrieben werden können; wenn bspw. die Schriftfarbe für externe Links in mehreren css-Dateien definiert ist, wird die Einstellung verwendet, die aus der obersten Schicht kommt.

css-Ebenen im Wiki[Bearbeiten]

css-Ebene Stylesheet Editierbarkeit; Auswirkungen
1 shared.css Benutzer mit FTP-Zugang zum Server; wird für alle Skins verwendet
2 MediaWiki:Common.css jeder Moderator; Änderungen wirken sich auf alle Skins aus.
3 Vorgegebene CSS des gewählten Skins: Benutzer mit FTP-Zugang zum Server.
4 Angepasstes CSS des gewählten Skins: jeder Moderator.
5 Gruppenabhängiges CSS: jeder Moderator.
6

Benutzer:Benutzername/common.css
Benutzer:Benutzername/vector.css
Benutzer:Benutzername/monobook.css

jeder Benutzer kann seine eigene css anlegen, diese ergänzt dann die obigen Einstellungen für alle Skins (common.css) oder den gewählten Skin (monobook.css / vector.css); im Konfliktfall zwischen allgemeiner und persönlicher CSS-Einstellungen haben die persönlichen Einstellungen Vorrang (siehe Hilfe:Personalisieren des Wikiaussehens).
Jeder Benutzer kann nur seine eigene css bearbeiten, mit Ausnahme von Moderatoren, die alle Benutzer-css bearbeiten können.

Daneben gibt es noch noscript.css (für Nutzer, die javascript deaktiviert haben), Filepage.css (für die Darstellung von Dateibeschreibungsseite), Geshi.css (für die Syntaxhervorhebung durch Extension:SyntaxHighlight), commonPrint.css und MediaWiki:Print.css (für die Druckansicht) sowie diff.css (für die Änderungsanzeige). MediaWiki:Handheld.css wurde früher für mobile Geräte verwendet.

Dank Extension:CSS ist es auch möglich, CSS nur auf bestimmten Seiten einzufügen. Z.B. könnte man die Hintergrundfarbe ändern...

{{#css:
  body {
    background: pink;
  }
}}

Mögliche Änderungen[Bearbeiten]

Im Prinzip kann die gesamte Formatierung auf eigene Wünsche zugeschnitten werden.
Dazu braucht man allerdings Kenntnisse über die vorhandenen Elemente und die nötigen Änderungen; das CSS-Tutorial von de.selfhtml.org ist eine gute Anlaufstelle, um sich diese anzueignen.

Beispiele[Bearbeiten]

class bzw. HTML-Tag Bedeutung Beispielformatierung Was kann man daran ändern
bzw. Vorschläge
a damit werden alle Links formatiert
a { 
  text-decoration: none; 
  color: #995522;
  font-weight: bold;
  }
man kann das Aussehen von Links entweder global ändern oder sogar spezifisch auf bestimmte Links eine Anpassung machen. Siehe auch Hilfe:Links per CSS mit eigenen Grafiken versehen
a:active
a:visited
damit werden alle geklickten
alle besuchten Links formatiert
/* on-click-Event */
a:active { 
	text-decoration: underline; 
	color: #995522;
	font-weight: bold;
	}
a:visited {  
	text-decoration: none; 
	color: #995522;
	font-weight: bold;
	}
man kann das Aussehen von Links entweder global ändern oder sogar spezifisch auf bestimmte Links eine Anpassung machen. Siehe auch Hilfe:Links per CSS mit eigenen Grafiken versehen
a:new
a:hover
damit werden alle neuen (nicht ex.Artikel)
bzw. Tooltipps (mit Maus drüber fahren) Links formatiert
/* rot für "neue Artikel" */
a.new {  
         color: #FF8000; 
      }
/* on-mouse-over-Event=Tooltips*/
a:hover {
	text-decoration: underline; 
	color: #995522;
	font-weight: bold;
	}
man kann das Aussehen von Links entweder global ändern oder sogar spezifisch auf bestimmte Links eine Anpassung machen. Siehe auch Hilfe:Links per CSS mit eigenen Grafiken versehen
class="extiw" Formatierung der (externen) InterWiki-Links, also alles was zu einem anderen Wiki führt (sofern es zum Interwikiverbund gehört)
#bodyContent a.extiw,
#bodyContent a.extiw:active {
    color: #3366bb;
    background: none;
    padding: 0;
}
s.o. Farbe, Icon, etc.
body die Darstellung des Seiteninhalts z. B. auch Hintergrundbilder, etc. Hintergrund, etc. verändern

Links[Bearbeiten]