Go Back   vb.org Archive > vBulletin Modifications > Archive > vB.org Archives > vBulletin 3.5 > vBulletin 3.5 Template Modifications

Reply
 
Thread Tools
Spoiler Tag : Show/Hide Details »»
Spoiler Tag : Show/Hide
Version: 1.00, by ElForro ElForro is offline
Developer Last Online: Sep 2013 Show Printable Version Email this Page

Version: 3.5.4 Rating:
Released: 03-16-2006 Last Update: 03-16-2006 Installs: 206
Template Edits
 
No support by the author.

A CSS/Javascript based spoiler tag for vB 3.5.x (but I think it must work with earlier versions)
Just follow the instructions below or in the .zip file.

I hope you like my first modification!

Instructions
Step 1.
Copy the following into the additional CSS definitions (Admin CP > Styles & Templates > Style Manager > All Style Options>Additional CSS definitions) and paste it into the lower box.

Code:
.pre-spoiler {
    border: 1px solid #B5C0A8;
    margin: 0 15px 5px 15px;
    background: #E3E9DB;
    padding: 3px 5px 3px 5px;
    font-weight: bold;
    text-align: right;
    color: #6A775B;
}
.spoiler {
    background: #E3E9DB;
    margin: 0 15px 15px 15px;
    padding: 5px;
    border: 1px solid #B5C0A8;
}
Step 2.
Now click save and go to the page to add a new BB Code (Admin CP> Custom BB Codes > Add New BB Code) and enter the following:

Title: Spoiler
Tag: spoiler
Replacement:
Code:
<div>
    <div class="pre-spoiler">
    <span style="float:left; padding-top: 2px;">Spoiler</span> <input type="button" value="Show" style="width:80px;font-size:10px;margin:0px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Show';}">
    </div>
    <div>
        <div class="spoiler" style="display: none;">{param}</div>
    </div>
</div>
Example: [spoiler]test[/spoiler]
Description: Hides text
Use {option}: No
Button Image: Leave empty

Click save and you are done!

Known bugs: You can read the spoiler in the "Thread Preview".


FAQ
Q: I want to change the color that the spoiler tag uses! How?
A: If you know CSS it is all controlled in the CSS definitions.

Show Your Support

  • This modification may not be copied, reproduced or published elsewhere without author's permission.

Comments
  #22  
Old 03-27-2006, 01:16 AM
ElForro ElForro is offline
 
Join Date: Mar 2006
Posts: 123
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

This is my first mod, no previous versions...

This works with (tested)...

MAC:
- Safari
- Firefox
- Opera
- Camino

Windows:
- Firefox
- Internet Explorer
- Opera
Reply With Quote
  #23  
Old 04-09-2006, 06:35 PM
G_Man G_Man is offline
 
Join Date: Feb 2006
Location: Washington State
Posts: 264
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

looking good. thanks.
Reply With Quote
  #24  
Old 04-15-2006, 09:16 PM
Station Station is offline
 
Join Date: Jan 2005
Posts: 5
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

As I run a board that centers around anime and games, this was essential to not spoil major details.

Great mod. *clicks install*
Reply With Quote
  #25  
Old 04-18-2006, 03:18 PM
DaPro DaPro is offline
 
Join Date: Jan 2003
Location: CT, USA
Posts: 169
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

For those of us too lazy to make a button, here is one. It's nothing pretty, just something for you to use, maybe I will make a better one later :-)
Reply With Quote
  #26  
Old 04-22-2006, 02:17 PM
thisgeek thisgeek is offline
 
Join Date: Dec 2005
Posts: 50
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

I've spent quite a bit of time mucking around, and I've come up with the following changes.

I've embedded the CSS within the replacement, so you don't need to go muck around with your styles.

I've also modified the CSS to be a bit more generic - and I've fixed it so that the spoiler doesn't stretch across the entire post. It is as big as the text between the tags.

Code:
<table><tr><td>
<div>
    <div style="margin-bottom: 5px;">
       <input type="button" value="Show Spoiler" style="width:80px;font-size:10px;margin:0px;padding:0px;" onclick="if (this.value=='Show Spoiler') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Hide Spoiler'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Show Spoiler';}">
    </div>
    <div>
        <div style="border: 1px dashed #0B198C; padding: 3px; display: none;">{param}</div>
    </div>
</div>
</td></tr></table>
I've modified this one so that you can use it inline in a paragraph:
Code:
<span>
    <span style="margin-bottom: 5px;">
       <input type="button" value="Show Spoiler" style="width:80px;font-size:10px;margin:0px;padding:0px;" onclick="if (this.value=='Show Spoiler') { this.parentNode.parentNode.getElementsByTagName('span')[1].getElementsByTagName('span')[0].style.display = '';this.innerText = ''; this.value = 'Hide Spoiler'; } else { this.parentNode.parentNode.getElementsByTagName('span')[1].getElementsByTagName('span')[0].style.display = 'none'; this.value = 'Show Spoiler';}">
    </span>
    <span>
        <span style="border: 1px dashed #0B198C; padding: 0 3px 0 3px; display: none;">{param}</span>
    </span>
