MyBB Community Forums

Title: Pure CSS Spoiler

Description: Add a Pure CSS Spoiler that reveals upon mouseover.

Regular Expression:

\[spoiler\](.*?)\[/spoiler\]

HTML Replacement:

<span class="spoiler">$1</span>

Finally, add to your global.css:

.spoiler {
background:black;
}
.spoiler:hover {
background:transparent;
}

Users may need to clear their browser's cache before it displays properly.

Not wanting to be rude, but this one can be a fail sometimes.

Like in dark themes, where the text color is white, the users can easily see the text even if the spoiler is not hovered upon.

Try adding a "color:" selector in the CSS.

When I make these, I make them for the default theme.

If you do have a dark theme, your CSS should resemble this:

.spoiler {
background:black;
color:black;
}
.spoiler:hover {
background:transparent;
color:white;
}

Instead of putting everything CSS in teh global.css, try putting everything CSS between the <style>...</style> tags before the actual replacements.

Also, you might want to add some padding and a border around the spoiler.

Pleasee Image+ ,,

I don't see why it's necessary, it's simply a black line that vanishes when hovered on.