Anleitung: Spoiler per MyCode einbauen

Anleitung: Spoiler per MyCode einbauen - Druckversion

+- MyBB.de Forum (https://www.mybb.de/forum)
+-- Forum: Anpassungen (https://www.mybb.de/forum/forum-47.html)
+--- Forum: Tutorials (https://www.mybb.de/forum/forum-86.html)
+--- Thema: Anleitung: Spoiler per MyCode einbauen (/thread-31054.html)

Seiten: Seiten: 1 2

Anleitung: Spoiler per MyCode einbauen - Nighthawk - 30.11.2014

Huhu,

ich habe gesehen, dass viele sich für ihr MyBB Forum eine "Spoiler" Funktion wünschen, also habe ich mich mal an die Arbeit gemacht und 2 Spoiler arten mittels MyCode gebastelt, den CSS Code dazu habe ich mir bei dem User Juventiner abgeschaut.

Hier nun die Anleitung in kooperation mit Juventiner, da ich bei ihm den CSS Code dazu abgeschaut habe:

Normaler Spoiler

• Geht in das Adminpanel eures Forum
• Klickt dort auf Konfiguration
• Dort klickt ihr auf MyCode
• Dort dann auf Neuen MyCode hinzufügen klicken
• Bei Titel und Beschreibung könnt ihr hinschreiben was ihr wollt
• Bei Regulärer Ausdruck tragt ihr folgendes ein

Code:
\[spoiler\](.*?)\[/spoiler\]

• Bei Ersetzung tragt ihr folgendes ein

Code:
<div class="spoiler-block"><div class="spoiler-header">Warnung! Spoiler! <input type="button" class="spoiler-form-button" value="Anschauen" 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 = 'verbirg den Text'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Anschauen';}"/></div><div class="spoiler-body"><div style="display: none;">$1</div></div></div>

• Bei Aktiviert klickt ihr JA an
• Bei ID tragt ihr die nächste ID ein (z.B. 1, 2, 3, ...)
• Klickt auf MyCode speichern
• Fertig!

Wenn ihr eine Beschreibung für euren Spoiler eingeben wollt, geht ihr genau so wie oben beschrieben vor, nur der Reguläre Ausdruck und Ersetzung sind anders!

Spoiler mit Beschreibung

• Geht in das Adminpanel eures Forum
• Klickt dort auf Konfiguration
• Dort klickt ihr auf MyCode
• Dort dann auf Neuen MyCode hinzufügen klicken
• Bei Titel und Beschreibung könnt ihr hinschreiben was ihr wollt
• Bei Regulärer Ausdruck tragt ihr folgendes ein

Code:
\[spoiler=(.*?)\](.*?)\[/spoiler\]

• Bei Ersetzung tragt ihr folgendes ein

Code:
<div class="spoiler-block"><div class="spoiler-header">Warnung! Spoiler! ($1) <input type="button" class="spoiler-form-button" value="Anschauen" 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 = 'verbirg den Text'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Anschauen';}"/></div><div class="spoiler-body"><div style="display: none;">$2</div></div></div>

• Bei Aktiviert klickt ihr JA an
• Bei ID tragt ihr die nächste ID ein (z.B. 1, 2, 3, ...)
• Klickt auf MyCode speichern
• Fertig!

CSS Code
• Geht in das Adminpanel eures Forum
• Klickt dort auf Templates & Style
• Lasst den Reiter auf Themes
• Klickt dort euer Theme an welches ihr derzeit aktiv habt oder bearbeiten wollt
• Dort klickt ihr dann auf Showthread.css
• Klickt dann auf den Reiter Stylesheet bearbeiten: Fortgeschrittene Methode
• Scrollt dort bis ans Ende (oder wo auch immer ihr wollt) und tragt folgendes ein

Code:
.spoiler-block {

    margin: 5px 2em;

    background: inherit;

    border: 1px solid #E6E6E6;

    padding: 0px;

    border-spacing: 0px;

    text-indent: 0;

}

.spoiler-header {

    display: block;

    font-weight: normal;

    padding: 4px;

    color: #000000;

    background: #CCCCCC;

    border-bottom: 1px solid #CCCCCC;

    font-size: 8pt;

    text-indent: 0;

}

.spoiler-form-button {

    background-color: #dedfdf;

    color: #222222;

    font-size: 10pt;

}

.spoiler-body {

    margin: 4px;

    overflow: auto;

    font-size: 10pt;

    display: block;

    text-indent: 0;

}

Die Farben könnt ihr eurem eigenen Geschmack anpassen!

• Klickt auf Änderung speichern & schließen
• Fertig

Nun könnt ihr in eurem Forum mittels dem Code

Code:
[spoiler]EUER TEXT WHATEVER[/spoiler]

oder

Code:
[spoiler=Beschreibung]EUER TEXT WHATEVER[/spoiler]

die Spoiler benutzen!

Oben im Ersetzungstext könnt ihr natürlich das Warnung! Spoiler!, Anschauen, Verbirg den Text durch euren eigenen Text z.B. warning! spoiler!, show/look at, hide the text, ... ersetzen oder wie ihr mögt Smile

Achtung: Evtl. müsst ihr euren Browserverlauf löschen, das Forum neu laden im Browser und dann wieder einloggen, um die Spoiler zu sehen und zu benutzen.

Viel Spaß damit und das es bei euch hoffentlich klappt!

So sollte es am Ende bei euch dann aussehen:

RE: Anleitung: Spoiler per MyCode einbauen - Gerti - 10.03.2019

hallo,

wie kann in diesem Abschnitt

Code:
<div class="spoiler-block"><div class="spoiler-header">Warnung! Spoiler! ($1) <input type="button" class="spoiler-form-button" value="Spoiler" 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 = 'verbirg den Text'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Anschauen';}"/></div><div class="spoiler-body"><div style="display: none;">$2</div></div></div>

hinteroder vor den Buttons "verbirg den Text" und "Anschauen" jeweils ein Icon plaziert werden bzw. wie die Texte durch Icons ersetzen?

Ergänzen mit <img src=\"grafik.png\"> ergab (mit oder ohne Escaped) leider keinen Erfolg.

Vielleicht hat mir einer der PHP-Profis eine Lösung dazu.

RE: Anleitung: Spoiler per MyCode einbauen - Gerti - 13.03.2019

Bump, in der Hoffnung das jemand eine Lösung hat.

RE: Anleitung: Spoiler per MyCode einbauen - Schnapsnase - 13.03.2019

Versuche mal statt

Code:
.............this.innerText = ''; this.value = 'verbirg den Text';...............

sowas in der Art. Ich hab`s aber nicht getestet. Wink

Code:
'.............this.innerHTML = '<img src=\'path/grafik.jpg\'>';

RE: Anleitung: Spoiler per MyCode einbauen - Gerti - 04.04.2019

Egal wie ich es anstelle, es funktioniert leider nicht.

Auch dieser gefundene Lösungweg brachte mir keinen Erfolg.

Hätte noch jemand einen Lösungsvoschlag wie man die Texte "Spoiler" "Ansehen" "Verbergen" durch Grafiken ersetzen kann?

RE: Anleitung: Spoiler per MyCode einbauen - itsmeJAY - 04.04.2019

Hi,

gehe einfach nach der Anleitung hier vor und ersetze

Code:
<input type="button"

mit

Code:
<img src="https://beispiel.de/bild.png"

dann sollte es doch klappen Big Grin

Zitat:<div class="spoiler-block"><div class="spoiler-header"><img src="https://beispiel.de/bild.png" class="spoiler-form-button" value="Jo" 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 = 'verbirg den Text'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Anschauen';}"/></div><div class="spoiler-body"><div style="display: none;">$1</div></div></div>

RE: Anleitung: Spoiler per MyCode einbauen - doylecc - 04.04.2019

Versuche es mal damit:

Code:
<div style="margin:5px 20px 20px 20px;"><div><b>Spoiler:</b> <img src="images/new_pm.png" alt="Anschauen" onclick="$(this).hide();$(this).siblings().show();$(this).parent().next().show();" /> <img src="images/old_pm.png" alt="Verstecken" style="display: none;" onclick="$(this).hide();$(this).siblings().show();$(this).parent().next().hide();" /></div><div class="spoilerbody" style="display: none;">$1</div></div>

Das sind jetzt nur Beispielgrafiken aus dem MyBB image Ordner

RE: Anleitung: Spoiler per MyCode einbauen - itsmeJAY - 04.04.2019

(10.03.2019, 13:50)Gerti schrieb: Ergänzen mit <img src=\"grafik.png\"> ergab (mit oder ohne Escaped) leider keinen Erfolg.

Wie kommst du überhaupt darauf zu maskieren? Du musst in HTML nicht mit \ maskieren. Macht im Grunde in PHP Sinn wenn du bspw. in eine Variable den Code reinschreiben willst, sonst geht der Interpreter davon aus, dass das " das Ende des Inhalts der VAR bedeutet.

Also..

Code:
$var = "<img src="grafik.png">";

würde bedeuten, die Variable $var würde nur bis = gefüllt - und PHP würde meckern... Toungue

Richtig wäre somit:

PHP-Code:
$var = "<img src=\"grafik.png\">"; 

Simple erklärt: https://www.php-kurs.com/sonderzeichen-maskieren.htm

RE: Anleitung: Spoiler per MyCode einbauen - [ExiTuS] - 04.04.2019

Das kann so nicht funktionieren, weil es ein input-Element (type: button) ist.
Der Text des Buttons wird in this.value definiert. Dort kann nur Text in Form von Zeichen stehen, auf keinen Fall HTML-Tags!

Eine Alternative ist es, den input-Button durch einen einfachen Link oder irgendeinen anderes Element zu ersetzen. Dann aber entsprechend den JS-Code anpassen.
<a href="#" class="spoiler-form-button" onclick="...">
<img src="grafik.png" onclick="...">

Oder ganz einfach mittels CSS eine Grafik als Hintergrundbild des Buttons setzen:

Code:
.spoiler-form_button {

[...]

background: url('grafik.png') 10px 50% no-repeat;

padding-left: 30px;

}

px-Werte nach Wahl anpassen!

Wenn sich die Grafik nach dem Klick ändern soll, ändere das JS:
this.backgroundImage="url('grafik2.png')";

(nicht live getestet)

[ExiTuS]

RE: Anleitung: Spoiler per MyCode einbauen - Gerti - 04.04.2019

Sorry, soweit geht mein Wissen bzgl. JavaScript etc. nicht, das ich Teillösungen einarbeiten könnte. (Mein professionelles Fachgebiet liegt ganz wo anders, was jedoch hier im Forum nicht angebracht ist.)

Ich möchte an Stelle der drei in Rot hervorgehoben Texte (zur besseren Darstellung bewusst auf die Code-Formatierung verzichtet) durch je eine eigene Grafik ersetzen.

<MyBB-Code>
<div class="spoiler-block"><div class="spoiler-header">Warnung! Spoiler! ($1) <input type="button" class="spoiler-form-button" value="Spoiler" 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 = 'Verbirg den Text'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Text nochmal ansehen';}"/></div><div class="spoiler-body"><div style="display: none;">$2</div></div></div>
</MyBB-Code>

Gebe gerne ein Bierchen (Paypaladresse via PN senden) aus, wenn jemand den korrekten vollständigen Code hier im Forum (damit künftig alle MyBB-User am Ergebnis partizipieren können) postet.