Wikivoyage:CSS-Klassen

Diese Seite dient der Dokumentation der auf Wikivoyage verwendeten CSS-Klassen. Benutzer können sich damit das Outfit des Wikis anpassen und Anwendungen programmieren. Historisch bedingt herrscht auf Wikivoyage (noch) ein unübersichtlicher Zoo an Klassen. Irgendwann soll dies vereinheitlicht werden. Auf dieser Seite sind bis auf einige allgemeine Standard-Klassen nur die Klassen definiert, die mit dem künftig bevorzugten Präfix voy- beginnen.

Standard-CSS-Klassen auf Wikivoyage

Die folgenden Klassen sind standardisiert und können auf allen Seiten verwendet werden.

Standard-CSS-Klassen auf Wikivoyage
CSS-Klasse(n)	CSS-Datei	Bemerkungen
`nomobile`	–	Entfernt das Element auf mobilen Endgeräten. Mit dieser Klasse versehene Elemente werden bereits auf Ebene des Parsers herausgefiltert und erreichen somit nie das Endgerät und können daher auch nicht mehr mittels CSS oder JavaScript eingeblendet werden. Zum Testen der Funktionalität kann der URL-Parameter `useformat=mobile` benutzt werden.
`notpageimage`	–	Die Klasse verhindert, dass ein Bild als Vorschaubild für den Artikel benutzt wird. Beispiel: `[[File:Example.png\|class=notpageimage]]` ^[1]^[2]
`mw-collapsed`	jquery.makeCollapsible.js	Klappt ein mit `mw-collapsible` versehenes Element standardmäßig ein.
`mw-collapsible`	jquery.makeCollapsible.js	Erweitert ein Element um die Möglichkeit es einzuklappen.
`voy-only-mobile`	MediaWiki:Common.css	Zeigt das Element ausschließlich auf mobilen Endgeräten an.
`voy-small`	MediaWiki:Common.css	Macht Texte etwas kleiner. Kann auf jedes Tag angewendet werden.
`voy-bold`	MediaWiki:Common.css	Formatiert Texte in Fettschrift. Kann auf jedes Tag angewendet werden.
`voy-color-red` `voy-color-green`	MediaWiki:Common.css	Formatiert Texte mit bestimmten Farben. Da Inline-CSS nicht mehr erwünscht ist, und viele Vorlagen die Angabe von Styles nicht (mehr) unterstützen, müssen gelegentlich benötigte Farben über Klassen gesetzt werden.
`wrap` `nowrap`	MediaWiki:Common.css	Erlaubt und verhindert Umbrüche. Anwendbar überall.
Tabellen
`prettytable`	MediaWiki:Common.css	Standard-Klasse für Tabellen im Wikivoyage-Design. Sieh auch Hilfe:Tabellen.
`sortable`	–	Fügt eine Sortiermöglichkeit im Kopf jeder Tabellenspalte ein.
`voy-table-odd-even`	MediaWiki:Common.css	Anzuwenden auf die Tabelle, wenn ein zeilenweiser Wechsel der Farbe gewünscht ist. Nicht notwendig, bei der Standardklasse `multiline`, da in dieser enthalten.
`voy-table-cell-vAlignTop`	MediaWiki:Common.css	Die Klasse richtet in Tabellenzellen alle Inhalte am oberen Rand aus. Anzuwenden auf die Tabelle.
`wikitable`	–	Dies ist eine Standard-Klasse von Mediawiki, die Tabellen zugewiesen werden kann und diese mit einem Grundstyling (hellgrauer Hintergrund, Rahmen, Innenabstand und Linksausrichtung) formatiert. Auf Wikivoyage dagegen ist die Klasse `prettytable` Standard.

Siehe auch: mw:Manual:Interface/IDs and classes

Vorlagenspezifische CSS-Klassen auf Wikivoyage

Diese Klassen werden nur innerhalb von bestimmten Vorlagen verwendet. Sie werden im Regelfall über TemplateStyles eingebunden.

Quickbars

Quickbarelemente, die Daten aus Wikidata enthalten, können weitere Klassen besitzen. Weitere Infos dazu findest du weiter unten auf dieser Seite.

CSS-Klassen in Quickbars
CSS-Klasse(n)	Vorlage/Modul	CSS-Datei	Bemerkungen
`voy-qb` `voy-qb-ort` `voy-qb-region` `voy-qb-country` `voy-qb-<top-level-domain>`	{{Quickbar Ort}} {{Quickbar Region}} {{Quickbar Land}}	Quickbar/styles.css	Diese Klassen besitzt jeweils die gesamte Tabelle (`<table>...</table>`). Die Klasse mit der Top-Level-Domain kennzeichnet zusätzlich das Land, in dem der beschriebene Ort liegt. Diese wird, wenn möglich über Wikidata ermittelt.
`voy-qb-item` `voy-qb-item-<Eigenschaft>`	{{Quickbar Ort}} {{Quickbar Region}}	Quickbar/styles.css	Diese Klassen besitzt jeweils die Tabellenzeile (`<tr>...</tr>`). Die Eigenschaft kennzeichnet dabei spezifische Zeilen der Quickbar, z. B. `voy-qb-item-capital` die Angabe der Hauptstadt.
`voy-qb-empty`	Vorlagen:Quickbars	Quickbar/styles.css	Diese Klassen besitzt jeweils die Tabellenzeile (`<tr>...</tr>`). Sie macht eine Quickbarzeile in der Artikelansicht unsichtbar und wird Quickbareinträgen hinzugefügt, wenn eine Information nicht verfügbar ist. Im HTML ist die Zeile aber vorhanden, genau wie die Datenattribute (z. B. die Wikidata-ID). So können Programmierungen under Helferlein die Zeile benutzen.
`voy-wikidata-content`	{{Quickbar Ort}} {{Quickbar Region}}	Quickbar/styles.css	Diese Klassen besitzt jeweils die Tabellenzelle (`<td>...</td>`), wenn die dargestellte Information von Wikidata bezogen wird.
`voy-qb-item-value-nowikidata`	{{Quickbar Ort}} {{Quickbar Region}}	Quickbar/styles.css	Diese Klassen besitzt jeweils die Tabellenzelle (`<td>...</td>`), wenn die gewünschte Information auf Wikidata verfügbar ist.
`voy-qb-item-value-wikidata-equal` `voy-qb-item-value-wikidata-noequal`	{{Quickbar Ort}} {{Quickbar Region}}	Quickbar/styles.css	Eine dieser Klassen besitzt jeweils die Tabellenzelle (`<td>...</td>`), je nachdem wie der Vergleich des lokal angegebenen Wertes mit dem auf Wikidata ausfiel.

Info- und Navigationsboxen

CSS-Klassen in Infoboxen
CSS-Klasse(n)	Vorlage/Modul	CSS-Datei	Bemerkungen
`voy-box-archive`	{{Archiv}}	Archiv/styles.css
`voy-archive-nav-textbox` `voy-archive-nav-navbox` `voy-archive-nav-navbox-left` `voy-archive-nav-navbox-right` `voy-archive-nav-navbox-center`	{{Archivnavigation}}	Archiv/styles.css	Kleine Navigationsvorlage zum Blättern durch Archive. Die Vorlage besitzt Unterseiten für die einzelnen Archive.
`voy-klappbox` `voy-klappbox-titel` `voy-klappbox-inhalt`	{{Klappbox}}	Klappbox/styles.css
`voy-deletion-request` `voy-deletion-request-running-info`	{{Löschantrag}}	Löschantrag/styles.css
`voy-navigation-block`	{{Navigationsblock}}	Navigationsblock/styles.css
`voy-navigation-bar` `voy-navigation-bar-xx`	{{Navigationsleiste}}	Box/styles.css	Bei der Klasse `voy-navigation-bar-xx` entspricht das Präfix der Top-Level-Domain des Landes, in der die Navigationsleiste Verwendung findet. Alle Navigationsleisten für Thailand besitzten somit die zusätzliche Klasse `voy-navigation-bar-th`.
`voy-regionListFrame` `voy-regionListMap` `voy-regionList` `voy-regionName` `voy-regionHeader` `voy-regionDescription` `voy-regionColon` `voy-regionItems` `voy-regionVersion2`	{{Region List}} {{Region Item}}	Region List/styles.css Region Item/styles.css	Der Aufbau des HTML und die Anwendung der einzelnen Klassen kann im zugrunde liegenden Modul RegionList eingesehen werden.
`voy-shortcut-box`	{{Shortcut}}	Shortcut/styles.css

