Auf dieser Seite findest du Tipps, Tricks, Code-Beispiele, CSS und den ein oder anderen Hack zum Thema Portable Infoboxen. Vergewissere dich, dass du dir auch die Seiten Infoboxen und Hilfe:Infoboxen/CSS durchgelesen und verstanden hast, und weißt, wie die einzelnen Elemente verwendet und gestylt werden.
Infoboxen umwandeln[]
Hauptartikel: Infoboxen umwandeln
Parserfunktionen[]
Parserfunktionen und Lua können innerhalb der <default>- und <format>-Tags verwendet werden, sowie auch in allen anderen Tags, in denen Wikitext verwendet werden kann. Wichtig: Verwendet sie nicht außerhalb dieser Tags, da dies sonst zu Darstellungsproblemen führen kann.
[]
TBD
Ausklappbare Elemente[]
<infobox>
<group collapse="closed"> <header>Ausklappen ist supereinfach</header>
<data> <default>Zusammengeklappter Kram</default></data>
</group>
</infobox>
Kommentieren[]
Portable Infoboxen verwenden XML, weshalb die sonst üblichen Regeln zum Kommentieren nicht greifen. Aber mit folgendem Trick kannst du dennoch Kommentare im Infobox-Code unterbringen:
<infobox>
<group >
<header>Mitglieder der Avengers</header>
<data><default>Captain America</default></data>
<data><default>Iron Man</default></data>
<!--Kommentar>
Dieser Teil ist versteckt
<header>Ehemalige Avenger</header>
<data><default>Iron Fist</default></data>
<data><default>Captain Britain</default></data>
</Kommentar-->
</group>
</infobox>
Formatieren[]
Hier findest du einige Code-Beispiele für das lokale CSS deiner Community. Für nähere Informationen siehe Hilfe:Infoboxen/CSS
Textformatierung[]
Häufig wird Text vertikal oder horizontal zentriert, was du bei den portablen Infoboxen mithilfe der Verwendung von CSS (siehe auch hier) erreichen kannst. Um Text innerhalb des <data>-Tags zu zentrieren, kannst Code wie folgenden verwenden[1]:
.portable-infobox .pi-data {
height: 10em; /* Legt die Höhe fest */
display: flex;
align-items: center; /* Zentriert Elemente und/oder Text vertikal */
justify-content: center ; /* Zentriert Elemente und/oder Text horizontal */
}
Automatischen Zeilenumbruch verhindern[]
Manchmal ist es nicht gewünscht, dass Wörter automatisch für einen Zeilenumbruch getrennt werden. Folgendes Beispiel zeigt dir, wie du einen automatischen Zeilenumbruch verhindern kannst, indem die minimale Breite der linken Infoboxspalte vergrößert wird.
.portable-infobox .pi-data-label {
flex-basis: 120px;
}
Bildformatierung[]
Einfaches, automatisches Skalieren[]
Der schnellste und einfachste Weg, Bilder schnell für Infoboxen zu skalieren ist folgender:
.pi-theme-name .pi-image-thumbnail {
width: 100%;
height:auto;
}
Skalierte Infoboxen[]
Wenn du die Breite einer Infobox anpasst (bspw. via .pi-theme-name { width: 123px; }), musst du auch die Bildgröße über das CSS anpassen. Dies geschieht über die Klasse .pi-image-thumbnail und sähe folgendermaßen aus:
.pi-theme-name .pi-image-thumbnail {
max-width: 123px; /* Üblicherweise solltest du dieselbe Breite wie die der Infobox abzüglich der Ränder verwenden */
height: auto; /* Stellt sicher, dass das Seitenverhältnis beibehalten wird */
}
In bestimmten Fällen kann es dann allerdings passieren, dass bestimmte Bilder überdurchschnittlich groß dargestellt werden. Wenn es nicht zwingend notwendig ist, dass sie die komplette Breite der Infobox einnehmen, kannst du auf dieselbe Weise auch die Höhe limitieren, sodass kein Wert überschritten wird und das Seitenverhältnis berücksichtigt wird:
.pi-theme-name .pi-image-thumbnail {
max-width: 123px;
max-height: 123px;
width: auto;
height: auto;
}
Titelformatierung[]
Der Titel einer Infobox kann genauso leicht wie jeder andere Text formatiert werden, sofern man die richtigen Klassen verwendet:
.pi-theme-name .pi-title {
font-family:formalscrp421 bt;
font-weight:bold;
color:blue;
}
Dieser Code führt dazu, dass die Infoboxtitel im kompletten Community so aussehen.
Gruppen[]
Gruppen können in Infoboxen auf unterschiedlichste Arten eingesetzt werden. Man kann sie zusammen- und ausklappen, oder das Layout der dargestellten Informationen verändern. Verfügt eine Infobox über sehr viele Informationen kann es Sinn machen, diese in Gruppen zu organisieren.
<infobox>
<group layout="horizontal">
<data source="Äpfel"/>
<data source="Birnen"/>
<data source="Mangos"/>
</group>
<group layout="horizontal">
<data source="Avocados"/>
<data source="Weintrauben"/>
<data source="Tomaten"/>
</group>
<group collapse="closed">
<header>Gutes Essen</header>
<data source="Kartoffeln"/>
<data source="Marajujas"/>
<data source="Ananans"/>
</group>
</infobox>
Mehrere Parameter[]
Im gleichen Feld[]
<infobox>
<data source="Frauen">
<default>{{{Ladies|Manuela Musterfrau}}}</default>
</data>
</infobox>
CSS[]
Eine ganze Zeile neu gestalten[]
Du kannst das Styling für einzelne Elemente zwar inline anpassen, aber das reicht nicht aus, um einen kompletten Dateneintrag inklusive der dazugehörigen Beschriftung zu ändern, beispielsweise die Hintergrundfarbe einer kompletten Reihe. Das hängt damit zusammen, dass jede <data>-Reihe aus dem eigentlichen Wert (inklusive möglicher <format>-Tags) innerhalb eines <div>-Elements besteht, das sich selbst auch wieder in einem <div>-Element befindet. Um die komplette Zeile anzusprechen, musst du also die Hintergrundfarbe des obersten <div>-Elements ändern. Hierfür musst du zuvor jedoch das <div>-Element, das du anpassen möchtest, genau identifizieren.
Dies machst du, indem du im Code von oben nach unten jeden <data>-Tag zählst, bis du an dem ankommst, den du anpassen möchtest. Zähle keine <title>, <image> oder <navigation>-Tags mit, da diese sich nicht in <div>-Elementen befinden. Beispiel: Gehen wir also davon aus, du hast einen Titel, ein Bild und drei <data>-Tags in der Reihenfolge: Alter, Geschlecht und Ort.
- Wichtig: Wenn deine Infobox aus
<data>-Tags besteht, die keinen<default>-Wert haben, werden diese nicht angezeigt, wenn ihnen sonst kein Wert zugewiesen ist. Dies beeinflusst auch die Nummerierung deiner Zeilen. Siehe weiter unten für mögliche Lösungen.
Sobald du die Nummer des entsprechenden <div>-Elements, relativ gesehen von oben herab, herausgefunden hast, kannst du den folgenden Code verwenden und die 1 in div:nth-of-type(1) mit dem von dir ermittelten Wert ersetzen. (In unserem Beispiel 1 für Alter, 2 für Geschlecht und 3 für Ort.)
.pi-theme-name div:nth-of-type(1) {
background-color: #000000;
}
Der obige Code spricht die komplette erste Zeile (Alter) an. Möchtest du nur das <div>-Element, das den eigentlichen Wert beinhaltet, ansprechen, verwendest du:
.pi-theme-name div:nth-of-type(1) div:first-of-type {
background-color: #000000;
}
Das div:first-of-type am Ende wählt den Container zwischen der kompletten Zeile und dem eigentlichen Inhalt aus, sodass die Überschrift nicht beeinflusst wird. Beachte, dass first-of-type (oder nth-of-type(1)) für diese Auswahl immer verwendet wird, egal welche Zeile du ansprichst.
Mit diesem Trick kannst du auch andere Eigenschaften für Elemente hinzufügen, die über das normale _inline_-Styling schwer zu erreichen sind, wie bspw. Listen. Du kannst sogar noch tiefer gehen, was die CSS-Selektoren anbelangt, und zum Beispiel nur bestimmte Listenelemente zu ändern, jedes andere Elemente (li:nth-child(2n+2)), oder nur das erste, etc.
Umgang mit optionalen Feldern[]
Wenn deine Infobox über optionale Felder ohne <default>-Werte verfügt, kann das Nummerieren der einzelnen Zeilen nahezu unmöglich werden, und es kann passieren, dass du unbeabsichtigt die falschen Zeilen stylst. Abhängig von der Reihenfolge der Infoboxinhalte können dir die folgenden Tipps trotzdem helfen:
- Platziere die entsprechende Zeile am Ende der Infobox. Wenn du nicht weißt, wieviele Zeilen vor der Zeile kommen, die gestylt werden soll, aber genau weißt, wieviele danach noch kommen, kannst du auch vom Ende her deine Zeilen abzählen. Um das zu tun, verwendest du
div:nth-last-of-type(1)anstattdiv:nth-of-type(1). In unserem Beispiel von oben, würde das die Zeilte „Ort“ auswählen - Abhängig vom Inhalt kannst du auch
<navigation>-Tags für Einträge verwenden, die schwer anzuwählen sind. Da diese<nav>-HTML-Elemente anstatt<div>-Elemente verwenden, kannst du diese separat zählen und leichter und unabhängig von optionalen<data>-Feldern identifizieren – vorausgesetzt du verwendest nicht mehrere, optionale<navigation>-Tags. Je nach Anwendung benutzt du hierfür entwedernav:nth-of-type(1)odernav:nth-last-of-type(1).
Vorlage zur Gestaltung von portablen Infoboxen[]
Dies ist eine abgespeckte Vorauswahl an CSS-Selektoren, die du verwenden kannst, um direkt loszulegen und deine portablen Infoboxen zu gestalten.
Kopiere folgenden Code von Themes/starter_theme.css auf die MediaWiki:Wikia.css-Seite deiner Community, bearbeite die vorhandenen Styles und füge nach Belieben neue hinzu.