PDA

View Full Version : BB Code Enhancements - Custom Title Spoiler Button

GamBun
03-04-2009, 10:00 PM
I have a Spoiler Tag Feature at my site that allows for a spoiler with a custom button title to be initially seen (great if you want to hint what is hidden inside).

I don't see anything exactly the same here...although some are similar... & have seen many requests for other spoiler ideas, so.... I thought I might share. ;) Please be kind as this is my first shared hack.:o

Update: Spoilers still work in version 4.x.x (including suites). Spoilers may be used as intended, in all Blog posts, forum posts, & published article content (CMS) to hide hints/cheats. I will not support it anywhere else outside of posting areas.

It's real easy. Just log into the AdminCP=>Custom BBCodes=>Add New BB Code

Then do this:

Title: Spoiler
BB Code Tag Name: Spoiler

Replacement: <div style="margin:20px; margin-top:5px">
<div class="smallfont" style="margin-bottom:2px; width:852; height:26"><right><font color="red"><b>&nbsp;</b></font></right>
<input type="button" value="Spoiler about {option}" style="font-size:10px;margin:0px;padding:0px;" onClick="if (this.parentNode.parentNode.getElementsByTagName(' div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('d iv')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('d iv')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = '{option}'; }">
</div>
<div class="alt2" style="margin: 0px; padding: 6px; border: 1px inset;">
<div style="display: none;">
{param}
</div>
</div>
</div>

Example: Hidden Text Here

description: Creates a button that hides/shows spoiler messages.

use {option}: Click "Yes" (Note: some have found they need to set this option to "No" due to personal styling, but in most cases it should be "Yes").

add the path to your "spoiler" icon The image would go in your forums images/editor directory. (Feel free to use the icon I added at the bottom of this post.. just right click on it to download it to your computer)

Remove tag if empty: Click Yes

...leave the rest at "No"

click "save" button & that's it!

>>LIVE EXAMPLE<< (http://www.g20z.com/showthread.php?5) (You can test there without signing up, if you want to see how it works, but also not this is the newer "Smooth Version (https://vborg.vbsupport.ru/showthread.php?t=248145)" the "Box Version" can be seen in the screen shots below).

The code will then be: Hidden Content Here...

This also works to nested spoilers as well!

Below there is an icon to use as well. Just add your image of choice to your path... /images/editor directory.

ENJOY! :D

Please Note: if for any reason this spoiler system breaks when converting to 4.0 upgrade. Just to BB Code manager & delete it, go through the process of adding it again, as given above. Doing this will not make you lose any forum content as long as you use the the same code (i.e. if you modified the code I gave you, then you will have to do the same again for it to work as you want). Doing this will force the new version to read the bbcode properly. It also works in CMS, but I personally am not using it right now, as it's not relevant to my site. So let me know if you have any problems, & I'll test.

We have a smooth, "NO BOX" version HERE (https://vborg.vbsupport.ru/showthread.php?t=248145) that also works for all 3X versions.
lostguy
03-05-2009, 11:31 AM
I prefer if someone Reply something to view the Hidden text ! Can u make one ?

Lg
GamBun
03-05-2009, 07:44 PM
I'm not sure exactly what you mean by that. Can you explain more? ...or give an example?
lostguy
03-05-2009, 10:48 PM
Well easy i want hide my content ! User need to reply something to VIEW the content if they didnt reply then it forever HIDEEN .I guess hard to u to create eh ?

LG
GamBun
03-07-2009, 02:56 PM
You are correct in your assumption. I don't really know how to force a post first. Sorry. :rolleyes:
Julian360
03-09-2009, 06:46 PM
I have created a small icon ... ;)
GamBun
03-10-2009, 05:25 AM
I have created a small icon ... ;)

Nice! ...& Thanks! :) I have added the one I use as well. (see first post "Screenshots").
Jasem
04-04-2009, 06:31 PM
thank you so much

Installed.
ph03nIX
04-04-2009, 08:43 PM
Lostguy, I think you are looking for something like this, https://vborg.vbsupport.ru/showthread.php?t=90985

GamEscape, thanks for this. Installed. :up:
Jafo232
04-10-2009, 01:50 AM
This seems to break passivevideo:

https://vborg.vbsupport.ru/showthread.php?t=188956&highlight=passive
Rapha81
04-13-2009, 02:31 PM
Thank you !

=> Installed.
RedSpiral
04-18-2009, 08:46 AM
Thanks :)

Nice & Simple
TheKdd
04-24-2009, 03:12 AM
Very easy. Thanks so much!
JohnBee
04-25-2009, 06:58 PM
It's a nice idea(like it), but is there a way to hide the blank bar?
It doesn't always play nice with the theme and post content

--- later that day... ---

Okay, I fixed it :)
lav0s
05-09-2009, 05:19 PM
breaks with AME
Seshat Diva
05-15-2009, 04:06 AM
Very easy, nice spoiler, thank you!:)

