You're welcome.       Sign up (learn about it) ● Sign in (lost password?)

Pastor Rick Profile
Live feed
Miscellaneous info

Head Administrator

Registered: 07-2005
Location: Texas
Posts: 501
Karma: 12 (+12/-0)
Reply Quote
Setting up a "Spoiler Tag" code set

Runboard's support for custom CSS gives board owners and board admins the ability to create "tag groups" using bbcodes (short for Bulletin Board Codes).

In this post I will be showing two of Lesigner Girl's solutions on how to create a "tag group" you can use for posting "spoilers" where your board members will not automatically see the item which might spoil things for them later.

First Solution
b b u {
   display: block;
   border: 1px solid #bbb;
   color: #ddd;
   background: #ddd url('SEE_BELOW_FOR_EXPLANATION') no-repeat left top;
   padding: 20px 0.25em 0 0.25em;
   font-weight: normal;
   text-decoration: none;

Where it says, 'SEE_BELOW_FOR_EXPLANATION', you could have an image that says, "Highlight for spoilers" on it. This solution is the one with the most "legacy browser support" which means the chances of it working with older browsers that your users might be stuck with is greater but it does require greater effort on the board owner or board admins part in order to create and host the background image.
Second Solution

Instead of using a background image, you can use the :before pseudo-class to add the text as content.

b b u {
   display: block;
   border: 1px solid #bbb;
   color: #ddd;
   background: #ddd;
   padding: 0 0.25em;
   font-weight: normal;
   text-decoration: none;
b b u:before {
   content: 'Highlight for spoilers: ';
   color: #000;
   text-shadow: #fff 0 0 2px;

Caveats: Only those with access to a boards custom CSS can set this up (board owners and board admins) and even after the code "tag set" is in place users must still be told that it is there and how to use it.

If users "quote" the post and your "quote box" has a dramatically different background color then the spoiler text might be revealed for all to see.

Note: #bbb is the same as #bbbbbb, #ddd is the same as #dddddd, etc.


Advertise Boards On TRDConceptsDE
2/28/2012, 9:52 am Link 2 this post Send Email to   Send PM to Blog

Add a Reply

You are not logged in (login)