Tabellen und Listen

CSS-Klassen in Tabellen
CSS-Klasse(n)	Vorlage/Modul	CSS-Datei	Bemerkungen
`voy-toc-left-box`	{{TOC left}}	TOC left/styles.css	Die Klasse wird dem Inhaltsverzeichnis (`<div>...</div>`) zugewiesen.
`voy-toc-right-box`	{{TOC right}}	TOC right/styles.css	Die Klasse wird dem Inhaltsverzeichnis (`<div>...</div>`) zugewiesen.
`voy-holiday`	{{Feiertage Anfang}} {{Feiertag}} {{Feiertage Ende}}	Feiertag/styles.css	Die Klasse wird der Tabelle (`<table>...</table>`) zugewiesen.
`voy-slopes`	{{Skipisten Anfang}} {{Skipiste}} {{Skipisten Ende}}		Die Klasse wird der Tabelle (`<table>...</table>`) zugewiesen.

Marker und Karten

CSS-Klassen in Marker und Karten
CSS-Klasse(n)	Vorlage/Modul	CSS-Datei	Bemerkungen
`voy-coord-style`	{{Coord}}	Coord/styles.css
`voy-locmap`	Location map (Doku)	Location map/styles.css	Die Klasse wird dem Wrapper-Element zugewiesen.
`voy-locmap-marker-box`	Location map (Doku)	Location map/styles.css	Die Klasse wird dem `-label` und `-symbol` umgebenden `<div>...</div>` zugewiesen. In diesem Element erfolgt die Positionierung.
`voy-locmap-marker-label`	Location map (Doku)	Location map/styles.css	Die Klasse wird dem umgebenden `<div>...</div>` der zum Marker gehörenden Bezeichnung zugewiesen.
`voy-locmap-marker-symbol`	Location map (Doku)	Location map/styles.css	Die Klasse wird dem umgebenden `<div>...</div>` des Marker-Bildes zugewiesen.
`voy-copy-marker`	{{Marker Kopie}}

Symbole

CSS-Klassen in weiteren Vorlagen
CSS-Klasse(n)	Vorlage/Modul	Bemerkungen
`voy-flag-icon`	{{Flagicon}}
`voy-rsign` `voy-rsign-⟨Landeskürzel⟩`	{{RSIGN}}
`voy-symbol-aotm`	{{Symbol Artikel des Monats}}
`voy-symbol-bus`	{{Bus}}
`voy-symbol-gay`	{{Gay}}
`voy-symbol-inline`	{{Symbol}} {{Flagicon}} {{Gay}} {{Symbol Artikel des Monats}} {{Symbol Unesco}} {{RSIGN}}	Die Klasse wird für alle im Fließtext verwendbaren Symbolen verwendet. Sie wird dem das Bild umgebenden `<span>...</span>` zugewiesen.
`voy-symbol-unesco`	{{Symbol Unesco}}

weitere Vorlagen