</span>
See this post if you want to see a sample of how it looks.

EDIT: I've cleaned up the code a bit - the toggle should now work in Safari.
Reply With Quote
  #27  
Old 04-24-2006, 03:38 AM
GSX-Racing GSX-Racing is offline
 
Join Date: May 2005
Posts: 69
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by thisgeek
I've spent quite a bit of time mucking around, and I've come up with the following changes.

I've embedded the CSS within the replacement, so you don't need to go muck around with your styles.

I've also modified the CSS to be a bit more generic - and I've fixed it so that the spoiler doesn't stretch across the entire post. It is as big as the text between the tags.

Code:
<table><tr><td>
<div>
    <div style="margin-bottom: 5px;  font-weight: bold; color: #000000;">
       <input type="button" value="Show Spoiler" style="width:80px;font-size:10px;margin:0px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Hide Spoiler'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Show Spoiler';}">
    </div>
    <div>
        <div style="border: 1px dashed #0B198C; padding: 3px; display: none;">{param}</div>
    </div>
</div>
</td></tr></table>
I've modified this one so that you can use it inline in a paragraph:
Code:
<span>
    <span style="margin-bottom: 5px;  font-weight: bold; color: #000000;">
       <input type="button" value="Show Spoiler" style="width:80px;font-size:10px;margin:0px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('span')[1].getElementsByTagName('span')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('span')[1].getElementsByTagName('span')[0].style.display = '';this.innerText = ''; this.value = 'Hide Spoiler'; } else { this.parentNode.parentNode.getElementsByTagName('span')[1].getElementsByTagName('span')[0].style.display = 'none'; this.value = 'Show Spoiler';}">
    </span>
    <span>
        <span style="border: 1px dashed #0B198C; padding: 0 3px 0 3px; display: none;">{param}</span>
    </span>
</span>
See this post if you want to see a sample of how it looks.

Where do these codes get put? In the BBCode?
Reply With Quote
  #28  
Old 04-24-2006, 03:53 PM
thisgeek thisgeek is offline
 
Join Date: Dec 2005
Posts: 50
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Yeah, it goes in the 'replacement' field.
Reply With Quote
  #29  
Old 04-24-2006, 05:55 PM
Tralala's Avatar
Tralala Tralala is offline
 
Join Date: Jan 2006
Posts: 1,207
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by thisgeek
I've spent quite a bit of time mucking around, and I've come up with the following changes.
...

See this post if you want to see a sample of how it looks.

Wow, this is really nice! I appreciate you sharing. I especially like the one that can be used "inline." However, the dashed lines make it a bit hard to read.

Previously I was using this:

HTML Code:
<div style="margin:5px 20px 20px 20px">

<div class="smallfont" style="margin-bottom:2px"><b>Spoiler:</b> 

<input type="button" value="Show" style="width:45px;font-size:10px;margin:0px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }">

</div>

<div class="alt2" style="margin: 0px; padding: 6px; border: 1px inset;">

<div style="display: none;">

{param}

</div>

</div>

</div>
Is there any way to combine the look of both? That is, use your inline version one, but with the recessed/line look (instead of the dashed-border?)

That would be great.
Reply With Quote
  #30  
Old 04-24-2006, 07:33 PM
sandra_nz sandra_nz is offline
 
Join Date: Apr 2006
Posts: 6
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Thanks for this, it looks great!
Reply With Quote
  #31  
Old 04-25-2006, 04:41 AM
thisgeek thisgeek is offline
 
Join Date: Dec 2005
Posts: 50
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by Tralala
Wow, this is really nice! I appreciate you sharing. I especially like the one that can be used "inline." However, the dashed lines make it a bit hard to read.

Previously I was using this:

<snip>

Is there any way to combine the look of both? That is, use your inline version one, but with the recessed/line look (instead of the dashed-border?)

That would be great.
Yes, easily. Just change the style="border: 1px dashed info in the tags to style="border: 1px inset.
Reply With Quote
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 03:00 PM.


Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.07039 seconds
  • Memory Usage 2,312KB
  • Queries Executed 25 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (6)bbcode_code
  • (1)bbcode_html
  • (3)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)modsystem_post
  • (1)navbar
  • (6)navbar_link
  • (120)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (4)pagenav_pagelink
  • (11)post_thanks_box
  • (11)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (11)post_thanks_postbit_info
  • (10)postbit
  • (11)postbit_onlinestatus
  • (11)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.php 

Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • fetch_musername
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete