PDA

View Full Version : New Posting Features - Spoiler Tag


YdieresiS
03 Feb 2008, 13:37
I have been on this forum for a while and have used different spoiler tags, but the tags didn't sattisfied me. So i made my own spoiler tag.

This is a BB Code tag. It has to be installed in your BB code manager.

Enter the vbulletin administrator panel.
Navigate to Own BB codes.
Go to add BB code and fill in the following items.

Title: Spoiler
Tag: spoiler
Replacement: <div class="tcat" colspan="3">
Spoiler
</div>
<div style="background-color:#fff;color:#fff;border:1px solid #CCCFDD;">
<span class="spoiler" onmouseover="this.style.color='#000000';" onmouseout="this.style.color=this.style.backgroundColor='#ffffff'">
{param}
</span>
</div>
Example: blabla
Description: This items show only the text when you move the mouse over it.

The code and style of it might be made better, but it does what it is made for.

I use this on the latest version of vBulletin (3.7.0) but it works on all versions.

I hope this is usefull for you guys. If you used it please click install so i can see if it comes in handy.

For those of you who want an example, here is it: Live Demo (http://www.nationaalcomputerforum.nl/showpost.php?p=372316&postcount=3) (dutch forum)
The first spoiler tag is my own tag, the second is this one: Invision Board Styled Spoiler Tag (http://www.vbulletin.org/forum/showthread.php?t=181059&highlight=spoiler)

And excuse me for my English, didn't used it much the last time.

YdieresiS
03 Feb 2008, 13:38
Reserved

Boofo
03 Feb 2008, 13:52
A text file would be nice to be able to refer back to in case it is needed to be re-installed again. ;)

YdieresiS
03 Feb 2008, 22:33
I added a text file with the text for the BB code in it.

Boofo
03 Feb 2008, 23:08
Thank you, sir. ;)

Is there a way to make the whole box mouse over instead of just the part with the test in it? If you have this one a wide skin the box goes all the way across the screen. Can the box either be short ended or the whole box reacts to the mouse over? Does that make any sense at all? ;)

Freesteyelz
03 Feb 2008, 23:21
Did you try setting the onmouseover in the div tag?

Boofo
03 Feb 2008, 23:22
No, but you know me, I'd screw it up somehow. Can you show me, sir?

Freesteyelz
03 Feb 2008, 23:34
I could if I had installed the mod. :D

Anyway, replace the code with:


<div class="tcat" colspan="3">
Spoiler
</div>
<div style="background-color:#fff;color:#fff;border:1px solid #CCCFDD;cursor:pointer">
<div class="spoiler" onmouseover="this.style.color='#000000';" onmouseout="this.style.color=this.style.backgroundColor='#ffffff'">
{param}
</div>
</div>



I added the cursor hand when hovering over the div. :)

Boofo
04 Feb 2008, 00:34
That worked perfect, sir, thank you. ;)

Now, is there any way to make the box only as long (or a little longer) as the text is instead of across the whole page? LOL

Freesteyelz
04 Feb 2008, 02:04
There are two versions.

1st version:

The code below will show the Spoiler title at the top of the spoiler text.


<div style="margin:10px 0">
<div style="margin-bottom:7px"><span style="padding:3px" class="tcat">
Spoiler</span></div>
<div>
<span style="background-color:#fff;color:#fff;border:1px solid #CCCFDD;cursor:pointer">
<span class="spoiler" onmouseover="this.style.color='#000000';" onmouseout="this.style.color=this.style.backgroundColor='#ffffff'">
{param}
</span>
</span>
</div>
</div>



*Please note this is only an edit of YdieresiS' mod. All credit goes to him.

Freesteyelz
04 Feb 2008, 02:07
In the second version there's a difference. First, there's no Spoiler title. Secondly, text outiside of the Spoiler tag will not be above or below but at the side of the text. Basically, it will appear exactly how you posted it. Of course if you post any text with spaces it will create a line break.

