Spoilers?

[John]

I know some forums have special coding to hide Spoilers behind an LJ Cut-like thingamajig. Would it be possible to get one for these forums as well?

It'll be easier to post large pictures behind it and wont overload anyones internet.

[GamePolitics]

Hmmmm.... anyone know if that's possible in Vbulletin?

King N?

[BearDogg-X]

I think the only thing that can be done regarding spoilers is typing the spoiler text in white.

They have it on FanForum, which uses vBulletin, but I wouldn't know how to use it, as I've never have.

[Sigma_7]

I know this is an old thread, but I did some checking in MS Paint, and the RGB values appear to be 245, 245, 255. In hex, that's F5F5FF. Try it out below:

If you can't see this text, then the colour is correct.

You can also use "faded" text that's hard to read but visible enough to show that it is a spoiler - color code is E4E7F5

This is faded text - difficult to read.

If you want to use faded text as close to the visibility threshold, try ECECFF.
This is faded text - unreadable.

If you know how to use coloured text in the forums, you'll know how to do spoilers. If you don't, you'll learn very fast since the option is highly visible in explorer - it's not much of a jump to select custom colours by replacing the colour name with the hex code.

[KN]

Hmmmm.... anyone know if that's possible in Vbulletin?

King N?

Easy enough. Alright, keep your arms and legs within the Admin Control Panel at all times:

ACP > Styles and Templates > Style Manager > Select All Style Options and hit Go.

Now scroll all the waaay down, and in the very LAST box (Additional CSS definitions), paste this:


.pre-spoiler {
border: 1px solid #B5C0A8;
margin: 0 15px 5px 15px;
background: #E3E9DB;
padding: 3px 5px 3px 5px;
font-weight: bold;
text-align: right;
color: #6A775B;
}
.spoiler {
background: #E3E9DB;
margin: 0 15px 15px 15px;
padding: 5px;
border: 1px solid #B5C0A8;
}


Then hit save.

Now, also in the ACP is an option for custom BB codes. It's somewhere at the bottom of the navigator. Expand it and click Add BB Code.

Fill in the form like this:

Title: Spoiler
Tag: spoiler
Replacement:

<div>
<div class="pre-spoiler">
<span style="float:left; padding-top: 2px;">Spoiler</span> <input type="button" value="Show" style="width:80px;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.value = 'Show';}">
</div>
<div>
<div class="spoiler" style="display: none;">{param}</div>
</div>
</div>

Example: test
Description: Hides text
Use {option}: No
Button Image: Leave empty

Save.

Then, doing SNAPE KILLS DUMBLEDORE will be obscured, and by clicking a button, it can be revealed at will. This is ideal for hiding big images, as they aren't loaded at all untill you click the button.

The preview of the spoiler tag in the ACP will be ugly, simply because it cannot see the CSS we declared earlier. However, on the forum, it will look like this (these are the default colours. You can edit these if you please):

Hidden
http://www.hobobucket.com/images/spoilerhidden.jpg

Revealed
http://www.hobobucket.com/images/spoilerreveal.jpg
Of course you can alter the colour of the spoiler box by simply editing the CSS.

PS: It's KN ;)