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

Störung durch Adblocker erkannt!


Wikia ist eine gebührenfreie Seite, die sich durch Werbung finanziert. Benutzer, die Adblocker einsetzen, haben eine modifizierte Ansicht der Seite.

Wikia ist nicht verfügbar, wenn du weitere Modifikationen in dem Adblocker-Programm gemacht hast. Wenn du sie entfernst, dann wird die Seite ohne Probleme geladen.