Hilfe:Benutzung von CSS im Wiki: Unterschied zwischen den Versionen
K (ü die Zweite; die Beispiele müsste man noch überarbeiten und ausbauen.) |
(Formatfehler korrigiert) |
||
(9 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt) | |||
Zeile 16: | Zeile 16: | ||
|- | |- | ||
|1 | |1 | ||
|[http:// | |[http://de.wiki-aventurica.de/de/skins/common/shared.css shared.css] | ||
|Benutzer mit [[Wpde:File Transfer Protocol|FTP]]-Zugang zum Server; wird für alle [[Hilfe:Skin|Skins]] verwendet | |Benutzer mit [[Wpde:File Transfer Protocol|FTP]]-Zugang zum Server; wird für alle [[Hilfe:Skin|Skins]] verwendet | ||
|- | |- | ||
Zeile 23: | Zeile 23: | ||
|jeder [[:Kategorie:Moderator|Moderator]]; Änderungen wirken sich auf alle Skins aus. | |jeder [[:Kategorie:Moderator|Moderator]]; Änderungen wirken sich auf alle Skins aus. | ||
|- | |- | ||
| | |3 | ||
|[http:// | |Vorgegebene CSS des gewählten Skins: | ||
|Benutzer mit [[Wpde:File Transfer Protocol|FTP]]-Zugang zum Server | *Vector: [http://de.wiki-aventurica.de/de/skins/vector/main-ltr.css main-ltr.css]/[http://de.wiki-aventurica.de/de/skins/vector/main-rtl.css main-rtl.css] (Standard) | ||
*Monobook: [http://de.wiki-aventurica.de/de/skins/monobook/main.css main.css] | |||
|Benutzer mit [[Wpde:File Transfer Protocol|FTP]]-Zugang zum Server. | |||
|- | |- | ||
| | |4 | ||
|[ | |Angepasstes CSS des gewählten Skins: | ||
| | *[[MediaWiki:Vector.css|Vector.css]] | ||
*[[MediaWiki:Monobook.css|Monobook.css]] | |||
*[[MediaWiki:Mobile.css|Mobile.css]] | |||
|jeder [[:Kategorie:Moderator|Moderator]]. | |||
|- | |- | ||
| | |5 | ||
|[[MediaWiki: | |[[Wiki Aventurica:Benutzergruppen|Gruppenabhängiges]] CSS: | ||
*[[MediaWiki:Group-user.css|Group-user.css]] (für angemeldete Benutzer) | |||
|- | *[[MediaWiki:Group-autoconfirmed.css|Group-autoconfirmed.css]] (für angemeldete Benutzer der "Autoconfirmed"-Gruppe), | ||
| | *[[MediaWiki:Group-bot.css|Group-bot.css]] (für Bots) | ||
*[[MediaWiki:Group-widgeteditor.css|Group-widgeteditor.css]] (für Widgetbearbeiter) | |||
|jeder [[:Kategorie:Moderator|Moderator]] | *[[MediaWiki:Group-sysop.css|Group-sysop.css]] (für Moderatoren) | ||
*[[MediaWiki:Group-bureaucrat.css|Group-bureaucrat.css]] (für Bürokraten) | |||
|jeder [[:Kategorie:Moderator|Moderator]]. | |||
|- | |- | ||
| | |6 | ||
|< | | | ||
|jeder Benutzer kann seine eigene css anlegen, diese | [[Spezial:Meine Benutzerseite/common.css|Benutzer:Benutzername/common.css]]<br /> | ||
[[Spezial:Meine Benutzerseite/vector.css|Benutzer:Benutzername/vector.css]]<br /> | |||
[[Spezial:Meine Benutzerseite/monobook.css|Benutzer:Benutzername/monobook.css]]<br /> | |||
|jeder Benutzer kann seine eigene css anlegen, diese ergänzt dann die obigen Einstellungen für alle Skins <small>(common.css)</small> oder den gewählten Skin <small>(monobook.css / vector.css)</small>; im Konfliktfall zwischen allgemeiner und persönlicher CSS-Einstellungen haben die persönlichen Einstellungen Vorrang (siehe [[Hilfe:Personalisieren des Wikiaussehens]]).<br />Jeder Benutzer kann nur seine eigene css bearbeiten, mit Ausnahme von Moderatoren, die alle Benutzer-css bearbeiten können. | |||
|} | |} | ||
Daneben gibt es noch [[MediaWiki:noscript.css|noscript.css]] (für Nutzer, die javascript deaktiviert haben), [[MediaWiki:Filepage.css|Filepage.css]] (für die Darstellung von Dateibeschreibungsseite), [[MediaWiki:Geshi.css|Geshi.css]] (für die Syntaxhervorhebung durch [[med:Extension:SyntaxHighlight|Extension:SyntaxHighlight]]), [http://www.wiki-aventurica.de/skins/common/commonPrint.css commonPrint.css] und [[MediaWiki:Print.css]] (für die Druckansicht) sowie [http://www.wiki-aventurica.de/skins/common/diff.css diff.css] (für die Änderungsanzeige). [[MediaWiki:Handheld.css]] wurde früher für mobile Geräte verwendet. | |||
Dank [[med:Extension:CSS|Extension:CSS]] ist es auch möglich, CSS nur auf bestimmten Seiten einzufügen. Z.B. könnte man die Hintergrundfarbe ändern... | |||
<pre> | |||
{{#css: | |||
body { | |||
background: pink; | |||
} | |||
}} | |||
</pre> | |||
==Mögliche Änderungen== | ==Mögliche Änderungen== | ||
Zeile 107: | Zeile 128: | ||
==Links== | ==Links== | ||
*[[Hilfe:Personalisieren des Wikiaussehens]] - Personalisieren mittels CSS | |||
*[http://de.selfhtml.org/css de.SelfHTML.org] - Hilfe zu css und html | *[http://de.selfhtml.org/css de.SelfHTML.org] - Hilfe zu css und html | ||
*[http://validator.w3.org/ validator.w3.org] - Tool zum Überprüfen einer Webseite auf Konformität zu [[wpde:HTML5|HTML5]] | |||
[[Kategorie:Hilfe für Moderatoren]] | [[Kategorie:Hilfe für Moderatoren]] |
Aktuelle Version vom 1. März 2024, 08:41 Uhr
Einführung[Quelltext 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[Quelltext 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 |
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[Quelltext 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[Quelltext 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[Quelltext bearbeiten]
- Hilfe:Personalisieren des Wikiaussehens - Personalisieren mittels CSS
- de.SelfHTML.org - Hilfe zu css und html
- validator.w3.org - Tool zum Überprüfen einer Webseite auf Konformität zu HTML5