vb.org Archive - Miscellaneous Hacks - BBcode Mouse Over Spoiler Tag

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 3.6 Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=192)

- - Miscellaneous Hacks - BBcode Mouse Over Spoiler Tag (https://vborg.vbsupport.ru/showthread.php?t=154586)

BBcode Mouse Over Spoiler Tag

Im not a huge fan of all the spoiler tags that require buttons to activate the hidden text, nor can they be used within a paragraph of text multiple times, so I wrote one that you can place the tags around the text within a paragraph (multiple times if you wish) and all one has to do is MOUSE OVER each one to reviel the hidden text. The reason I say "each one" is that you can have a review with multiple spoiler tags within the review and each one is activated seperately upon mouse over.

2 Simple Steps

Step 1 - Add new BB Code as follows:

Title: Spoiler
Tag: spoiler
Replacement:

Code:

<span class="spoiler" onmouseover="this.style.color='#FFFFFF';" onmouseout="this.style.color=this.style.backgroundColor='#000000'">{param}</span>

Example:

Code:

[spoiler]Stuff goes here[/spoiler]

Description: The spoiler tag will hide the text between the tags, and will appear only when you put your mouse over the hidden text.

Step 2 - Add an Additional CSS Definition

Edit the Style(s) that you wish to apply this too .... (Style Manager >> All Style Options) scroll down towards the very bottom of the Options and you will see an area for "Additional CSS Definitions " Enter the below code to the end of the Additional CSS Definitions

Code:

.spoiler

{

color: #000000;

text-decoration: none;

background-color: #000000;

}

Thats all there is too it.

Quote:

Originally Posted by Feckie (Roger) (Post 1312262)

Nice One

Thanks.. my members love it.

Could make the replacement as it is shown below, to give users more warning.
I know people can just add this if they want, but it might make life easier for some users.

Code:

<font color="#FF0000"><b>Warning! Spoiler Below:</b></font><br><span class="spoiler" onmouseover="this.style.color='#FFFFFF';" onmouseout="this.style.color=this.style.backgroundColor='#000000'">{param}</span>

So you get the result of Warning! Spoiler Below: above your spoiler.

Quote:

Originally Posted by Liberation (Post 1313423)

Could make the replacement as it is shown below, to give users more warning.
I know people can just add this if they want, but it might make life easier for some users.

Code:

<font color="#FF0000"><b>Warning! Spoiler Below:</b></font><br><span class="spoiler" onmouseover="this.style.color='#FFFFFF';" onmouseout="this.style.color=this.style.backgroundColor='#000000'">{param}</span>

So you get the result of Warning! Spoiler Below: above your spoiler.

Cool addition :up: Thanks!

Quote:

Originally Posted by bobster65 (Post 1313536)

Cool addition :up: Thanks!

No problem, :)

Great job! Worked smooth!

bobster65 install:up:

Thanks for doing this. I prefer this mouse-over method to the other clicking and dragging ones.

Following on Liberation's suggestion, I've edited my Replacement text to remove the line break so I could embed multiple Spoiler tags in one paragraph, yet still alert the user to a Spoiler. It looks like this:

[Spoiler:] and spoiler stuff to follow on the same line.

Code:

<b>[<i>Spoiler:</i>]</b> <span class="spoiler" onmouseover="this.style.color='#FFFFFF';" onmouseout="this.style.color=this.style.backgroundColor='#000000'">Stuff goes here</span>

I've also attached an optional Icon to use with the Spoiler Tag.

X vBulletin 3.8.12 by vBS Debug Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (6)bbcode_code_printable (3)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (1)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (10)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages:

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01174 seconds Memory Usage 1,735KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (6)bbcode_code_printable (3)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (1)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (10)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: