Diese Vorlage dokumentiert die verwendeten CSS-Klassen in Modulen und Vorlagen rund um die Quickbar.

Jedes einzelne Informationsfeld der Quickbar lässt sich über CSS individuell gestalten, entweder zentral über die Systemdatei Mediawiki:common.css oder über benutzerspezifische Einstellungen Benutzer:<Dein Name>/common.css. Für Programmierer ist es damit auch möglich, an jedem Feld per Javascript Änderungen vorzunehmen und Werkzeuge zu programmieren.

Die gesamte Quickbar (<table>...</table>) besitzt drei Klassen.

• voy-qb – Immer vorhanden ist die Klasse qb. Über diese kann man jede Infobox beeinflussen.
• voy-qb-ort - Alle Orts-Quickbars, die direkt oder indirekt über diese Vorlage eingebunden sind, besitzen diese Klasse
• voy-qb-<top-level-domain> – Zusätzlich gibt es eine landesspezifische Klasse, die die Top-Level-Domain beinhaltet. Alle Artikel über Deutschland haben in ihrer Quickbar somit zusätzlich die Klasse voy-qb-de hinterlegt. Lässt sich keine TLD ermitteln, heißt die Klasse qb-unknown-tld.

Jede Zeile einer Quickbar besitzt eine allgemeine und eine eigene Klasse.

• voy-qb-item – Klasse, die alle Zeilen einer Infobox-Tabelle besitzen.

• voy-qb-item-capital – Diese Zeile zeigt die Hauptstadt an.
• voy-qb-item-website – Diese Zeile zeigt die offizielle Webseite an.
• voy-qb-item-population – Diese Zeile zeigt die Einwohnerzahl an.

Jede Spalte einer Zeile der Quickbar (<tr>...</tr>) hat eine individuelle Klasse, über die die Formatierungen angewendet werden können. Zusätzlich haben alle Spalten jeder Zeile eine individuelle Klasse:

• voy-qb-item-key – Erste Spalte mit der Eigenschaftsbezeichnung (standardmäßig fett geschrieben)
• voy-qb-item-value1 – Erste (und in der jetzigen Quickbar Ort im Regelfall einzige) Spalte mit einem Wert.
• voy-qb-item-value2 – weitere Spalte
• voy-qb-item-value3 – weitere Spalte

Bei Bildern gibt es nur eine Tabellenzelle mit einem Div-Tag

• voy-qb-item-image – Klasse des <div>...</div>. Die Positionierung der Bilder erfolgt dann über Flexboxen.

Die value-Spalten haben noch eine oder mehrere Klassen, wenn Daten aus Wikidata bezogen wurden.

• voy-wikidata-content – Zusätzliche Klasse, wenn die angezeigten Daten aus Wikidata stammen. Diese Klasse ist nicht auf die Quickbars beschränkt und kann überall im Artikel auftauchen.
• voy-qb-item-value-nowikidata – Über Wikidata konnten keine Daten ermittelt werden. Es ist kein Objekt vorhanden, oder die gewünschte Information ist im Objekt nicht verfügbar.
• voy-qb-item-value-wikidata-equal – Es gibt die Information auf Wikidata und es wirde ein lokaler Wert in der Quickbar angegeben (der auch angezeigt wird). Diese Klasse zeigt an, dass beide Werte identisch sind.
• voy-qb-item-value-wikidata-noequal – Es gibt die Information auf Wikidata und es wirde ein lokaler Wert in der Quickbar angegeben (der auch angezeigt wird). Diese Klasse zeigt an, dass sich beide Werte unterscheiden.

Beispiele:

• .voy-qb-item-population .voy-qb-item-value1 { color:blue; font-style:italic; } – Die Einwohnerzahl wird blau und kursiv dargestellt.
• .voy-qb-item-value-wikidata-equal { color:green; font-weight:bold; } – Einträge werden grün und fett dargestellt, wenn sie lokal angegeben wurden und identisch mit Wikidata sind.
• .voy-qb-item-value-wikidata-noequal { color:red; font-weight:bold; } – Einträge werden rot und fett dargestellt, wenn sie lokal angegeben wurden sich von Wikidata unterscheiden.

Siehe auch:

• Wikivoyage:CSS-Klassen – Dokumentation der CSS-Klassen auf Wikivoyage