Advertisement:

Author Topic: Simple Spoiler Tags (SMF 2.0.1)  (Read 4150 times)

Offline Kolya

  • Full Member
  • ***
  • Posts: 451
  • systemshock.org
Simple Spoiler Tags (SMF 2.0.1)
« on: March 26, 2010, 09:56:39 AM »
Implementing these spoilers involves adding the spoiler-tag, a spoiler-button in the editor and some CSS. The spoilers then work in 2 ways:

1. CSS (hide/unhide on mouse over with CSS3 fading)
2. Javascript onClick event (toggle spoiler to appear like normal text)

These functions work independently, so even when Javascript is disabled on the users system, the spoilers will still work. And they produce valid XHTML code. A demo can be seen here. As you can see these are inline spoilers that do not produce a box.

Now for the simple part, the installation instructions:

In ./Sources/Subs.php

Find
Code: [Select]
array(
'tag' => 'white',
'before' => '<span style="color: white;" class="bbc_color">',
'after' => '</span>',
),

Add below:         
Code: [Select]
array(
                'tag' => 'spoiler',
                'before' => '<span title="Click to toggle spoiler" class="spoiler" onclick="if (this.className==\'spoiler\') {this.className=\'spoiler_hover\'} else {this.className=\'spoiler\'}">',
                'after' => '</span>',           
),


Now add the button into the editor:

In ./Sources/Subs-Editor.php
Find
Code: [Select]
array(
'image' => 'hr',
'code' => 'hr',
'before' => '[hr]',
'description' => $txt['horizontal_rule']
),

Add below:
Code: [Select]
array(
'image' => 'spoiler',
'code' => 'spoiler',
'before' => '[spoiler]',
'after' => '[/spoiler]',
'description' => 'Spoiler text'
),

Finally add the CSS styles:
Code: [Select]
.spoiler { color:black; background:black; }
.spoiler:hover { color:white; background:black; }
.spoiler_hover { color:black; background:transparent; }
.spoiler,.spoiler:hover
 {
-moz-transition: all 0.7s ease 0.3s;
-webkit-transition: all 0.7s ease 0.3s;
-o-transition: all 0.7s ease 0.3s;
transition: all 0.7s ease 0.3s;
}
« Last Edit: October 30, 2011, 05:07:20 AM by Kolya »