Hallo, Gast! (Registrieren)

Letzte Ankündigung: MyBB 1.8.14 veröffentlicht (30.11.17)


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
Anleitung: Spoiler per MyCode einbauen
#1
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:
       
Zitieren