Dank Wikias Tools und informativer Blogs können schon viele Benutzer portable Infoboxen (abgekürzt: PI) erstellen. Mit etwas Übung sind Bilder, verschiedenste Daten oder Unterüberschriften gar kein Problem. Doch damit ist nur der erste Teil vom Erstellen einer Infobox getan. Oft braucht es mehr als nur den Code auf der Vorlagenseite, es wird CSS benötigt.
CSS
CSS ist neben der PI-Sprache ein elementarer Bestandteil beim Entwickeln von portablen Infoboxen. Der Code auf der Vorlagenseite wird für das Layouten der Infobox, also zum Beispiel Anordnung von Bildern und Daten, verwendet. CSS wird hingegen für das Designen, also das Anpassen des Aussehens, wie Hintergrundfarben oder Schriftgrößen, verwendet.
Bei vielen unportablen Infoboxen wird das CSS über das "style"-Attribut definiert, was Inline-CSS genannt wird und generell als unportabel angesehen wird. Stattdessen findet das MediaWiki-CSS bei portablen Infoboxen Verwendung, was weitaus portabler ist. Nicht nur die Portabilität ist ein Vorteil von MediaWiki-CSS, es gibt viele andere Vorteile, die ich bereits in meinem Blog dazu erklärt habe.
Da CSS so ein wichtiger Bestandteil ist, stellt Wikia dafür vordefiniertes CSS in Form des Europa-Themes zur Verfügung. Da jedes Wiki einzigartig ist, werden meist kleinere oder gleich größere Anpassungen benötigt.
Das Europa-Theme
Das typische Europa-Design mit Bisasam
Wie bereits erwähnt, ist das Europa-Theme eine Funktion, mit der vordefiniertes CSS hinzugefügt wird. Grundsätzlich ist das CSS in jedem Wiki gleich, mit dem Unterschied, dass die Farben sich immer der Farbgebung des Wikis anpassen. Es ist optional und lässt sich jederzeit per Wiki-Funktionen aktivieren und deaktivieren.
Charakteristisch für das Europa-Theme sind die großen, zentrierten Überschriften mit großem Abstand zum Rand. Für einige Wikis reicht das Theme an sich, andere Wikis wollen kleinere Anpassungen vornehmen, während manche Wikis originellere Designs bevorzugen.
Die Wikis, denen das Theme so gefällt, wie es ist, brauchen keine weiteren Anpassungen vornehmen. Falls kleinere Änderungen nötig sind, reicht es, das Theme aktiviert zu lassen und seine Klassen mit MediaWiki-CSS zu verändern. Wenn das Wiki ein ganz anderes Wunschtheme hat, lohnt es sich wahrscheinlich, Europa zu deaktivieren und die Infoboxen neu zu stylen.
Anpassungen an Infoboxen
Infoboxen haben in allen Wikis einheitliche CSS-Klassen. Somit kann das CSS eines Wikis in ein anderes Wiki kopiert werden und es wird identisch aussehen, sofern Europa entweder in beiden Wikis aktiviert oder deaktiviert ist. Wie schon zu vermuten ist, unterscheidet sich das CSS mit und ohne Europa.
CSS-Selektoren ohne Europa
Ein Selektor für portable Infoboxen ohne Europa beginnt immer mit der Klasse .portable-infobox.
Will man zum Beispiel den Titel modifizieren, wird noch ein .infobox-title angefügt. Das Endprodukt wäre dann beispielsweise .portable-infobox .pi-title.
CSS-Selektoren mit Europa
Selektoren für portable Infoboxen mit Europa werden mit .pi-europa angefangen.
Soll hier der Titel modifiziert werden, wird auch einfach ein durch .pi-title abkürzbares .portable-infobox-title angehangen, womit das Endprodukt zum Beispiel .pi-europa .pi-title sein kann.
Theme-Selektoren
Theme-Selektoren funktionieren unabhängig von Europa
Um eigene Themes einzufügen, wird .portable-infobox oder .pi-europa durch .pi-theme-Themename ersetzt, wobei „Themename“ durch den Namen des Themes ersetzt wird. Der Selektor könnte dann .pi-theme-Themename lauten.
Auch hier kann der Titel entsprechend durch das Ergänzen von .pi-title verändert werden, womit ein mögliches Endprodukt .pi-theme-Themename .pi-title wäre.
Der Vorteil dieser Selektoren ist, dass sie unabhängig von Europa funktionieren und das CSS daher nicht umgeschrieben werden muss, wenn Europa aktiviert oder deaktiviert wird.
Eigene Themes
Bei portablen Infoboxen besteht die Möglichkeit, ein Theme für die Infobox hinzuzufügen. Dabei ist dieses Theme kein Theme im Sinne von Europa, sondern ändert die Infobox so, dass sie auf spezielles CSS reagiert.
Die Frostrune hat eine Infobox mit einem ganz speziellen Design
<infobox>-Tag erhält ein "theme"-Attribut und kann dann so aussehen: <infobox theme="Themename">. „Themename“ kann durch einen anderen Namen ersetzt werden, der bestenfalls logisch mit der Infobox zusammenhängt, wie zum Beispiel das Theme „Charakter“ für eine Charakterinfobox.
Eine Infobox mit dem Theme „Themename“ wird durch allgemeine Selektoren wie .portable-infobox oder .pi-europa und spezifische Selektoren mit Klassen wie .pi-theme-Themename oder .pi-europa .pi-theme-Themename beeinflusst. Dabei wird das allgemeine CSS gegebenenfalls durch das spezifische CSS überschrieben. Selektoren mit anderen Themenamen wie „andererThemename“ wirken auf diese Infobox gar nicht.
Solche Themes haben den Vorteil, dass eine Infobox anders als eine andere Infobox aussehen kann. Dabei sollte aber die Einheitlichkeit im Wiki nicht außer Acht gelassen werden, weshalb nur kleinere Unterschiede wie Farben und keine größeren Unterschiede wie Breiten bestehen sollten. Es bietet sich an, das CSS, das bei allen Infoboxen gleich ist, auf einen allgemeinen Selektor anzuwenden und dann nur die kleinen Unterschiede mithilfe von spezifischen Selektoren zu verändern.
CSS-Klassen
Natürlich sind nicht nur Titel modifizierbar, es gibt auch viele andere modifizierbare Elemente. Beispiele dafür sind Bilder, Daten, Label, Werte oder Header. Viele wichtige Klassen dafür werden hier aufgeführt und deren Modifikationen mit Beispielen erklärt.
Kein Element
Falls nur .portable-infobox, .pi-theme-Themename oder .pi-europa der Selektor sind, wird die gesamte Infobox angepasst. Häufig angepasst werden dabei der Rand der Infobox (border:1px solid red;), ihre Breite (width:300px;) und der Abstand zwischen Inhalt und Rand (padding:2px 4px 2px 1px;) angepasst.
.pi-background
.pi-background wird verwendet, um den Hintergrund der gesamten Infobox zu definieren. Dieser ist immer dort sichtbar, wo er nicht durch andere Elemente mit eigenem Hintergrund verdeckt wird. Der Hintergrund wird per background (background:transparent;) definiert und kann Farbnamen, Farbwerte (Hexadezimal, RGB, HSL) oder auch Bilder annehmen.
.pi-title
Der Titel von Infoboxen wird mit .pi-title verändert. Hierbei werden meist sein Hintergrund (background:black;), die Schriftgröße (font-size:18px; und line-height:22px;), die Schriftart (font-family:Comic Sans MS;), die Schriftdicke (font-weight:bolder;), die Schriftfarbe (color:green;) oder der Abstand vom Rand zum Inhalt (padding:6px;) angepasst.
Die Größe des Bildes bei Skooma wurde durch max-height verkleinert, damit es nicht zu viel Platz einnimmt.
.pi-image
Obwohl der Name fälschlicherweise darauf hindeutet, ist .pi-image nicht für das Bild an sich, sondern für seinen Behälter verantwortlich. Manchmal werden hier der Hintergrund (background:blue;), der Rand (border:2px dashed orange;) oder der Abstand vom Rand zum Inhalt (padding:2px 0;) justiert.
.pi-image-thumbnail
Die echte zuständige Klasse für das Bild ist .pi-image-thumbnail. An ihr werden üblicherweise nur eine variable Anpassung und einige statische vorgenommen: width:auto;height:auto;max-width:100% als statischer Teil und die maximale Bildhöhe (max-height:400px;) als variabler Teil, damit Bilder nicht zu viel vertikalen Platz in der Infobox einnehmen.
.pi-header
Mit .pi-header werden die Unterüberschriften angepasst. Meist haben sie das gleiche Design wie der Titel mit einer kleineren Schriftgröße, also kann das CSS des Titels einfach kopiert und leicht angepasst werden.
.pi-border-color
Selbst die Ränder zwischen den Daten haben mit .pi-border-color ihre eigene Klasse. Hierbei werden zumeist die Randfarbe (border-color:gray;) und die Randdicke (border-width:2px;) angepasst, aber falls diese Ränder überhaupt nicht erwünscht sind, wird einfach border-style:none; verwendet.
.pi-data
.pi-data ist für die Daten die richtige Klasse. Es werden manchmal der Abstand zu anderen Datas (margin-bottom:2px;) und der Abstand vom Inhalt zum Rand (padding:1px 0;) verändert.
.pi-data-label
Wie der Name schon andeutet, ist .pi-data-label für die Labels in Datas, also sozusagen die linke Spalte zuständig. Schriftgröße (font-size:14px; und line-height:16px;), Schriftdicke (font-weight:700;), Schriftfarbe (color:pink;), Rand (border-right:2px solid cyan), Abstand vom Rand zum Inhalt (padding:3px;) und Breite (flex-basis:125px;) sind meist heiße Kandidaten für Veränderungen.
.pi-data-value
Und auch hier gibt der Name schon her, dass für die Werte von Daten, also die rechte Spalte, .pi-data-value zuständig ist. Die möglichen Anpassungen sind, bis auf den Rand, mit denen von .pi-data-label identisch. Falls die Summe der Breiten von Label und Wert zu breit sind, verdrängt der Wert so viel Platz wie nötig.
Schlusswort
Das war es auch mit diesem Blog-Beitrag über CSS-Anpassungen an Infoboxen. Feedback ist wie immer in den Kommentaren erlaubt und erwünscht. Ich hoffe, dass du Spaß beim Lesen hattest und das Eine oder Andere gelernt hast. Vielen Dank für das Lesen und viel Spaß mit portablen Infoboxen!
