vb.org Archive
Page 1 of 10 1 23 Last »
Show 40 post(s) from this thread on one page

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vBulletin 3.5 Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=155)
-   -   Spoiler Tag : Show/Hide (https://vborg.vbsupport.ru/showthread.php?t=110598)

ElForro 03-16-2006 10:00 PM
Spoiler Tag : Show/Hide
 
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.

Stangsta 03-16-2006 10:16 PM
No problems here.

/me clicks install

Stangsta 03-16-2006 10:57 PM
ok, I take that back. Whan you do a thread preview, it shows the contents of the spoiler.

ElForro 03-16-2006 11:02 PM
Do you mean the "Hover Preview" from the Treads list? I didn't think of that... If somebody know how to do it... Please say =)

Stangsta 03-16-2006 11:05 PM
Quote:
Originally Posted by ElForro
Do you mean the "Hover Preview" from the Treads list? I didn't think of that... If somebody know how to do it... Please say =)
Yes, thats exactly it.

Reeve of shinra 03-17-2006 01:02 AM
Very nice spoiler hack!

ElForro 03-17-2006 02:18 AM
Please change the BB Code with this! Now it works great! (except the Preview, Sorry Stangsta, I will try to fix that)

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>
The CSS is the same... And with this new code you can post 2, 3, or even more Spoilers on the same post! :D

Hack Updated with the new code!

dirtycrow 03-17-2006 02:27 AM
excellent! thank you soo much!

dirtycrow 03-17-2006 02:30 AM
Quote:
Originally Posted by ElForro
Please change the BB Code with this! Now it works great! (except the Preview, Sorry Stangsta, I will try to fix that)
[/B]
can we please have the english verision?

ElForro 03-17-2006 02:35 AM
What do you mean dirtycrow? It's all in english (well, except my posts that are in BAD english).. But the only "English" words that are in the hack are:
- Spoiler
- Show
- Hide

Edit: Sorry dirtycrow... I've just edited my post... It's all in english now... But again, there're only 2 words to change... Sorry!!


All times are GMT. The time now is 12:33 PM.
Page 1 of 10 1 23 Last »
Show 40 post(s) from this thread on one page

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.02187 seconds
  • Memory Usage 1,739KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (3)bbcode_code_printable
  • (2)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (2)pagenav_pagelink
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (10)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 
Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.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/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.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
  • printthread_start
  • pagenav_page
  • pagenav_complete
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete