Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Try Vanilla Forums Cloud product

In this Discussion

Ready to contribute?

Amazing! Sign our contributors' agreement and then join us on GitHub.

Update for critical security issue in PHPMailer included in release Vanilla 2.3.1

Modifying the Spoiler plugin to act like WordPress "More..."

This discussion is related to the Spoilers addon.
rbrahmsonrbrahmson "You may say I'm a dreamer / But I'm not the only one"NJ ✭✭✭

First thanks to @peregrine and @hgtonight who helped me get to the point of being able to make this change.

I wanted a functionality similar to the "More..." button seen in many WordPress blogs. I wanted it to be minimalistic - small out of the way button, no special border and backgrounds, and to say "More..." and "...Less".

I had to slightly change every piece of the plugin (though these are minor changes):

1) In the plugin code class.spoilers.plugin.php I had to change the $Attribution variable to hide the text preceding the button and the button text. The change is in protected function SpoilerCallback a follows:

    $Attribution = T('More... %s');  
    $Attribution = T(' %s'); 

2) Change the Javascript code to place the "More..." and "...Less" text on the button Lines 24, 40 and 42):

        SpoilerButton.value = 'More...';

3) Change the CSS file to have the desired appearance.

    div.UserSpoiler div.SpoilerTitle {
       font-weight: bold;
    div.UserSpoiler div.SpoilerTitle span {
       color:red;/*PA  color: white;*/
    div.UserSpoiler input {
       display: inline;
       font-weight: bold;
       margin: 0;
       padding: 0px 4px;/*PA 2px 5px; */
       text-decoration: none;
       cursor: pointer;
       color:green;/*PA color: #1E79A7; */
       text-transform: capitalize; /*PA  */
     div.SpoilerTitle input {
       display: inline;
       font-weight: bold;
       text-decoration: none;
       cursor: pointer;
       color:blue;/*PA color: #1E79A7; */
       float:right;/*PA  */
       text-transform: capitalize; /*PA  */
    div.UserSpoiler div.SpoilerText {
       display: none;

Attached screens show how it looks

The only thing I am not convinced of is the issue of posting the modded plugin. I understand that for the developer and other experienced modders it is preferable to see the changes posted (and explained) in this discussion. But I see so many newbies (like me) who are not yet programmers and who would find benefit from ready-to-use modifications.

That said, not to upset anyone I am posting below the changes as well as screen shots but not the modified plugin


Sign In or Register to comment.