FANDOM


Infoboxen können mit CSS gestaltet werden.

Infobox-DesignBearbeiten

Die beste Möglichkeit, das Standard-Design von Infoboxen zu überschreiben, ist die Verwendung der 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 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.

Wenn beide Attribute innerhalb der Infobox benutzt werden, wird das theme-Attribut als Standard gesetzt. 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.

 

"Theme"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.

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

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

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

Wenn kein Design gewählt wird, wird .pi-theme-wikia benutzt.

 

"Theme-source"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:

<infobox theme-source="Ort">
   ...
</infobox>
{{Infobox
 |Ort = Afrika
}}

Das CSS der Vorlage kann dann wie folgt angepasst werden:

.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:

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

Helfer-KlassenBearbeiten

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-SnippetsBearbeiten

Schriftgröße des Infobox-Themes oblivion auf 16px anpassen:

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

Breite der gesamten Infobox auf 300px anpassen:

.portable-infobox {
   width: 300px;
}

Farbe des Infobox-Hintergrundes ändern:

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

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

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

Farbe der Infobox-Umrandung ändern:

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

Innenabstand der Parameterzellen der Infobox ändern:

.pi-item-spacing {
   padding-top: 10px;
   padding-right: 20px;
   padding-bottom: 10px;
   padding-left: 20px;
}

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

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

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

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

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

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

ErweitertBearbeiten

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

.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:

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


Hilfeseiten zu den portablen Infoboxen:

ÜbersichtStylingTags

Weitere Hilfe und FeedbackBearbeiten