You are not connected. Please login or register


Sliding Panel

Message (Page 1 of 1)


Posted on August 8th 2013, 9:33 pm

Hello! After a couple of months, here is another tutorial again! A sliding panel!
Forum Version: PunBB and Phpbb2 (for Phpbb3 and Invision, put #1 code on Homepage Message)

So lets start!

1. Go to your overall_header template, find the body part () and paste this below it: (Just edit the text inside the div id panel tag)
<div class="boddy"><div id="panel">
<center>Hello hello hello! E-Mark! Aaaa! Teeeeest!</center>

<p class="slide"><a href="#" class="btn-slide">Slide Panel</a></p>
2. Inside the same template (overall_header), find the ending head tag (), then paste this before the ending tag:
<script type="text/javascript">

      $(this).toggleClass("active"); return false;
NOTE!: If you'll put this on a new HTML Page (creating new HTML page then setting it as new homepage, please put this one):
<script type="text/javascript" src=""></script>
3. Put this on your CSS:
.boddy {
   margin: -8px auto;
   padding: 0;
   width: 570px;
   font: 75%/120% Arial, Helvetica, sans-serif;
#panel {
   background: #c3c3c3;
   height: 200px;
   display: none;
.slide {
   margin: 0;
   padding: 0;
   border-top: solid 4px #373737;
   background: url( no-repeat center top;
.btn-slide {
   background: url( no-repeat right -50px;
   text-align: center;
   width: 144px;
   height: 31px;
   padding: 10px 10px 0 0;
   margin: 0 auto;
   display: block;
   font: bold 120%/100% Arial, Helvetica, sans-serif;
   color: #fff;
   text-decoration: none;
.active {
   background-position: right 12px;
Then you're done!! :D

Last edited by Mark on August 12th 2013, 12:07 am; edited 5 times in total

View user profile

Senior Member

Posted on August 8th 2013, 9:36 pm

Nice n Cool Tutorial :)

View user profile

Advance Member

Posted on August 8th 2013, 9:38 pm

Cool mark!

View user profile


Sponsored content




Message (Page 1 of 1)

Permissions in this forum:
You cannot reply to topics in this forum

In total there is 0 user online :: 0 Registered, 0 Hidden and 0 Guests

Users browsing this forum: None