FANDOM


Tags

Tag Attribute Child tags Description
infobox theme, theme-source, layout title, image, header, navigation, data, group Der Tag, der alle anderen beinhaltet und den Geltungsbereich der Infobox abgrenzt
Anwendungsbeispiel:
<infobox layout="stacked">
<title source="title_source" />
</infobox>

HTML-Ausgabe:

<aside class="portable-infobox">
<div class="portable-infobox-item item-type-title portable-infobox-item-margins">
<h2 class="portable-infobox-title">Titel</h2>
</div>
</aside>
data source default, label, format Standard-Tag des Schlüsselwerts
Anwendungsbeispiel:
<data source="name">
<label>Vorname</label>
<default>John</default>
</data>

HTML-Ausgabe:

<div class="portable-infobox-item item-type-key-val portable-infobox-item-margins">
<h3 class="portable-infobox-item-label portable-infobox-header-font">Vorname</h3>
<div class="portable-infobox-item-value">John</div>
</div>
label Nicht verfügbar Nicht verfügbar Label-Tag, kann nur innerhalb von anderen Tags verwendet werden, überprüft, ob Spalten untergeordneter Tags weitere Informationen enthalten. Akzeptiert wikitext.
Anwendungsbeispiel:
<label>Vorname</label>

HTML-Ausgabe:

<h3 class="portable-infobox-item-label portable-infobox-header-font">Vorname</h3>
default Nicht verfügbar Nicht verfügbar Standard-Tag, kann nur innerhalb von anderen Tags verwendet werden, überprüft, ob Spalten untergeordneter Tags weitere Informationen enthalten. Akzeptiert wikitext.
Anwendungsbeispiel:
<default>John</default>

HTML-Ausgabe:

<div class="portable-infobox-item-value">John</div>
format Nicht verfügbar Nicht verfügbar Format-Tag, kann nur innerhalb von anderen Tags verwendet werden, überprüft, ob Spalten untergeordneter Tags weitere Informationen enthalten. Akzeptiert wikitext.
Anwendungsbeispiel:
<data source="dollars">
<label>Regulärer Preis</label>
<format>{{{dollars}}}$</format>
</data>

HTML-Ausgabe:

<div class="portable-infobox-item item-type-key-val portable-infobox-item-margins">
<h3 class="portable-infobox-item-label">Regulärer Preis</h3>
<div class="portable-infobox-item-value">15 $</div>
</div>
title source default, format Sollte nur einmal pro Infobox verwendet werden, gibt den Titel der Infobox an.
Anwendungsbeispiel:
<title source="title_source">
<default>{{PAGENAME}}</default>
</title>

HTML-Ausgabe:

<div class="portable-infobox-item item-type-title portable-infobox-item-margins">
<h2 class="portable-infobox-title">Seitenname</h2>
</div>
image source alt, caption, default Bild-Tag, wird verwendet, um einer Infobox ein Bild hinzuzufügen.
Anwendungsbeispiel:
<image source="img_name" />

HTML-Ausgabe:

<div class="portable-infobox-item item-type-image no-margins">
<figure>
<a href="/wiki/File:Image.jpg" class="image image-thumbnail" title="">
<img src="Image.jpg" class="portable-infobox-image" alt="" data-image-key="Image.jpg" data-image-name="Image.jpg">
</a>
</figure>
</div>
alt source default Kann nur in einem Bild-Tag verwendet werden.
Anwendungsbeispiel:
<image source="image">
<alt source="alternative_title">
<default>Standard alt-Text</default>
</alt>
</image>

HTML-Ausgabe:

<div class="portable-infobox-item item-type-image no-margins">
<figure>
<a href="/wiki/File:Image.jpg" class="image image-thumbnail" title="">
<img src="Image.jpg" class="portable-infobox-image" alt="Default alt text" data-image-key="Image.jpg" data-image-name="Image.jpg">
</a>
</figure>
</div>
caption source default, format Kann nur in einem Bild-Tag verwendet werden.
Anwendungsbeispiel:
<caption source="caption">
<default>Standard alt-Text</default>
</caption>

HTML-Ausgabe:

<figcaption class="portable-infobox-item-margins portable-infobox-image-caption">Standard alt-Text</figcaption>
group layout, show="incomplete" data, header, image Wird zur Gruppierung von Feldern verwendet, kann für jede Gruppe einen Header bereitstellen. Gruppe wird nicht gerendert (einschließlich Header), wenn alle Felder leer sind.
Anwendungsbeispiel:
<group>
<header>Guppenname</header>
<data source="value1" />
</group>

HTML-Ausgabe:

<section class="portable-infobox-item item-type-group">
<div class="portable-infobox-item item-type-header portable-infobox-item-margins portable-infobox-header-background">
<h2 class="portable-infobox-header portable-infobox-header-font">Gruppenname</h2>
</div>
<div class="portable-infobox-item item-type-key-val portable-infobox-item-margins">
<div class="portable-infobox-item-value">Wert</div>
</div>
</section>
header Nicht verfügbar Nicht verfügbar Der Header-Tag bezeichnet den Anfang eines Abschnitts oder einer Gruppe von Tags.
Anwendungsbeispiel:
<header>Header-Text</header>

HTML-Ausgabe:

<div class="portable-infobox-item item-type-header portable-infobox-item-margins portable-infobox-header-background">
<h2 class="portable-infobox-header portable-infobox-header-font">Header-Text</h2>
</div>
navigation Nicht verfügbar Nicht verfügbar Wird zur Bereitstellung von wikitext verwendet.
Anwendungsbeispiel:
<navigation>[[Links]]</navigation>

HTML-Ausgabe:

<navigation class="portable-infobox-navigation portable-infobox-item-margins portable-infobox-secondary-background portable-infobox-secondary-font">
<a href="/wiki/Links" title="Links">Links</a>
</navigation>



/* Breite linke Spalte */
.portable-infobox .pi-data-label {
flex-basis: 160px;
 }
 
/* Breite */
.portable-infobox {
    width:250px;
}
 
/* Anpassung des Navigation-Tags */
.portable-infobox .pi-navigation {
text-align:center;
background-color:#E6E1DB;
}
 
/* Bildunterschrift mittig */
.portable-infobox .pi-caption {
    text-align: center;
}
 
/* Header (Gruppen) */
.portable-infobox .pi-header {
    text-align: center;
    font-weight: bold;
    background: #E1C29A;
}
 
/* Titel (Name) */
.portable-infobox .pi-title {
    text-align: center;
    font-weight: bold;
    background: #BCA382;
}
 
/* Rahmen */
/** Gesamt **/
.portable-infobox .pi-border-color {
    border-color: #BCA382;
}
 
/** Unter dem Bild **/
.portable-infobox .pi-image {
    border-bottom: 1px solid #8B7E66;
}
 
/* Generelle Anpassungen (+Background V1) */
.portable-infobox {
    border: 2px solid #8B7E66;
    border-radius: 5px;
    background: transparent;
}