How to add the Spoiler button

SatNavSaysStraightOn

Site Owner
Staff member
Joined
11 Oct 2012
Local time
10:16 AM
Messages
16,004
Location
SE Australia
Website
www.satnavsaysstraighton.com
How to add the Spoiler button

What is a spoiler button?
It is a button that hides something underneath it. It could be hiding an answer to a quiz, a picture, to something that should have an X rating... it literally can be anything if you know how. The main point is that the member has to have clicked on the button to see what is there.

You can hide anything you want underneath a spoiler button, from hyperlinks, to smilies, to answers to a certain members quizzes, to pictures and so on... :whistling:

smiling-sun-clipart-canstock14759310.jpg

How do you 'create' one?

If you want to hide text only, then you only need to click on the icon circled above called the "Insert" button. It is one left of the camera icon. Now select the option "Spoiler".

upload_2017-6-10_17-46-48.png


A new window will open. This is for the title to be entered. You do not have to enter a title, you can just leave this option blank - leaving it blank will result in the button being called Spoiler. Once you have/not entered what you want, click on the Continue button.

upload_2017-6-10_17-49-29.png


You will now see this.

upload_2017-6-10_17-52-6.png


Don't worry about what you see, it will look a tad daunting. The system has automatically entered the code needed for the spoiler button and the cursor will be where you need to type, so literally just type what it is you need to be hidden underneath this spoiler button. Do not move the mouse at all. I have highlighted where you MUST type. It is between the ] and the [. The cursor is there, you just need to be confident and type what you want to be hidden by the button.

upload_2017-6-10_17-55-58.png


Once you have entered everything you need to enter, and have completed your reply, just click on the "Post Reply" button as normal.

This is what I will get from what I entered above.

upload_2017-6-10_17-58-14.png


And clicking on the Spoiler button will reveal the contents.

upload_2017-6-10_17-59-5.png


Finally, if you chose not to put a title on the spoiler button and left the system to call it Spoiler, then your code will look slightly different. Instead of SPOILER="whatever you put in" you will have just SPOILER. Both will have square brackets around them.

upload_2017-6-11_17-38-11.png
 
Last edited:

SatNavSaysStraightOn

Site Owner
Staff member
Joined
11 Oct 2012
Local time
10:16 AM
Messages
16,004
Location
SE Australia
Website
www.satnavsaysstraighton.com
How to hide a picture beneath a spoiler button

The "how to put a picture beneath a spoiler button" is really not that much more different than putting text under a spoiler button. The best approach is to have added the picture (or any file for that matter that the site permits) before you create the spoiler button.

So add your picture to your reply/post/new thread.

Now create the spoiler button as before - I'll not repeat the instructions because they are the same all the way up until the text part that is to be hidden...

upload_2017-6-11_17-16-17.png


Now all you do is instead of typing, just click on "Thumbnail" or "Full Image" and your picture will be under a spoiler button, like this

So follow the instructions up to this point where you type in the text!

and instead of typing in text (or as well as), click on the Full Image or Thumbnail buttons.
1426231160201.jpg

All you have to do is to ensure everything is inside the closing square bracket of the first part and the opening square bracket of the second part of the code. I'll add a picture of the code for you and highlight the bits I mean.

upload_2017-6-11_17-23-31.png


And if that is not enough, you can put spoiler buttons inside spoiler buttons... I've highlighted the code in thin red boxes. All start with [SOMETHING] and end with [/SOMETHING]

upload_2017-6-11_17-29-25.png


So this wonderful jumble give you this...

A spoiler button with only the word spoiler looks like this rather than this
And you can stack them! This also means that you can use the quotes option to quote underneath a spoiler button as well like this...
this is a quote - the answer to life the universe and everything is 42

So you can hide anything under a spoiler box, you just have to be careful to set things up first. Quotes, pictures, text, links, media from the media library, files that are not pictures, anything you want. And you can stack them inside each other.
 
Last edited:
Top Bottom