2nd version (of 1st version in post #10}:

Code:


<span style="background-color:#fff;color:#fff;border:1px solid #cccfdd;cursor:pointer" class="spoiler" onmouseover="this.style.color='#000000';" onmouseout="this.style.color=this.style.backgroundcolor='#ffffff'">
{param}
</span>



*Please note this is only an edit of YdieresiS' mod. All credit goes to him.

Boofo
04 Feb 2008, 02:25
I like the way we had it except for going across the whole page. So, should I use the first one then? I don't want someone accidentally messing it up with and breaks in the line.

Freesteyelz
04 Feb 2008, 02:29
Yup. The first version (post #10) would be comparable with the original mod + your request. :)

Boofo
04 Feb 2008, 02:33
Will that handle multiple lines ok?

Boofo
04 Feb 2008, 02:40
No, it won't. :(

Any way to fix that or make it so they can't go after so many characters?

Freesteyelz
04 Feb 2008, 02:53
You can by using overflow. Before you do that, try the updated code in post #10 again. I think the padding caused multiple lines to mess up.

EvErDrEaMs
04 Feb 2008, 04:09
great thanks.

Boofo
04 Feb 2008, 04:22
You can by using overflow. Before you do that, try the updated code in post #10 again. I think the padding caused multiple lines to mess up.

That one will work, I think. The overflow would cut stuff off wiouldn't it?

Freesteyelz
04 Feb 2008, 06:23
Depends. In all of my threadbit templates I have overflow set but it only cuts off continuous characters (text or image URL's) but will allow the text to go to the next line fine.

Boofo
04 Feb 2008, 07:16
Text is all I want to do with this anyway. Would it still be a separate line for each break?

obmob
04 Feb 2008, 16:56
Nice going... anyone has a clue on how to make this sopiler look like the one i show in the attachments? :D

Freesteyelz
04 Feb 2008, 20:14
Text is all I want to do with this anyway. Would it still be a separate line for each break?

I think so but I can't say it with confidence as I didn't test it. :D

avsunforum
04 Feb 2008, 22:24
thanks :))

Boofo
05 Feb 2008, 01:38
I think so but I can't say it with confidence as I didn't test it. :D

Let's take this to PM as not to clutter up the thread anymore, sir. And send me the code for the overflow, please. ;)

YdieresiS
05 Feb 2008, 22:57
Nice going... anyone has a clue on how to make this sopiler look like the one i show in the attachments? :D
That was what i was looking for in the first place, but i couldn't get that to work. I had the whole thing with javascript and css, but it only worked with one spoiler tag per page. On my forum they use a lot of this tag on one page and bij clicking the link it dit open al spoiler tags, not quite what i wanted. So i made this one and this one is good for what i use it for on our forum. If someone can fix a thing like that, please let it know.

Let's take this to PM as not to clutter up the thread anymore, sir. And send me the code for the overflow, please. ;)
If you two get a solution to it, let it know please, so i might update the whole spoiler tag.

Boofo
05 Feb 2008, 23:15
If you two get a solution to it, let it know please, so i might update the whole spoiler tag.

Will do. I think we are close. ;)

obmob
05 Feb 2008, 23:26
That was what i was looking for in the first place, but i couldn't get that to work. I had the whole thing with javascript and css, but it only worked with one spoiler tag per page. On my forum they use a lot of this tag on one page and bij clicking the link it dit open al spoiler tags, not quite what i wanted. So i made this one and this one is good for what i use it for on our forum. If someone can fix a thing like that, please let it know.Oh... i see... well, i'll take a look and compare with the one i'm using at the moment, will let you know if it works :D

binevi
12 Feb 2008, 22:09
is it possible to allow users to choose any title instead of Spoiler on the table ?

YdieresiS
13 Feb 2008, 13:27
is it possible to allow users to choose any title instead of Spoiler on the table ?

Yes this is possible.

If you use the things as posted before and change this:
Use {option} -> yes.
Replacement:
<div class="tcat" colspan="3">
{option}
</div>
<div style="background-color:#fff;color:#fff;border:1px solid #CCCFDD;">
<span class="spoiler" onmouseover="this.style.color='#000000';" onmouseout="this.style.color=this.style.backgroundColor='#ffffff'">
{param}
</span>
</div>
Example Testing

But in this case you always have to fill the option [Spoiler=Title]

It is possible but i wouldnt reccomend it.

Boofo
13 Feb 2008, 17:30
Just change the word spoiler to whatever you want in the code when you enter it in the Admin CP.

YdieresiS
14 Feb 2008, 13:59
It was asked if it was possible for a user to do this, when you change spoiler while entering this in the admin CP, it is not changable for the user.

Boofo
14 Feb 2008, 14:18
Sorry, I was thinking by user they meant user of the hack, Admins. I digress. ;)

YdieresiS
15 Feb 2008, 23:20
Now we have both options posted here :) Maybe just better so.

DaninMS
24 May 2008, 12:41
Installed. Thx !

michael5472
26 May 2008, 08:18
installed thank you works nicely

irfreedownload
26 May 2008, 17:11
hi! nice!
how put a icon for Spoiler Tag
in editor ?

odeezie
26 May 2008, 17:47
hi! nice!
how put a icon for Spoiler Tag
in editor ?

I am looking for teh same image.

KempoMRK
28 May 2008, 20:59
Installed. Works perfectly. Good job man.

aramiK89
29 Jun 2008, 11:38
dlete.

pab
06 Jul 2008, 15:24
Thanks a lot for this one, it's superior to the one I was using before. But I was wondering if you intend to release the code you are using on the demo page? Cause that is what I really want, cause right now images aren't being hidden.

YdieresiS
07 Jul 2008, 08:36
The one i use on the demo page is this one:
http://www.vbulletin.org/forum/showthread.php?t=181059&highlight=spoiler

I found it and installed it, because i liked it :)

YdieresiS
07 Jul 2008, 08:44
hi! nice!
how put a icon for Spoiler Tag
in editor ?
I didn't included a icon, but if you have one and want to put it there, it is possible.

Go to admin CP
BB codes and go to the spoiler tag, edit it.

Upload a image to your webspace and locate the URL to it. Paste this URL in de box after: Button Image (Optional). If you have done this correct, it wil add a button and show it in your editor box.

Good luck.