Spoiler design

[Matt Fargo]

Hello,

does anyone have any codes for a spoiler which looks pretty rather than just a normal crappy button which opens up into a huge box ? like the button on here http://mods.mybb.com/uploads/previews/36...oiler2.png is a nice green but the plugin just shows another crappy one so he must be a windows 7 theme thats good.

Is there a way to do this ?

[Yaldaram]

Try this: http://community.mybb.com/thread-119549-...#pid864001

[Matt Fargo]

that's good but the button is still a plain one.. is there any way i can link to a css button or img so its a green button?

[Yaldaram]

In that code, find;

<b>Spoiler:</b>

and Change it into;

<span class="spoiler_css">Spoiler:</span>

Next, add the following class in global.css stylesheet;

spoiler_css{
color: #000000;
background: #05BD64;
font-weight: bold;
padding: 1px 4px;
border: 1px solid #049951;
border-radius: 2px;
}

You may style as much as you like

[Muhammad99Izzat]

or try my Tut http://community.mybb.com/thread-119639.html

[Krytic]

Here's the HTML base of a Spoiler design I've been trying to adapt and make work. It currently doesn't work, but if you're able to work jQuery, try it and see if you can fix it.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<script type="text/javascript"> 
$(document).ready(function(){
$(".flip").click(function(){
    $(".spoiler").slideToggle("slow");
  });
});
</script> 
<style type="text/css"> 
div.spoiler,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.spoiler
{
display:none;
}
</style>
<div class="spoiler">
<p>$1</p>
</div>
<p class="flip">Show/Hide Spoiler</p>

[Matt Fargo]

I solved this, i just needed to add a class.

[Drunken Bartender]

Here's the HTML base of a Spoiler design I've been trying to adapt and make work. It currently doesn't work, but if you're able to work jQuery, try it and see if you can fix it.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<script type="text/javascript"> 
$(document).ready(function(){
$(".flip").click(function(){
    $(".spoiler").slideToggle("slow");
  });
});
</script> 
<style type="text/css"> 
div.spoiler,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.spoiler
{
display:none;
}
</style>
<div class="spoiler">
<p>$1</p>
</div>
<p class="flip">Show/Hide Spoiler</p>

In relation to the previous posts, where would I add this one since it is jquery?

[Krytic]

Well, the way I've been doing it is to make sure that jQuery is included in your headerinclude template file (ACP>Templates & Style>your template>Ungrouped Templates>headerinclude), then adding the rest as a MyCode.

You'd add all the CSS to your global.css file, of course, making sure that there's no "Spoiler" class already.

[Drunken Bartender]

Okay, thank you.