CSS-Klassen in weiteren Vorlagen
CSS-Klasse(n)	Vorlage/Modul	CSS-Datei	Bemerkungen
Mehrspaltiges Layout
`voy-two-columns` `voy-two-columns-rule`	{{2 Spalten}}	2 Spalten/styles.css
`voy-three-columns` `voy-three-columns-rule`	{{3 Spalten}}	3 Spalten/styles.css
`voy-four-columns` `voy-four-columns-rule`	{{4 Spalten}}	4 Spalten/styles.css
Abstimmungen
`voy-voting-deletion`	{{Behalten}} {{Löschen}} {{Neutral}}
`voy-voting-deletion-keep`	{{Behalten}}
`voy-voting-deletion-delete`	{{Löschen}}
`voy-voting-deletion-neutral`	{{Neutral}}
weitere Vorlagen
`voy-audio`	{{Audio}} {{Fremdsprache}} + abgeleitete Vorlagen {{IPA}}
`voy-audio-description`	{{Audio}}
`voy-hidden-text`	{{BlinderText}}	BlinderText/styles.css
`voy-currency` `voy-currency-⟨ISO-Code⟩`	Modul:Exchange rate		Die Klasse wird für Preisangaben verwendet.
`voy-keyboard-key`	{{Key press}}		Die Klasse wird zur Illustration für das Drücken von Tasten verwendet.
`citation` `voy-cite-title` `voy-cite-collection-title` `voy-cite-journal-title` `voy-cite-chapter-title` `voy-cite-website-title` `voy-cite-newspaper-title` `voy-cite-quotation` `voy-cite-series`	diese Vorlagen	Citation/styles.css
`voy-foreign-lang-ipa`	{{Fremdsprache}} + abgeleitete Vorlagen {{IPA}}
`voy-cite` `voy-cite-quotes-block` `voy-cite-author` `voy-cite-quote` `voy-cite-source`	{{Zitat}}	Zitat/styles.css
`voy-box-intertitle`	{{Zwischentitel}}	Zwischentitel/styles.css

Kennzeichnung von Wikidata

Diese Klassen kennzeichnen Daten von Wikidata. Sie sind aber nicht in einer CSS-Datei explizit ausgewiesen. Sie dienen lediglich der Möglichkeit der individuellen Gestaltung, Gadgets und Programmierern.

Kennzeichnung von Wikidata
CSS-Klasse(n)	Vorlage/Modul	CSS-Datei	Bemerkungen
`voy-wikidata-content`	Vorlagen:Wikidata	MediaWiki:Gadget-Wikidata-Content.css	Weist alle Inhalte aus, die von Wikidata eingebunden sind. Das Helferlein Inhalte von Wikidata markieren bietet die Möglichkeit, sich Wikidata-Inhalte kennzeichnen zu lassen.
`voy-qb-item-value-nowikidata`	{{Quickbar Ort}} {{Quickbar Region}}		Kennzeichnet Quickbareinträge, bei denen Daten von Wikidata angefordert werden, dort aber keine vorhanden sind. Die Klasse liegt auf der Tabellenzelle `<td>...</td>`.
`voy-qb-item-value-wikidata-equal`	{{Quickbar Ort}} {{Quickbar Region}}		Kennzeichnet Quickbareinträge, bei denen im Artikel ein Wert angegeben wurde und dieser mit der Angabe auf Wikidata identisch ist. Die Klasse liegt auf der Tabellenzelle `<td>...</td>`. In den Data-Attributen der Zelle sind die Wikidata-Daten für Programmierer verfügbar.
`voy-qb-item-value-wikidata-noequal`	{{Quickbar Ort}} {{Quickbar Region}}		Kennzeichnet Quickbareinträge, bei denen im Artikel ein Wert angegeben wurde und dieser sich von der Angabe auf Wikidata unterscheidet. Die Klasse liegt auf der Tabellenzelle `<td>...</td>`. In den Data-Attributen der Zelle sind die Wikidata-Daten für Programmierer verfügbar.

Programmierungen

Diese Klassen befinden sich nicht in Vorlagen, sondern im Javascript-Programmcode von Erweiterungen, die für Wikivoyage geschrieben wurden.

Programmierungen
CSS-Klasse(n)	Programm	CSS-Datei	Bemerkungen
`voy-user-login`	MediaWiki:Gadget-MarkerUtilities.js		Diese Klasse wird dem `<body>...</body>` zugewiesen, wenn der Benutzer aktuell angemeldet ist.
`voy-list-delete-requests-item` `voy-list-delete-requests-item-classic` `voy-list-delete-requests-item-quick` `voy-list-delete-requests-entry` `voy-list-delete-requests-entry-reason` `voy-list-delete-requests-entry-duration` `voy-list-delete-requests-entry-links`	MediaWiki:ListDeleteRequests.js	MediaWiki:Common.css	Liste aller Löschanträge auf Wikivoyage:Löschanträge.

Einzelnachweise

[1] Extension:PageImages: Can I exclude certain page images?

[2] Phabricator: Allow exclusion of certain page images

[1]

[2]