Installed!!
GamBun
06-08-2009, 10:35 AM
This seems to break passivevideo:

https://vborg.vbsupport.ru/showthread.php?t=188956&highlight=passive


This mod is best used for text type hidden content. It won't work well for moving content because of the fact it collapses. Sorry about that. :S

I am so glad to see this is working for many of you.:)
Slam Da Brakes
06-21-2009, 11:34 PM
Thanks. Definitely installed at my game guide site!
Jman423
06-29-2009, 06:41 PM
It's a nice idea(like it), but is there a way to hide the blank bar?
It doesn't always play nice with the theme and post content

--- later that day... ---

Okay, I fixed it :)

How did you hide the blank bar?
GamBun
07-12-2009, 06:41 PM
How did you hide the blank bar?

If you are refering to the box. Try changing this code...

border: 1px inset

to

border: 0px

Don't be afraid to play with the pixels to get desired results. You can always come back to the original code here.

I hope that helps. :)
Drache
09-10-2009, 11:22 AM
If I enable option yes then the old post with spoilers will not work. how do i fix this?
GamBun
11-29-2009, 04:34 PM
If I enable option yes then the old post with spoilers will not work. how do i fix this?
Can you share the old code for your spoilers. I don't know what you used. Just PM me about it.
ImYourLady
11-30-2009, 11:12 AM
Thanks. Works well with 3.8.2
The Smoking Gun
12-01-2009, 03:01 PM
Love it!!! Installed!!

Any chance of using {username} in title? So that each time a thread starter is displayed it is personalized by the member viewing it with their user name?

If so send the update alert I will tag too!

TSG!
Alan_SP
12-19-2009, 01:59 AM
Will this work with vB4?
tonyzhou
01-09-2010, 10:00 PM
should apply to this one as well;

XSS

test

click button twice
ndut
01-17-2010, 02:15 PM
there's diffence if no title...& with title??
Nook_Neformat
03-21-2010, 11:04 PM
anyone knows how to make spoiler work with rss?
GamBun
03-26-2010, 03:11 PM
anyone knows how to make spoiler work with rss?

Not really, This content was created for direct posting. Sorry.

Update: Spoilers still work in version 4.2.x, Tested in the Suites as well. Spoilers may be used as intended, in all Blog posts, forum posts, & published article content (CMS).

I will update the main content pages when 4.2.x becomes available in the BB CODE updates section.
The Realist
04-06-2010, 01:56 PM
Ok, installed but a slight problem with the look. I've edited the code from border: 1px inset to border: 0px and that works (see pic Unhidden) but the hidden pic still shows the long grey bar.

How can I remove this?
gendruw
04-29-2010, 10:51 AM
hi there,
if i put picture in the spoiler, is it only load if i click the button or it loads whether i click the button or not.
thanks.
GamBun
05-11-2010, 02:13 PM
hi there,
if i put picture in the spoiler, is it only load if i click the button or it loads whether i click the button or not.
thanks.


If you are referring to picture attachments, Spoilers can hide them. Upon the button click, it reveal any hidden content.
GamBun
05-11-2010, 02:16 PM
Ok, installed but a slight problem with the look. I've edited the code from border: 1px inset to border: 0px and that works (see pic Unhidden) but the hidden pic still shows the long grey bar.

How can I remove this?

The bar is the content area of what you are hiding. Unfortunately, that is default to vBulletin as part of the edit area of a post (kind of similar to that coloring of a "quote."
sumampouw
12-07-2010, 03:58 PM
Installed :)

How to get Button like in the Screenshoots ?

Seems like nice for dark themes

Thank You !
Alan_SP
12-11-2010, 09:45 PM
Use skin that looks like this one. :)
GamBun
07-23-2012, 01:59 PM
Installed :)

How to get Button like in the Screenshoots ?

Just right click on the icon with your mouse and save the image to your computer.
tommydamic68
09-01-2012, 09:58 AM
Is it possible to replace the "button" with an image that would be clickable to show hidden content?
GamBun
10-21-2012, 01:27 PM
Is it possible to replace the "button" with an image that would be clickable to show hidden content?

The button feature is default to your chosen vBulletin custom settings. you can change the color of the button though. if you know a bit about CSS. If not post again what color you want and I will give you the code to add it to the button.
fxdigi-cash
12-14-2012, 02:48 PM
I installed on vb4.2 but the function *show/hide* doesn't work at all......

any idea how to get over that?

Thanks
GamBun
12-26-2012, 06:37 AM
I installed on vb4.2 but the function *show/hide* doesn't work at all......

any idea how to get over that?

Thanks

Try using our updated code >> HERE << (https://vborg.vbsupport.ru/showthread.php?t=248145)

Be sure to follow all steps as listed. Does this help?

PM me if you want me to take a closer look at it.