Hilfe:Infoboxen/CSS

Infoboxen können mit CSS von lokalen Administratoren gestaltet werden.

Ohne zusätzliche Gestaltungen orientiert sich das Design der Infobox an den Einstellungen des Theme-Designers deiner Community, insbesondere an der Artikel-Hintergrundfarbe und der Linkfarbe.

Infobox-Design

Die beste Möglichkeit, das Standard-Design von Infoboxen zu überschreiben, ist die Verwendung der type, theme- oder theme-source-Attribute des Infobox-Tags. Diese können im lokalen Community-CSS angepasst werden. Es gibt ein Video in englischer Sprache, das die Verwendung von CSS sowohl allgemein als auch speziell auf Fandom erklärt.

• Mit dem type-Attribut ergänzt du die Infobox um einen logischen Typ (was genau die Infobox beschreibt oder erklärt), es kann aber auch als CSS-Klasse verwendet werden.
• Mit dem theme-Attribut erstellst du eine eigene CSS-Klasse für die Infobox, die du stylen und entsprechenden Infoboxen zuweisen kannst.
• Das theme-source-Attribut macht es möglich, die CSS-Klasse mit einem Vorlagen-Parameter zu variieren.

"type" nutzen

Als Beispiel: Der Infobox-Code type="charakter" wird zur CSS-Klasse type-charakter umgewandelt. Diese kann nun über das lokale CSS deiner Fandom-Community anpasst werden.

