Brand New Spoiler Code

[japankaizen bb]

I am sorry. I don't know much about coding. Where am I suppose to put that code to activate spoiler on my forum??

[stitch626]

I am sorry. I don't know much about coding. Where am I suppose to put that code to activate spoiler on my forum??

Hi there japankaizen,
It's real easy. Just go to your ACP--->Posting and on that very first page you will see a button to the left called "Add a new BBCode" Click it. In the BBcode usage box (top Box) enter the following code.

Code: Select all

[spoiler]{TEXT}[/spoiler]

Then in the "HTML Replacement" box (lower box) enter this code:

Spoiler:

<div style="padding: 3px; 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;\'>hide</a>'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerHTML = '<b>Spoiler: </b><a href=\'#\' onClick=\'return false;\'>show</a>'; }" /><b>Spoiler: </b><a href="#" onClick="return false;">show</a></span></div><div class="quotecontent"><div style="display: none;">{TEXT}</div></div></div>

In the help line box you can add a short description for your users so when they hover their mouse over the bbcode button they will get a brief description of what it does.
Then lastly you have the option of showing the button on the posting page.

Good Luck

[japankaizen bb]

Thank you very much for your clear explanation. It works perfect..

[Sithnar]

teenpspjunkie,

Just replace your word "blah" to {TEXT2}

Code: Select all

[spoiler={TEXT2}]{Text}[/spoiler]

And in the HTML Replacement replace the word "Spoiler" to {TEXT2}

Code: Select all

<div style="padding: 3px; 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>{TEXT2}: </b><a href=\'#\' onClick=\'return false;\'>hide</a>'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerHTML = '<b>Spoiler: </b><a href=\'#\' onClick=\'return false;\'>show</a>'; }" /><b>Spoiler: </b><a href="#" onClick="return false;">show</a></span></div><div class="quotecontent"><div style="display: none;">{TEXT}</div></div></div>

Sniper i tried this but it didnt work. i had to change {TEXT} to {TEXT1} to make it work.

just thought you might like to know

[beggers]

Just to throw in my two cents, I prefer a mouseover spoiler because it eliminates any need for clicking. The spoiler section is black until you move your mouse to it, upon which the text appears in white on the black background. Move your mouse away and it disappears again. This is one I converted to phpBB3 from my old forum.

This code has a major advantage in that you can use it on individual words or phrases within a sentence without introducing line breaks, etc. Works on IE and Firefox.

BBCode usage

Code: Select all

[spoiler]{TEXT}[/spoiler]

HTML replacement

Code: Select all

<SPAN style="background-color:#000000;color:#000000" onmouseover="this.style.color='#FFFFFF';" onmouseout="this.style.color=this.style.backgroundColor='#000000'">{TEXT}</span>

Help line

Code: Select all

[spoiler]{TEXT}[/spoiler] hides a section of text until touched by mouse

[Sithnar]

nice idea! could be a pain if your copying something tho, but i like it

[G Unit Tim]

Sorry to hijack your thread, but I perfected your code.. This one uses CSS (and proSilver markup-style) so it adapts to the style and is simpler.

Code: Select all

<dl class="codebox"><dt>Spoiler: <a href="javascript: void(0);" onClick="var spoiler = this.parentNode.parentNode.getElementsByTagName('dd')[0]; if ( spoiler.style.display == 'none' ) { spoiler.style.display = 'block'; this.innerHTML = 'hide'; } else { spoiler.style.display = 'none'; this.innerHTML = 'show'; };">show</a></dt><dd style="display: none;">{TEXT}</dd></dl>

This one is better for me... I have a dark themed board, and the original one shows up as a white box with white text in the spoiler... this one looks just like the code bbcode

[Sniper_E]

Yea, when you guys are sprucing this up.... make sure it works in both prosilver and subsilver2.... or I will be looking for you!

I'll try this later to see who I need to find.

[relaxed4u Dragan]

Example:
http://gfx-pros.com/phpBB3rc1/viewtopic.php?f=3&t=4

BB Usage:

Code: Select all

[spoiler]{TEXT}[/spoiler]

Works perfectly with phpbb ver.3.0.5 CABlack Style !

I create a little modification for my style: change backgroun color, etc...

thank you