Seite 1 von 1
spoiler-mod mit Hintergrundbild - was mach ich falsch?
Verfasst: 19.08.2008 11:05
von 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
Verfasst: 19.08.2008 11:18
von 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:
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
Verfasst: 19.08.2008 11:34
von 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
Verfasst: 19.08.2008 11:46
von 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>
Verfasst: 19.08.2008 12:09
von 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
Verfasst: 19.08.2008 12:25
von Dr.Death
Interner IRC Channel #phpbb.de Gag:
~woohoo!
<phpBBdeBot> Vorsicht ! Copyright by DrDeath !
Verfasst: 19.08.2008 13:27
von 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;
};
Verfasst: 19.08.2008 18:25
von 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).