MyBB Community Forums

MyBB Community Forums > Resources > MyCodes > iOS 5 Spoiler by Clear
Full Version: iOS 5 Spoiler by Clear
You're currently viewing a stripped down version of our content. View the full version with proper formatting.

Clear

2012-08-13, 12:27 PM
Hello guys! I made a very nice spoiler like iOS 5 folders with JQuery effects and minimal design integrated for MyBB!

For Demo Click Here.

INSTALLATION

1) Download the image & font files HERE.

2) Then, extract the files and upload in your forum folder.

3) Go to ACP >> Templates & Themes >> Themes >> Your Theme >> global.css, and at the bottom of the page paste this code:

.content-spoiler {
    background: transparent url('images/iOS-5-texture.png') left top;
    border: none;
    color: #fff;
	text-shadow: 0px 4px 5px #000;
    padding: 20px;
    padding-top: 18px;
    padding-bottom: 2px;
    text-align: left;
    -moz-box-shadow:inset 5px 5px 15px #000000, 1px 2px 5px rgba(255,255,255,0.3);
    -webkit-box-shadow:inset 5px 5px 15px #000000, 1px 2px rgba(255,255,255,0.3);
    box-shadow:inset 5px 5px 15px #000000, 1px 2px 5px rgba(255,255,255,0.3);
    display: none;
    font-family: Helvetica;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
   font-size: 16px;
}

.arrow-spoiler {
    background: transparent url('images/arrow.png');
    height: 16px;
    width: 18px;
    border: none;
    margin: none;
    position: relative;
    top: 18px;
	left: 30px;
}

#close, #open {
    cursor: pointer;
	background: transparent url('images/iOS-5-texture.png') left top;
	color: #fff;
	text-shadow: 0px 4px 5px #000;
    padding: 7px;
	-moz-box-shadow:inset 5px 5px 15px #000000, 1px 2px 5px rgba(255,255,255,0.3);
    -webkit-box-shadow:inset 5px 5px 15px #000000, 1px 2px rgba(255,255,255,0.3);
    box-shadow:inset 5px 5px 15px #000000, 1px 2px 5px rgba(255,255,255,0.3);
    font-family: Helvetica;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	width: 100px;
	text-align: center;
	font-size: 14px;
}

#close {
    display: none;
}
    
@font-face { 
    font-family: 'Helvetica';
    src: url('fonts/helvetica.ttf') format('truetype');
}

4) Ok, now go to ACP >> Templates & Themes >> Templates >> Your Templates >> Ungrouped Templates >> headerinclude and at the bottom of the page paste this code:

<script type="text/javascript">//<![CDATA[ 
var spoiler = jQuery.noConflict();
spoiler(window).load(function(){
spoiler("#open").click(function () {
    spoiler(".content-spoiler").slideDown("fast");
spoiler("#open").hide();
spoiler("#close").show();    
});
spoiler("#close").click(function () {
spoiler(".content-spoiler").slideUp("fast");
spoiler("#close").hide();
spoiler("#open").show();
});

});//]]>  

</script>

5) At the end, go to ACP >> Configuration >> MyCodes >> Add new MyCode:

Quote:Title: iOS 5 Spoiler

Short Description: Show/Hide contents with minimal design and JQuery effects.

Regular Expression: 

\[SPOILER\](.*?)\[/SPOILER\]

Replace:

<br style="clear: both;" />
<div class="content-spoiler">
$1
<div class="arrow-spoiler"></div>
</div>
<br style="clear: both;" />
<div id="open" style="float: left">Spoiler</div>
<div id="close" style="float: left">Hide</div>​
<div style="float: left; display: none;">s5splrbyclr</div>
<div style="float: left; display: none;">iOS 5 Spoiler created by Clear. Please, do not remove this code, this not be display in your forum!</div>


And... Enjoy!


Please, do not remove the copyright:

Quote:<div style="float: left; display: none;">iOS 5 Spoiler created by Clear. Please, do not remove this code, this not be display in your forum!</div>

This not be display in your forum!

Trickshot

2012-08-15, 07:41 AM
It would be nice to see previews.

Michaud©

2012-08-16, 12:50 AM
I added just like you said, and it just gives me shows me the words spoiler.

nvm.. Fixed it.. Smile

But seems like if the spoiler is not in the first post it doesn't work.

Clear

2012-08-18, 01:00 PM
(2012-08-15, 07:41 AM)Trickshot Wrote: [ -> ]It would be nice to see previews.

