Spoiler tag: Hide text from people that don't want to see it

[JJR512]

I've created a new tag...actually, I'm sure somebody has done it before, I just couldn't find it. The purpose of this tag is to hide text by making the background color behind the text and the actual text color the same color. The reason to do this is if someone wants to post some info that maybe everyone doesn't want to see...for example, on my board I have an Entertainment forum and people talk about movies. Sometimes they talk about plot points with people that have already seen the movie, but other people that haven't seen the movie yet might stumble across it and before they realize what they're reading, it's too late. Now by changing the background color under the text, it's clear to everyone that there is actually text there, so you're not hiding the fact that there is text there, just hiding what it says. In order to actually read it, the user has to highlite the text, changing it to a contrasting color. This requires a deliberate effort to read the text.

You can see an example here: http://www.jjr512.com/forums/showthr...threadid=22708 Note that there are three words: Test Test Test. The middle Test is using this tag. It appears as a black block. You can read it by highliting it.

All you have to do to implement this is edit the headinclude template, and create a custom vB Code tag.

First, edit the headinclude template. Somewhere in the styles section, add this:

.spoiler    {color: black; background: black}

Now create a custom vB tag. For vB Code tag, I used spoiler. For vB Code replacement, I used:

<font class=spoiler>{param}</font>

For vB Code example, I used [spoiler]Spoiler text[/spoiler]. For vB Code explanation, I used

The [spoiler] tag allows you to place text in your message that is unreadable, unless someone highlites it. This makes viewing the text a deliberate effort. This is for posting messages about movies or other things where you might not wish to give away plot points to those that haven't seen it yet.

And Use parameter should be set to no.

[JJR512]

I forgot to mention something. This is probably obvious, but just in case...

You don't have to use black as your text and background color if that does not fit the style of your site. You can use any color, by name if HTML recognizes the name, or by #xxxxxx code. The key, of course, is that both colors must be the same!

***

Here is a link to the thread on my site where I explained it to my users. If you weren't clear on the point of this tag, this should help, and give you an idea how to explain it to your own users.

http://www.jjr512.com/forums/showthread.php?s=&postid=214902#post214902

[Chen]

I know it's pretty later, but I just got to this thread after seeing one of tube's hack threads, and I must say that:

I love this!

[PK-Fortis]

It's reminiscent of SineSwiper's now disconinued RPGBoard, which I used to use.

I love it.

[Michael2]

Believe it or not I'm having trouble with this one. I've tried both...

}
.spoiler {color: [backcolor]; background: black} and

}
.spoiler {color: black; background: black}

When I highlight it just goes all white, no text shows. But, if I change one to white and one to black or vice versa I can see the text is there.

I'm using Opera 6, not sure if that matters, doesn't seem like it should. I'll try it in IE. Ok, actually it works in IE so I guess this is probably just something I'll have to live with. If you know of something I can change to make it work in Opera, please let me know. Thanks!

[JJR512]

I don't personally know enough about Opera to know what the problem is, but if anybody else can help, by all means, let us know!

[Sadie Frost]

I'm sorry I can't help with your problem

This is probably obvious, but I used this as my code replacement:

<font class=spoiler><smallfont><font color=white>Spoiler - Highlight to view:</color></smallfont>{param}</font>

That way, it gives direction about what to do for any members who might not know what the black box is.

[X-Fan]

Re: Spoiler tag: Hide text from people that don't want to see it

Originally posted by JJR512
The purpose of this tag is to hide text by making the background color behind the text and the actual text color the same color.

Perfect for my board, thanks JJ!

[Gutspiller]

How would I make a vb tag that would allow my users to be able to select a background text color where they can ust the normal font color with this background vb code also so they can set the background color?

Any help would be greatly appreciated.

Thanks.

[MsLedd]

Thought I'd share my own custom spoiler codes here too

I modified the $bbcode template to include the codes and their explanations, see them here.

I originally created these custom codes when our boards were running UBB, which involved hacking the perl scripts (and a lot of trial & error). vB sure makes the process easier!

The text color is slightly different than the background color (if you look carefully you can in fact read it without highlighting). The reason for this is compatability with Opera browsers, when the background and font colors were the same, Opera users were unable to properly view the spoiler text.

I also added the [spoiler] code to the 'insta-vb-code-buttons' for easy access when posting (the spoilers get used a *lot* on our boards). This involved template editing ($vbcode_buttons), as well as editing the vbcode_language.js file.

The vB Code replacements for our spoiler codes are:

<blockquote><smallfont>spoiler:</smallfont><div style="background-color:#000080"><font color="#202080">{param}</font></div></blockquote>

and

<span style="background-color:#000080"><font color="#202080">{param}</span></font>

Enjoy!

[BustaCap]

MsLedd, I'd like to give your spoiler code a shot but I'm not sure what templates I need to edit. Where exactly would I need to add your code? What editing of vbcode_language.js did you do?

Thanks,

Dave

[MsLedd]

Hi Dave,

Here's my configuration, minus the adding of the codes to the "vB codes Explained" page, which is not necessary.

Custom vB Codes (from Admin Control Panel):

#1
vB Code replacement:

<blockquote><smallfont>spoiler:</smallfont><div style="background-color:#000080"><font color="#202080">{param}</font></div></blockquote>

vB Code example:
[spoiler]The Butler did it[/spoiler]

vB Code explanation:
To mask "spoiler-ish" text, preventing accidental viewing but still making it available to those who do wish to read it by highlighting (click-dragging with the mouse) the spoiler text.

Use {option} ?
No

#2
vB Code replacement:

<span style="background-color:#000080"><font color="#202080">{param}</span></font>

vB Code example:
[spoil]Darth Vader[/spoil] is Luke Skywalker's father

vB Code explanation:
Alternate spoiler tag - To mask "spoiler-ish" text, preventing accidental viewing but still making it available to those who do wish to read it by highlighting (click-dragging with the mouse) the spoiler text.

Use {option} ?
No

Edit Template: vbcode_buttons

Find this line:

<input type="button" class="bginput" value="Quote" title="Insert Quote" onclick="vbcode(this.form,'QUOTE','')" onmouseover="stat('quote')">

Which is followed by a <br>

Add this line just before the <br>

<input type="button" class="bginput" value="Spoiler" title="Insert Spoiler Text" onclick="vbcode(this.form,'SPOILER','')" onmouseover="stat('spoiler')">

annd finally, my vbcode_language.js file is attached.

Enjoy!

[BustaCap]

Thanks! I'll give it a try tonight.

Dave

[Omega One]

How could one add the spoiler button to the Quick Reply hack?

I've been trying but keep getting a JavaScript error

[BillAlpha]

Hi MsLedd,

I don't suppose you still have the amended "vbcode_language.js" file handy?

Cheers,

Bill