Software > WordPress > WordPress Plugins >

https://wordpress.org/plugins/tiny-spoiler/
was tomsdimension.de/wp-plugins/tiny-spoiler

• Abandoned - closed per author's request, deleted from personal website.

See also:

• master5o1's fork.

---

• https://plugins.svn.wordpress.org/tiny-spoiler/

--

• 2022-11-05 - Replaced with Simple Spoiler
• 2022-11-05 - 0.2 on WordPress 6.1 on with PHP 8.1.12

• 2018-03-07 - (version not recorded) - on WordPress 4.9.4 with PHP 5.6.33

  • It's still working fine.

• 2014-08-07 - (version not recorded) - on WordPress (version not recorded) with PHP (version not recorded)

Usage ∞

[spoiler title="title"]
your content
[/spoiler]

Configuration ∞

There is no plugin configuration as such, but there is a way to customize the CSS.

You can change the Stylesheet in your own theme style.css

• .spoiler is the outer border/area.
• .spoiler legend is the title.
• .spoiler legend input is the button.

• .spoiler div is the content area.

I do two things. First I edit wp-content/plugins/tiny-spoiler/spoiler.php and change its hard-coded CSS. Find insert_spoiler_css() and comment-out the first three lines.

function insert_spoiler_css()
{
        echo "<style type='text/css'>
/*
        .spoiler { border: 1px #000 dashed; }
        .spoiler legend { padding-right: 5px; background: white;  }
        .spoiler legend input { width: 30px; }
*/
        .spoiler div { margin: 0px; overflow: hidden; height: 0; }
        </style>\n";
}

Second, I edit my style.css (in my case, it's Parament-spiralofhope) and append:

/*
  Tiny Spoiler
    was [[https://web.archive.org/web/20220814231518/https://www.tomsdimension.de/wp-plugins/tiny-spoiler |tomsdimension.de/wp-plugins/tiny-spoiler]]
    https://blog.spiralofhope.com/?p=7080

  Don't forget to edit spoiler.php

*/

/* Outer border/area */
.spoiler {
}

/* The title */
.spoiler legend {
  color: #d24d04;
}

/* The button */
.spoiler legend input {
  width: 20px;
  border: 0;
  background: #1A4E88;

  // The ( + ) show/hide character.
  color: #000;
  font-weight: bold;

  // rounded edges
  -moz-border-radius: 6px;
  -khtml-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
}

/* The content area */
.spoiler div {
}

TODO - fork it ∞

I cloned the github version, which would probably be a better base to start with.

• Make the +/- fixed-width so using it doesn't bounce the title around.

• When expanding, there is extra top space because I prefer to create my content on the line underneath the opening spoiler tag. Modify the code to make both methods work. Don't display that extra space no matter what.

2016-01-26 - 0.2 ∞

• I can't use BlogText-images within spoiler tags.

  • The solution is to use HTML <img> code. However, HTML code will not honour the WIDTH or HEIGHT tags.

• I can't use a name with a single-quote or the html code ' (single quote) in it.

Alternatives ∞

• Inline Spoilers

Last updated 2024-07-17 at 05:41:07