Not logged in. · Lost password · Register
Forum: Non-English Discussion German discussion RSS
Tutorial: Infobox erstellen mit WRAP Plugin
Avatar
kokirijunge #1
Member since Aug 2011 · 17 posts
Group memberships: Members
Show profile · Link to this post
Subject: Tutorial: Infobox erstellen mit WRAP Plugin
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
Close Smaller – Larger + Reply to this post:
Verification code: VeriCode Please enter the word from the image into the text field below. (Type the letters only, lower case is okay.)
Smileys: :-) ;-) :-D :-p :blush: :cool: :rolleyes: :huh: :-/ <_< :-( :'( :#: :scared: 8-( :nuts: :-O
Special characters:
Go to forum
Imprint
This board is powered by the Unclassified NewsBoard software, 20150713-dev, © 2003-2015 by Yves Goergen
Current time: 2019-11-18, 19:10:02 (UTC +01:00)