http://www.weebledesign.altervista.org/m...d=28#pid28

In this post there a test!

xDizzy

2012-08-18, 01:11 PM
Nice spoiler Smile

Max_69

2013-01-15, 09:10 AM
(2012-08-13, 12:27 PM)Clear Wrote: [ -> ]Hello guys! I made a very nice spoiler like iOS 5 folders with JQuery effects and minimal design integrated for MyBB!

For Demo Click Here.

INSTALLATION

1) Download the image & font files HERE.

2) Then, extract the files and upload in your forum folder.

3) Go to ACP >> Templates & Themes >> Themes >> Your Theme >> global.css, and at the bottom of the page paste this code:

.content-spoiler {
    background: transparent url('images/iOS-5-texture.png') left top;
    border: none;
    color: #fff;
	text-shadow: 0px 4px 5px #000;
    padding: 20px;
    padding-top: 18px;
    padding-bottom: 2px;
    text-align: left;
    -moz-box-shadow:inset 5px 5px 15px #000000, 1px 2px 5px rgba(255,255,255,0.3);
    -webkit-box-shadow:inset 5px 5px 15px #000000, 1px 2px rgba(255,255,255,0.3);
    box-shadow:inset 5px 5px 15px #000000, 1px 2px 5px rgba(255,255,255,0.3);
    display: none;
    font-family: Helvetica;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
   font-size: 16px;
}

.arrow-spoiler {
    background: transparent url('images/arrow.png');
    height: 16px;
    width: 18px;
    border: none;
    margin: none;
    position: relative;
    top: 18px;
	left: 30px;
}

#close, #open {
    cursor: pointer;
	background: transparent url('images/iOS-5-texture.png') left top;
	color: #fff;
	text-shadow: 0px 4px 5px #000;
    padding: 7px;
	-moz-box-shadow:inset 5px 5px 15px #000000, 1px 2px 5px rgba(255,255,255,0.3);
    -webkit-box-shadow:inset 5px 5px 15px #000000, 1px 2px rgba(255,255,255,0.3);
    box-shadow:inset 5px 5px 15px #000000, 1px 2px 5px rgba(255,255,255,0.3);
    font-family: Helvetica;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	width: 100px;
	text-align: center;
	font-size: 14px;
}

#close {
    display: none;
}
    
@font-face { 
    font-family: 'Helvetica';
    src: url('fonts/helvetica.ttf') format('truetype');
}

4) Ok, now go to ACP >> Templates & Themes >> Templates >> Your Templates >> Ungrouped Templates >> headerinclude and at the bottom of the page paste this code:

<script type="text/javascript">//<![CDATA[ 
var spoiler = jQuery.noConflict();
spoiler(window).load(function(){
spoiler("#open").click(function () {
    spoiler(".content-spoiler").slideDown("fast");
spoiler("#open").hide();
spoiler("#close").show();    
});
spoiler("#close").click(function () {
spoiler(".content-spoiler").slideUp("fast");
spoiler("#close").hide();
spoiler("#open").show();
});

});//]]>  

</script>

5) At the end, go to ACP >> Configuration >> MyCodes >> Add new MyCode:

Quote:Title: iOS 5 Spoiler

Short Description: Show/Hide contents with minimal design and JQuery effects.

Regular Expression: 

\[SPOILER\](.*?)\[/SPOILER\]

Replace:

<br style="clear: both;" />
<div class="content-spoiler">
$1
<div class="arrow-spoiler"></div>
</div>
<br style="clear: both;" />
<div id="open" style="float: left">Spoiler</div>
<div id="close" style="float: left">Hide</div>​
<div style="float: left; display: none;">s5splrbyclr</div>
<div style="float: left; display: none;">iOS 5 Spoiler created by Clear. Please, do not remove this code, this not be display in your forum!</div>


And... Enjoy!


Please, do not remove the copyright:

Quote:<div style="float: left; display: none;">iOS 5 Spoiler created by Clear. Please, do not remove this code, this not be display in your forum!</div>

This not be display in your forum!

Thank you, fantastic job Wink

JordanMussi

2013-01-15, 06:51 PM
Looks great. Thank you very much.

KRMFY

2013-01-16, 05:21 PM
Doesn't look that smooth. Sad

Shade

2013-01-17, 02:52 PM
snip - please delete this message

Chocothunda

2013-01-18, 11:07 PM
It's funny how the forums favicon is the vBulletin logo on a MyBB forum lol.
MyBB Community Forums > Resources > MyCodes > iOS 5 Spoiler by Clear