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)

bobster65

08-07-2007 10:00 PM

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.

Feckie (Roger)

08-07-2007 10:27 PM

Nice One

bobster65

08-08-2007 01:03 PM

Quote:

Originally Posted by Feckie (Roger) (Post 1312262)

Nice One

Thanks.. my members love it.

Liberation

08-09-2007 09:23 AM

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.

bobster65

08-09-2007 11:45 AM

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!

rjmjr69

08-10-2007 04:00 AM

I dont get it...

Liberation

08-11-2007 10:37 AM

Quote:

Originally Posted by bobster65 (Post 1313536)

Cool addition :up: Thanks!

No problem, :)

David Copeland

08-23-2007 03:32 PM

Great job! Worked smooth!

HeRmAn'S

08-25-2007 03:17 PM

bobster65 install:up:

Trillian

08-25-2007 03:21 PM

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.

KevNJ

09-19-2007 02:11 PM

Simple, easy install, very effective. Thanks!

AzH	09-19-2007 05:51 PM

ONly effective with black text though, isn't it? Won't work on dark styles as it is or if someone has an option of light and dark styles for their members.

bobster65

09-19-2007 07:22 PM

Quote:

Originally Posted by AzH (Post 1342579)

ONly effective with black text though, isn't it? Won't work on dark styles as it is or if someone has an option of light and dark styles for their members.

Just change the Black (#000000) and White (#FFFFFF) color codes to suit your needs.

razmyth

10-13-2007 12:47 AM

Just some additions I did to make this code more fun, also solves problems like bgcolours, text colours, skins, etc. Thought I'd share it cause I loved the original code this thread provided.

Code:

<table  border bgcolor="yellow"><tr><td><font size= 3><font color="red"><b>Spoiler Alert:  </b></font><font color="yellow"><span class="spoiler" onmouseover="this.style.color='#000000';" onmouseout="this.style.color=this.style.backgroundColor='#FFFF00'">{param}</span></font></tr></table>

Then the css code

Code:

.spoiler

{

color: #FFFF00;

text-decoration: none;

background-color: #FFFF00;

}

Results:
https://vborg.vbsupport.ru/external/2007/10/29.jpg

Magnumutz

10-13-2007 07:55 AM

Dude... remove that second picture, it's offensive.

razmyth

10-13-2007 12:06 PM

Hardly offensive but i won't argue, done

repairman jack

05-07-2008 01:18 PM

Quote:

Originally Posted by Trillian (Post 1325454)

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

How do you add this icon to vBulletin?

bobster65

05-07-2008 01:24 PM

Quote:

Originally Posted by repairman jack (Post 1511615)

How do you add this icon to vBulletin?

upload the image to your images directory and then in the BB Code Manager, edit the spoiler BB Code and add the path to the image in the "Button Image (Optional)" area of the form.

repairman jack

05-07-2008 02:03 PM

Quote:

Originally Posted by bobster65 (Post 1511619)

upload the image to your images directory and then in the BB Code Manager, edit the spoiler BB Code and add the path to the image in the "Button Image (Optional)" area of the form.

Great. Thanks!

Thelonius Beck

05-17-2008 03:04 PM

This works well with 3.7 as well. Just so everyone is aware. ;)

All times are GMT. The time now is 02:35 PM.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01194 seconds Memory Usage 1,760KB 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 (8)bbcode_code_printable (7)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (20)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 bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: