Hilfe:Benutzung von CSS im Wiki
Einführung
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.
Es greifen also mehrere Bausteine ineinander, um das endgültige Anzeigeergebnis hervorzurufen. Diese sind ähnlich der Zwiebelhaut in mehreren Schichten oder ähnlich wie in einem Hochhaus in mehreren Ebenen angeordnet.
Folgende Schichten oder Ebenen gibt es hier im Wiki:
| css-Ebene | Stylesheet | Editierbarkeit möglich durch |
|---|---|---|
| 1 | shared.css | Benutzer mit FTP-Zugang zum Server |
| 2 | MediaWiki:Common.css | jeder Moderator; Änderungen wirken sich auf alle Skins aus. |
| 3a | main.css des Monobook-Skins | Benutzer mit FTP-Zugang zum Server; Standard-Skin, der daher allen anonymen Benutzern angezeigt wird. |
| 3b | main-ltr.css/main-rtl.css des Vector-Skins | Benutzer mit FTP-Zugang zum Server; dieser Skin kann von angemeldeten Benutzern gewählt werden. |
| 4a | MediaWiki:Monobook.css | jeder Moderator; Standard-Skin, der daher allen anonymen Benutzern angezeigt wird. |
| 4b | MediaWiki:Vector.css | jeder Moderator; dieser Skin kann von angemeldeten Benutzern gewählt werden. |
| 5 | [[Benutzer:Benutzername/Monobook.css]]/[[Benutzer:Benutzername/Vector.css]] | jeder Benutzer kann seine eigene css anlegen, diese überlagert dann die obigen Einstellungen für den gewählten Skin (siehe Hilfe:Personalisieren des Wikiaussehens). Jeder Benutzer kann nur seine eigene css bearbeiten, mit Ausnahme von Moderatoren, die alle Benutzer-css bearbeiten können. |
Kurz gesagt:
- Es werden vier oder mehr Schichten übereinander gelegt, um das Ergebnis zu erreichen.
- Die oberste Schicht (also Ebene 4 oder mehr) überschreibt jeweils die Formatierung der unteren, sofern dort bereits ein Tag oder eine Class mit einer bestimmten Formatierung versehen wurde.
- Formatierungsanweisungen in den Schichten 1-3 werden also nur angezeigt, sofern >=4 nichts anderes festlegt.
Will man also das Aussehen von z. B. neuen Links ändern (a:new) dann kann man im Benutzer-Style "Türkisgrün" auswählen und damit alle anderen Einstellungen überschreiben. Konkret schreibt man dann folgendes:
a.new {
color: #00ffff;
}
Tipp an die Moderatoren: Damit liegt auch auf der Hand, dass alle Dinge, die dauerhaft geändert werden sollten, möglichst auf Ebene 1 oder 2 erfolgen müssen. Also entweder im HTML-Code oder im main.css.
Während Ebene 3 eigentlich ein Skin ist und nicht, wie bisher "missbraucht", die Hauptänderungsstelle für alle möglichen Anpassungen. Ein Skin ist normalerweise NUR dazu gedacht, eine persönliche Note verleihen zu können. Aufgrund der momentanen Zugangsmöglichkeit stellt allerdings MediaWiki:Monobook.css die einzige Stelle dar, an der Moderatoren auch was ändern können. Damit wird aber das Skin-Konzept ausgehebelt und alle hier gemachten Änderungen sind bei anderer Skinwahl unsichtbar.
Ebene 4 soll dann nur kleine weitergehende Modifikationen zum gewählten "Skin" ermöglichen bzw. dem Benutzer die Möglichkeit bieten, alles nach seinen Wünschen anzupassen (sofern er die notwendigen Kenntnisse mitbringt).
Gleichzeitig ist momentan für Moderatoren keine Möglichkeit gegeben, andere Skins außer Monobook.css zu bearbeiten.
Wie kann man einen Style ändern?
Für den normalen Benutzer sind nur Änderungen auf Ebene 4 möglich. Dazu muss er:
- eine Unterseite zu seiner Benutzerseite anlegen: Benutzer:Benutzername/Monobook.css also z.B. Benutzer:AlrikOhnegrund/Monobook.css
- in dieser Seite wird einfach anstatt Text wie sonst der pure CSS-Code eingetragen
- mit Kommentaren im C-Style also /* ... */ kann man Teile auskommentieren oder sich selbst eine Gedächtnisstütze geben, was das ganze jetzt eigentlich bedeuten soll (und damit auch anderen Nutzern, die das lernen wollen)
Wenn du der Meinung bist, dass dein Style besonders toll ist, kannst du es einem Admin mitteilen, der es dann in einer der oberen Ebene verankern und damit für alle Benutzer zugänglich machen kann.
Was kann ich alles ändern?
Im Prinzip kann die gesamte Formatierung auf eigene Wünsche zugeschnitten werden.
Dazu sind allerdings vertiefte Kenntnisse nötig, was es für Elemente gibt und natürlich wie die eigentliche Veränderung auszusehen hat, um das Ziel erreichen zu können.
Hier trotzdem einen kleinen Überblick und Vorgeschmack über die Möglichkeiten:
- Das gesamte Navigationsmenü anders platzieren (rechts/links/oben/unten)
- Das gesamte Navigationsmenü umformatieren und/oder mit eigenen Links ausstatten
- Du wolltest immer schon im Navigationsmenü einen Link zu einer speziellen Seite? kein Problem
- Dich stören die Bilder oder sie sehen nicht so aus, wie du sie gerne hättest (Größe, Umrandung)
- Die Farbwahl ist dir nicht poppig genug?
- Tabellen sehen nur schön aus, wenn sie deiner Farbwahl entsprechen?
- Du fandest das typische Wiki-Aventurica-Gelb immer schon hässlich?
- Du hast eine Abneigung gegen den Farbton Rosa?
- usw.
Weitere Informationen
Vertiefte Informationen zu CSS und was die einzelnen Befehle bedeuten gibt es auf der Seite de.SelfHTML.org.
Gibt es einen einfacheren Wege, CSS auszuprobieren?
Das gibt es tatsächlich. Für den Browser Firefox gibt es einen Addon siehe auch Wiki Aventurica:Werkzeuge mit dem die CSS-Styles in Echtzeit editiert und das Ergebnis sofort betrachtet werden kann.
Konkrete Infos zu einzelnen Klassen
Hier sollten nach und nach die einzelnen Klassen erklärt werden, damit man sich nicht langwierig einarbeiten muss. Wenn jeder seine gesammelten Kenntnisse einträgt, wird es für andere Bearbeiter einfacher.
Die notwendigen Informationen kann man durch ausprobieren mit der Echtzeit-Editierfunktion mit Firefox feststellen (siehe oben) oder man entnimmt sie dem HTML-Code der Seite, die man gerade betrachten ("Seitenquelltext betrachten" bzw. "(View) Page source" im Browser anwählen).
Einfache Tags
| 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 |
Teilweise aus Einträgen im Namensraum Mediawiki:, die allerdings nur von Administratoren geändert werden können.
Anscheinend ist zu einer Veränderung der Navigationsleiste aber eine Modifikation des PHP-Codes notwendig, was dann eigentlich nur noch der Webmaster verändern kann. Momentan ist außer Benutzer:Wikiadmin niemand dazu berechtigt.
- Mit dem kommenden Update kann man das Aussehen sehr flexibel auf Mediawiki:Sidebar ändern. Wer dort keine Schreibrechte hat, kann auf der Diskussionsseite Vorschläge zu Änderungen machen.
Formatierung mit CSS
CSS-Tutorial von de.selfhtml.org
| Was angezeigt werden soll | Wiki-Tag | Kommentar | entsprechender HTML-Code |
|---|---|---|---|
grüner Text
|
<div style="color:#00ff00">grüner</div> Text | im Prinzip kann man alles auch mit CSS machen | genauso, eigentlich aber mit <span ...></span> |
| Schriftart Nanduria
|
Schriftart <div style="font-family:'Nanduria';">Nanduria</div | eigentlich sollten auch andere Schriften dargestellt werden können aus unerfindlichen Gründen klappt das leider nicht |
genauso |
| Text farblich hervorheben | Text<span style="background:#ffff99">farblich</span> hervorheben | im Prinzip kann man alles auch mit CSS machen | genauso, eigentlich aber mit <span ...></span> |
| <div class=xyz>...</div> | Eine vordefinierte CSS-Klasse benutzen. Erleichtert die Änderung von Schriftart, Farbe, etc. erheblich | genauso | |
| <div style=...>...</div> | siehe obiges ausführliches CSS-Tutorial | genauso |
