FANDOM


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 Bearbeiten

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, dass 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.
  • Communitys, die das Europa-Theme benutzen, haben ein anderes, voreingestelltes CSS-Set. Dieses kann am .pi-europa-Selektor erkannt werden. Communitys, die schon existierende Gestaltungen haben, sollten nicht versuchen, diese auf die Portablen Infoboxen mit aktiviertem Europa-Theme anzupassen. Es ist besser, das Europa-Theme in diesem Fall über die Wiki-Funktionen zu deaktivieren.

"type" nutzen Bearbeiten

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 Bearbeiten

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 Bearbeiten

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 Bearbeiten

  • 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 Bearbeiten

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 Bearbeiten

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 Bearbeiten

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 Bearbeiten

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:

ÜbersichtStylingTagsBearbeitungsoptionen

Weitere Hilfe und Feedback Bearbeiten

Nutzung von Community-Inhalten gemäß CC-BY-SA , sofern nicht anders angegeben.