Hallo liebe Dokuwiki Gemeinde,
ich dachte mir, dass dieses kleine Tutorial Einsteigern vielleicht helfen kann, eine eigene Infobox zu basteln, wie man Sie unter anderem auch von Wikipedia kennt. Die Infobox an sich ist recht simpel gehalten und kann natürlich bei Bedarf beliebig erweitert werden.
Am Ende sieht die Infobox dann so aus:
https://tamagotchiwiki.de/doku.php?id=tamagotchi (Rechte Seite)
Zuerst einmal lädst du dir das Plugin WRAP herunter:
https://www.dokuwiki.org/plugin:wrap und installierst es.
Anschließend bearbeitest du die Datei "userstyle.css" im Verzeichnis "/conf/".
Für mein Beispiel habe ich dort folgendes eingefügt:
.dokuwiki div.wrap_box, .dokuwiki div.wrap_danger, .dokuwiki div.wrap_warning, .dokuwiki div.wrap_caution, .dokuwiki div.wrap_notice, .dokuwiki div.wrap_safety {
padding: 0;
margin-bottom: 1.5em;
overflow: hidden;
background: #2489B8;
color: #fff;
border: 1px solid;
border-color: #A2A9B1;
font-weight: bold;
}
.dokuwiki div.wrap_infoboxfirstcontent { /* added */
background-color: #FFF;
color: #000;
border: 1px solid;
border-color: #A2A9B1;
padding: 0em;
margin-bottom: 0em;
overflow: hidden;
}
.dokuwiki div.wrap_infoboxcontent { /* added */
background-color: #FFF;
color: #000;
border: 1px solid;
border-color: #A2A9B1;
padding: 0em;
margin-bottom: 0em;
overflow: hidden;
border-top: 0px;
}
.dokuwiki div.wrap_infoboxtitle { /* added */
padding: 0em;
overflow: hidden;
background: #2489B8;
color: #fff;
border: 1px solid;
border-color: #A2A9B1;
font-weight: bold;
margin-bottom: 0.5em;
}
.dokuwiki div.wrap_infoboxpicture { /* added */
padding: 0em;
overflow: hidden;
background: #fff;
color: #fff;
border: 1px solid;
border-color: #A2A9B1;
font-weight: bold;
margin-bottom: 0em;
border-bottom: 0px;
}
.dokuwiki div.wrap_description { /* added */
padding: 0em;
overflow: hidden;
color: #000;
font-style: italic;
margin-top: -1em;
font-size: 0.8em;
font-weight: normal;
}
Anschließend wird die Datei gespeichert und über ein FTP Programm auf den Webhost hoch geladen. In dieser Datei werden zukünftig auch weitere Änderungen durchgeführt, wie zum Beispiel die Formatierung von Texten oder Farben. Hier lohnt es sich, sich ein wenig mit CSS zu beschäftigen. Für eine fertige Infobox ist das aber zunächst nicht nötig.
Im Wiki selbst wird nun in der gewünschten Seite, wo die Infobox erscheinen soll, folgendes eingefügt:
<WRAP group right 400px>
<WRAP infoboxtitle 100% centeralign> Tamagotchi </WRAP>
<WRAP infoboxpicture 100% centeralign> {{:bild.jpg?nolink&300|}} <WRAP description> Tamagotchi Gen 2 in japanischer Verpackung </WRAP></WRAP>
<WRAP group 100% centeralign infoboxfirstcontent>
<WRAP half column leftalign> **Entwickler:** </WRAP>
<WRAP half column leftalign> Bandai </WRAP>
</WRAP>
<WRAP group 100% centeralign infoboxcontent>
<WRAP half column leftalign> **Erstveröffentlichung:** </WRAP>
<WRAP half column leftalign>
__Japan__\\
23. Nov. 1996 (Gen 1)\\
1. Febr. 1997 (Gen 2, V1)\\
Mai 1997 (Gen 2, V2)\\
23. Nov. 2018 (Rerelease Gen 1)\\
23. Nov. 2018 (Rerelease Gen 2)\\
</WRAP>
</WRAP>
<WRAP group 100% centeralign infoboxcontent>
<WRAP half column leftalign> **Batterien:** </WRAP>
<WRAP half column leftalign> 2x LR44/AG13 </WRAP>
</WRAP>
<WRAP group 100% centeralign infoboxcontent>
<WRAP half column leftalign> **Farbvariationen:** </WRAP>
<WRAP half column leftalign>
Erste Generation: 16 (Ohne Sondereditionen)\\
Zweite Generation: 45 (Ohne Sondereditionen)\\
</WRAP>
</WRAP>
<WRAP group 100% centeralign infoboxcontent>
<WRAP half column leftalign> **Auflage:** </WRAP>
<WRAP half column leftalign> Unbekannt </WRAP>
</WRAP>
<WRAP group 100% centeralign infoboxcontent>
<WRAP half column leftalign> **Sammlerwert:** </WRAP>
<WRAP half column leftalign> Zwischen 15€ und 60€ je nach Farbe </WRAP>
</WRAP>
</WRAP>
Damit ist die Infobox im Grunde fertig. Jetzt musst du nur noch die Texte in der Infobox anpassen.
Ich wünsche dir viel Spaß beim Basteln und ausprobieren.
Gruß Leon