Please Disregard
The following no longer works due to some issues with Giant Bomb's CSS overriding (or stripping out, haven't looked into it deeper) the background-color style. The article is still informative for general CSS and HTML knowledge but will not work on Giant Bomb anymore.Introduction
A few times while posting in the forum, I've really wanted to post some sensitive information that might really make some people mad if they accidentally read it and haven't gotten that far in that particular game, or whatever the topic is about. Lots of sites have BB Code for spoilers that you can use to hide sensitive information. Some make you press a button to show the spoiler, and some simply black out the text and force you to highlight it if you wish to see it.Giant Bomb does not, on the surface, appear to have any of this type of functionality. Browsing the forums, you'll see many titles with "Spoilers Within" or just simply "Spoilers". When the main topic is about a potential spoiler, this works effectively well, but sometimes, during conversation, an example may arise where you may be inclined to use a spoiler to show your point. This is when simple "SPOILER NOW" "END SPOILER" but still allows the wandering eye to glimpse a few words they may not have wanted to see.
For those that have ever had this problem, I present a solution to you. The HTML code button.
As I said above, on the surface, Giant Bomb does not have a spoiler tag. With a little bit of basic knowledge of HTML, you can roll your own spoiler tag. Here's how to do it:
*EDIT*: Once you get to the "Adding CSS Section" the code does not apply as Giant Bomb has updated their stylesheets. Please see the *EDIT* section below for correct code. Thank You.
Edit HTML Button
Span Tag
The span tag will be our spoiler tag. The reason I chose a span tag is because it is one of the few html elements that does not have any "styling" associated to it. If not given any CSS styles (cascading style sheets), the tag will not do anything. This is good for our purposes because it gives us a blank slate for our spoiler tag.Span tags look like this:
<span>CONTENT GOES HERE</span>
The greater than and less than characters denote the start and end of a particular html tag. When a forward slash "/" is introduced, that denotes the ending set of a span tag. By design, html tags have a start and end tag to denote what content the tag will be affixed to. Since there isn't any styling associated with the span tag, we'll use CSS to add some.
Adding CSS To Span Tags
To hide the text between the <span> tags, we need to add a background color and a text color of the same color. In this case, I'm going to use blue. In html tags, the style="" attribute is used to denote CSS styles that are attached to that particular tag. A CSS style consists of an attribute, followed by a colon, the attribute value and then a semicolon to denote the end of the particular style.To add the background color, type into the Edit HTML Box (lets say your spoiler is "Mario and Luigi actually aren't brothers!"):
<span style="background-color: blue;">Mario and Luigi actually aren't brothers!</span>
This will give you:
Mario and Luigi actually aren't brothers!
To edit the color of text, you would use this code:
<span style="color: blue;">Mario and Luigi actually aren't brothers!</span>
Which gives you:
Mario and Luigi actually aren't brothers!
Putting It All Together
If we combine both of the styles, like so:<span style="background-color: blue; color: blue;">CONTENT GOES HERE</span>
We get a spoiler tag!
Mario and Luigi actually aren't brothers!
Effectively keeping away wandering eyes and does not break any page layouts! Remember that this code must be placed in the Edit HTML Box or nothing will happen. It will just render as text instead of valid HTML and your spoiler tag won't work.
I hope this write-up saves you from any flame wars or nasty private messages caused by bad spoiler warnings! Thanks for reading!
*EDIT*
It would seem that Giant Bomb updated their style sheets and the background-color style doesn't work anymore. Try using this method:**SPOILER** <span style="color: #292929">SPOILER GOES HERE</span> **END SPOILER**
The color in the span tag is the exact color of Giant Bomb current background (as of 2/16/2009) so text gets lost which is why i put the words **SPOILER** and **END SPOILER** to denote where the user wanting to read the spoiler should highlight. Here's a working example:
**SPOILER** Mario and Luigi aren't actually brothers! **END SPOILER**
I hope this helps!
Log in to comment