spoiler-mod mit Hintergrundbild - was mach ich falsch?

[MalkContent]

<div style="padding: 3px; background-image:url('E:/server/www/sinisterlore.de/public_html/forum/styles/prosilver/images'); background-color: #FFFFFF; border: 1px solid #d8d8d8; font-size: 1em;"><div style="text-transform: uppercase; border-bottom: 1px solid #CCCCCC; margin-bottom: 3px; font-size: 0.8em; font-weight: bold; display: block;"><span onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerHTML = '<b>Spoiler: </b><a href=\'#\' onClick=\'return false;\'>ausblenden</a>'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerHTML = '<b>Spoiler: </b><a href=\'#\' onClick=\'return false;\'>anzeigen</a>'; }" /><b>Spoiler: </b><a href="#" onClick="return false;">anzeigen</a></span></div><div class="quotecontent"><div style="display: none;">{TEXT}</div></div></div>

[/quote]
Das rot angestrichene ist von mir hinzugefügt und ich verstehe nicht, wieso es nicht funktioniert... ich habe natürlich auch einfach den Pfad './styles/prosilver/images' ausprobiert, der aktuelle ist nur um extra Nummer sicher zu gehen.

darüber hinaus wüsste ich gerne, ob es möglich ist, den spoiler über BBCode(äh... also die abänderung von dem Code oben) mit runden Ecken zu versehen, aber das ist erstmal zweitrangig

[Dr.Death]

Die URL ist eine URL und keine Laufwerksanzeige von Deinem Server.

Gib im ROT markierten Bereich mal die URL an, also das, wie man das Bild auch über einen Browser erreichen kann.

Mit:

Code: Alles auswählen

./styles/prosilver/images

kann es nicht funktionieren. Dies ist ja nur der Pfad zur Datei.... aber wie heisst das Bild für den Hintergrund?

Beispiel: Wenn das Hintergrundbild " hintergrund.gif " heißt, und es im Pfad : styles/prosilver/images liegt, dann wäre die korrekte Angabe:

./styles/prosilver/images/hintergrundbild.gif

[MalkContent]

auuuutsch -.-

ok, das war peinlich, aber Problem gelöst >.>

wegen runden Ecken probier ich mal mit Nifty Corners rum und schreib, wenns was gebracht hat

[Dr.Death]

Runde Ecken werden in prosilver so bereitgestellt:


Obere Ecken:

Code: Alles auswählen

	<div class="panel">
		<div class="inner"><span class="corners-top"><span></span></span>

Dann folgt Dein Inhalt

Untere Ecken:

Code: Alles auswählen

		<span class="corners-bottom"><span></span></span></div>
	</div>

[MalkContent]

woohoo, danke

<div class="panel" style="background: url('./styles/prosilver/images/spoilerbg2.jpg') center top no-repeat #000000; font-size: 1em;">
<div class="inner"><span class="corners-top"><span></span></span>
<div style="text-transform: uppercase; border-bottom: 1px solid #CCCCCC; margin-bottom: 3px; font-size: 0.8em; font-weight: bold; display: block;"><span onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerHTML = '<b>Spoiler: </b><a href=\'#\' onClick=\'return false;\'>ausblenden</a>'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerHTML = '<b>Spoiler: </b><a href=\'#\' onClick=\'return false;\'>anzeigen</a>'; }" /><b>Spoiler: </b><a href="#" onClick="return false;">anzeigen</a></span></div><div class="quotecontent"><div style="display: none;">{TEXT}</div></div>
<span class="corners-bottom"><span></span></span></div>
</div>

sieht schick aus

EDIT: background zusammengefasst

[Dr.Death]

Interner IRC Channel #phpbb.de Gag:

~woohoo!
<phpBBdeBot> Vorsicht ! Copyright by DrDeath !

[MalkContent]

hmm
okay, nochmal was kniffliges

ich würde gerne mehrere Hintergrundbilder in den div hineinsetzen über

<div class="panel" style="background-image:url('./styles/prosilver/images/spoilerbg.jpg'), url('./styles/prosilver/images/spoilerbg2.jpg'); background-repeat:no-repeat, no-repeat; background-position:center top, center bottom; font-size: 1em;">
rest wie oben

was nicht funktioniert und wenn ich es wie hier beschrieben probieren will, weiß ich schlicht nicht wie ich dem inner html-code danach die eigenschaften zuweisen soll/ob ich das überhaupt so ohne weiteres kann >.>

im style block anstelle von background versucht:

innerHTML = '<li><span>Booby</span></li>';
li {
background: url('./styles/prosilver/images/spoilerbg.jpg') center no-repeat;
}
li span {
background: url('./styles/prosilver/images/spoilerbg2.jpg') top right no-repeat;
display: block;
};

[MalkContent]

okay
ich hab ein bisschen rumgebastelt, weil ich aus einem anderen Forum diesen tollen Button da kannte
zusätzlich gibts jetzt noch die Möglichkeit dem Spoiler einen Namen/Beschreibung/Monolog beizufügen

Zwischenstand:

Code: Alles auswählen

<div class="panel">
<div class="inner"><span class="corners-top"><span></span></span>

<div class="smallfont" style="margin-bottom:2px;border-bottom: 1px solid #CCCCCC;"><b>Spoiler</b> <i>{TEXT1}</i>: <input type="button" value="Spoiler" style="width:80px;font-size:10px;margin:0px;padding:0px;" onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';        this.innerText = ''; this.value = 'Schließen'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Aufklappen'; }">
</div>
<div class="alt2" style="margin: 0px; padding: 6px;">
<div style="display: none;">
{TEXT2}
</div>
</div>

<span class="corners-bottom"><span></span></span></div>
</div>

Ich hab atm leider nichts neues zu den mehrfachen Hintergrundbildern, d.h. benötige dahingehend immer noch Hilfe, bin aber dabei die Idee zu verwerfen
Dazu kommt jetzt noch, dass ich nicht weiß, wie ich den Kommentar {TEXT1} optional mache, wenn ich nichts eingebe erscheint im Forum schlicht der Code und via Script TEXT1 einen Wert zuzuweisen funktioniert nicht, weil er den Befehl auf Grund der fehlenden Eingabe nach dem '=' nicht erkennt. ERLEDIGT
Zusätzlich stören mich die sichtbaren weißen Ecken des abgerundeten Panels und ich wüsste gerne, wo sich die definitionen und Pfadangaben für die span class "corners-bottom" und "corners-top" befinden, die ich leider vergeblich gesucht hab (die Bilddateien für die Ecken habe ich schon gefunden, will aber neue classes für die corners in den posts verwenden um andere Bilder verwenden zu können, damit ich nicht auch die schon im Forum befindlichen Ecken einfärbe).