Vorlagen-Code	<infobox type="charakter"> // Infobox-Inhalte werden hier eingefügt </infobox>
zu benutzendes CSS	.portable-infobox.type-charakter { // eigene CSS-Anpassungen }

Der folgende Code wird bspw. verwendet, um den Hintergrund der kompletten Infobox rot zu gestalten:

.portable-infobox.type-charakter.pi-background {
    background-color: #CF3D0C;  // macht den Hintergrund der Infobox rot
}

"theme" nutzen

Als Beispiel: Der Infobox-Code theme="delta" wird zur CSS-Klasse pi-theme-delta umgewandelt. Diese kann nun über das lokale CSS deiner Fandom-Community anpasst werden.

Vorlagen-Code	<infobox theme="delta"> // Infobox-Inhalte werden hier eingefügt </infobox>
zu benutzendes CSS	.portable-infobox.pi-theme-delta { // eigene CSS-Anpassungen }

Der folgende Code wird bspw. verwendet, um den Hintergrund der kompletten Infobox hellrot zu gestalten:

.portable-infobox.pi-theme-delta.pi-background {
    background-color: #FC3F3F;  // macht den Hintergrund der Infobox hellrot
}

"theme-source" nutzen

Mit theme-source= kannst du die Wahl der CSS-Klasse deines Stylings von einem Parameter innerhalb der Infobox abhängig machen. Zum Beispiel bedeutet theme-source="Ort", dass, wenn der Parameter Ort in einer Infobox ausgefüllt wurde, der Wert des Parameters als Klasse benutzt wird.

Zum Beispiel:

Vorlagen-Code	<infobox theme-source="Ort"> ... <group> ... <data source="Ort"><label>Ort</label></data> ... </group> ... </infobox>
Code im Artikel	{{Infobox |Ort= Afrika }}
zu benutzendes CSS	.portable-infobox.pi-theme-Afrika { // eigene CSS-Anpassungen für das Afrika-Styling }

Wenn du spezielle Elemente innerhalb der Infobox auf diese Weise anpassen möchtest, wie bspw. die Titelzeile, dann würdest du das in etwa so machen:

.portable-infobox.pi-theme-Afrika .pi-title {
   // eigene CSS-Anpassungen für die Titelzeile des Afrika-Stylings
}

Erweiterte Theme-Hinweise

• Wenn die theme- und theme-source-Attribute gleichzeitig innerhalb der Infobox benutzt werden, geben beide ihre CSS-Eigenschaften an die Infobox weiter.
• Bitte beachte, dass die Leerstellen in den theme- und theme-source-Werten zu einem Bindestrich/Minus verwandelt werden (-). Man kann also nur eine einfache Klasse dort einsetzen.
• Wenn kein Design gewählt wird, wird standardmäßig .pi-theme-wikia benutzt.

Hauptklassen

Diese Klassen helfen dir, die Gestaltung bestimmter Tags zu aktualisieren:

Titel

.pi-title

Header

.pi-header

Navigation

.pi-navigation

Gruppen

.pi-group

Data-Tag

.pi-data

Data-Wert

.pi-data-value

Data-Label

.pi-data-label

Bild

.pi-image

Bild-Reiter

.pi-image-collection-tabs

Helfer-Klassen

Die portablen Infoboxen verfügen über eine Vielfalt an designspezifischen Helfer-Klassen, um das komplette Styling zu aktualisieren.

.pi-background

Kompletter Infobox-Hintergrund

.pi-secondary-background

Überschrift und Hintergrund für die Tags header und navigation

.pi-font

Font-Styling der Parameterwerte

.pi-secondary-font

Font-Styling Zwischenüberschriften und Parameterbeschriftung

.pi-item-spacing

Innenabstand der Parameterzellen

.pi-border-color

Infobox-Umrandungselemente

Dies ist keine komplette Übersicht der Klassen. Weitere Helfer-Klassen findest du hier: Hilfe:Infoboxen.

Beispiele von Code-Snippets

Breite der gesamten Infobox auf 300px anpassen:

.portable-infobox {
   width: 300px;
}

Farbe des Infobox-Hintergrundes ändern:

.portable-infobox.pi-background {
   background-color: #ff0000;
}

Hintergrundfarbe für header- und navigation-Elemente ändern:

.portable-infobox .pi-secondary-background {
   background-color: #00ff00;
}

Farbe der Infobox-Umrandung ändern:

.portable-infobox .pi-border-color {
   border-color: #00ff00;
}

Innenabstand der Parameterzellen der Infobox ändern:

.portable-infobox .pi-item-spacing {
   padding: 10px 20px;
}

Schriftgröße von Parameterwerten der Infobox auf 16px verändern:

.portable-infobox .pi-font {
    font-size: 16px;
}

Schriftgröße von Parameterbeschriftung, header- und navigation-Elementen auf 18px ändern:

.portable-infobox .pi-secondary-font {
    font-size: 18px;
}

Schriftgröße des Infobox-Titels auf 24px ändern:

.portable-infobox .pi-title {
    font-size: 24px;
}

Breite der Label-Spalte auf 165px ändern:

.portable-infobox .pi-data-label {
    flex-basis: 165px;
}

Wähle das benutzerdefinierte Theme „oblivion“, dann ändere die Schriftgröße der Bildunterschrift auf 16px:

.portable-infobox.pi-theme-oblivion .pi-caption {
   font-size: 16px;
}

Ändere die Hintergrundfarbe von Bild-Reitern:

.pi-image-collection-tabs li {
  background-color: green;
}

Erweitert

Wenn du das Design eines bestimmten Stylings ändern willst, würdest du so etwas wie hier schreiben:

.portable-infobox.pi-theme-name .pi-secondary-background {
   background-color:#334;
}

Wenn jedoch eine CSS-Klasse im gleichen Element wie eine andere ist, dann musst du beide wählen - ohne Leerstellen zwischen den Klassen. Zum Beispiel ist .pi-background im gleichen Element wie <aside> das Element von Theme (.pi-theme-name). Das CSS würde also den Hintergrund für das Theme so gestalten:

.portable-infobox.pi-theme-name.pi-background {
   background-color:#334;
}

Einzelne Elemente können über Data-Attribute als Selektoren unabhängig gestaltet werden. Alle Infobox-Elemente, die mit source gesteuert werden, haben nun in HTML den Namen des Parameters als Data-Attribut (zum Beispiel data-source="ATK"). Das sorgt dafür, dass man CSS- oder jQuery-Selektoren, wie zum Beispiel .pi-item[data-source="ATK"], zum Anpassen oder Finden bestimmter Elemente nutzen kann. In Kombination mit type sollte es die Notwendigkeit für nth-of-type-Selektionen eliminieren und neue Design- und Interaktionsmöglichkeiten bieten.

Der neue name Parameter erlaubt die explizite Selektion von Elementen – unabhängig davon, ob sie ein source-Input nutzen oder nicht. Das gilt auch für die Selektion von <title>, <group>, <data>, <header>, <image> und <navigation>. Wie beim data-source-Attribut könnte <data name="Titel"> zum Beispiel mit dem Selektor .pi-item[data-item-name="Titel"] verändert werden.

Hilfeseiten zu den portablen Infoboxen:

Übersicht • Styling • Tags • Bearbeitungsoptionen

Weitere Hilfe und Feedback

• Ein Stichwortverzeichnis zu verschiedensten Hilfeseiten findest du auf Hilfe:Index.
• Einen geordneten Einstieg zur Hilfe gibt es auf der Seite Hilfe:Übersicht.
• Fragen an andere Benutzer kannst du in den Diskussionen des Community-Wikis stellen.
• Anmerkungen zu dieser Hilfeseite kannst du auf der dazugehörigen Diskussionsseite hinterlassen.
• Um Fehler zu melden, kontaktiere bitte einen Ansprechpartner oder nutze das entsprechende Kontaktformular.