StGaensler
27.11.2004, 12:31
Hallo,
ich hatte ein wenig früher schon mal eine Anleitung für einen Spoiler-Tag (http://www.vbulletin-germany.com/forum/showthread.php?p=85754#post85754) gepostet. Der Nachteil dieser Lösung war, dass man in diesem Spoiler-Tag keine Grafiken, Farben, Smileys, ... verwenden konnte, da diese sonst sofort angezeigt wurden.
Ich habe nun ein wenig herumgebastelt, und einen neuen Tag entworfen, bei dem das alles möglich ist.
Hier die Anleitung (vB 3.0.3):
Neuen vB Code erstellen (ist nicht nötig, wenn ihr meinen alten Code schon eingetragen habt - hier ändert sich nichts):
Titel: Spoiler-Tag
Tag: spoiler
Einzufügender Code:
<div style="margin:20px; margin-top:5px; ">
<div class="smallfont" style="margin-bottom: 2px">Spoiler:</div>
<table border="0" cellpadding="6" cellspacing="0" width="100%">
<tr>
<td class="alt2" style="border:1px inset;">
<div class="spoiler">
{param}
</div>
</td>
</tr>
</table>
</div>
</div>
Beispiel + Beschreibung: Lasst euch was einfallen :)
{option} verwenden: Nein
Und dann abspeichern.
Nun zu den Style-Einstellungen gehen und "CSS Einstellungen" auswählen.
Im Feld "Zusätzliche CSS-Definitionen" folgendes entfernen (sofern ihr dass irgendwann mal eingetragen habt):
/* ***** spoiler ***** */
.spoiler {
color: #FARBE1;
background-color: #FARBE1;
}
.spoiler:active {
color: #FARBE2;
}
Dann geht auf "Styles verwalten" und wählt bei eurem Style "Templates ändern" aus. Dort dann bei "headinclude" auf [(Ver)ändern] klicken.
Über der Zeile "<!-- / CSS Stylesheet -->" folgendes einfügen:
<style type="text/css">
<if condition="is_browser('ie')">
/* ***** spoiler ***** */
.spoiler {color: #FARBE1 background-color: #FARBE1}
.spoiler:active {color: #FARBE2;}
<else />
/* ***** spoiler ***** */
.spoiler {width:10em; height:2.1ex; overflow:hidden;}
.spoiler:before {content:"»bitte hier klicken«";}
.spoiler:active:before {content:"";}
.spoiler:active {width:100%; height:100%;}
</if>
</style>
In diesem Code #FARBE1; durch das ersetzen, was bei "Style-Einstellungen" -> "CSS Einstellungen" -> "Zweite alternierende Farbe" bei "Hintergrund" steht; #FARBE2; durch das ersetzen, was dort als "Schriftfarbe" steht.
Und Speichern nicht vergessen. :)
Dieser Code sorgt dafür, dass der IE einen anderes Stylesheet für den Spoiler-Tag bekommt, da er einiges nicht unterstützt. Beim IE wird der erweiterte Spoiler-Tag nicht angezeigt - er sieht dann wie der alte Spoiler-Tag aus.
Nun könnt ihr in eurem Forum mit [spoiler] einen Spoiler einfügen.
Um den Text erscheinen klickt man einfach auf das »bitte hier klicken«, und hält die Maus gedrückt.
Man kann es auch so realisieren, dass der Text angezeigt wird, sobald sich die Maus auf dem Text befindet. Dazu muss oben im CSS-Code "active" durch "hover" ersetzt werden.
Viele Grüße,
Stefan
ich hatte ein wenig früher schon mal eine Anleitung für einen Spoiler-Tag (http://www.vbulletin-germany.com/forum/showthread.php?p=85754#post85754) gepostet. Der Nachteil dieser Lösung war, dass man in diesem Spoiler-Tag keine Grafiken, Farben, Smileys, ... verwenden konnte, da diese sonst sofort angezeigt wurden.
Ich habe nun ein wenig herumgebastelt, und einen neuen Tag entworfen, bei dem das alles möglich ist.
Hier die Anleitung (vB 3.0.3):
Neuen vB Code erstellen (ist nicht nötig, wenn ihr meinen alten Code schon eingetragen habt - hier ändert sich nichts):
Titel: Spoiler-Tag
Tag: spoiler
Einzufügender Code:
<div style="margin:20px; margin-top:5px; ">
<div class="smallfont" style="margin-bottom: 2px">Spoiler:</div>
<table border="0" cellpadding="6" cellspacing="0" width="100%">
<tr>
<td class="alt2" style="border:1px inset;">
<div class="spoiler">
{param}
</div>
</td>
</tr>
</table>
</div>
</div>
Beispiel + Beschreibung: Lasst euch was einfallen :)
{option} verwenden: Nein
Und dann abspeichern.
Nun zu den Style-Einstellungen gehen und "CSS Einstellungen" auswählen.
Im Feld "Zusätzliche CSS-Definitionen" folgendes entfernen (sofern ihr dass irgendwann mal eingetragen habt):
/* ***** spoiler ***** */
.spoiler {
color: #FARBE1;
background-color: #FARBE1;
}
.spoiler:active {
color: #FARBE2;
}
Dann geht auf "Styles verwalten" und wählt bei eurem Style "Templates ändern" aus. Dort dann bei "headinclude" auf [(Ver)ändern] klicken.
Über der Zeile "<!-- / CSS Stylesheet -->" folgendes einfügen:
<style type="text/css">
<if condition="is_browser('ie')">
/* ***** spoiler ***** */
.spoiler {color: #FARBE1 background-color: #FARBE1}
.spoiler:active {color: #FARBE2;}
<else />
/* ***** spoiler ***** */
.spoiler {width:10em; height:2.1ex; overflow:hidden;}
.spoiler:before {content:"»bitte hier klicken«";}
.spoiler:active:before {content:"";}
.spoiler:active {width:100%; height:100%;}
</if>
</style>
In diesem Code #FARBE1; durch das ersetzen, was bei "Style-Einstellungen" -> "CSS Einstellungen" -> "Zweite alternierende Farbe" bei "Hintergrund" steht; #FARBE2; durch das ersetzen, was dort als "Schriftfarbe" steht.
Und Speichern nicht vergessen. :)
Dieser Code sorgt dafür, dass der IE einen anderes Stylesheet für den Spoiler-Tag bekommt, da er einiges nicht unterstützt. Beim IE wird der erweiterte Spoiler-Tag nicht angezeigt - er sieht dann wie der alte Spoiler-Tag aus.
Nun könnt ihr in eurem Forum mit [spoiler] einen Spoiler einfügen.
Um den Text erscheinen klickt man einfach auf das »bitte hier klicken«, und hält die Maus gedrückt.
Man kann es auch so realisieren, dass der Text angezeigt wird, sobald sich die Maus auf dem Text befindet. Dazu muss oben im CSS-Code "active" durch "hover" ersetzt werden.
Viele Grüße,
Stefan