Social tools by Sliding sidebar
 

Add social tools to your site by Sliding sidebar :

Screenshot Preview :



Full demo in Default Style see Screenshot



First download attachments and unzip.
*upload all files in images folder to your images folder.
*upload js folder to your root forums
Second install .
Third design new background,buttons and icons or contact me. I will design for you !

*Tested at IE6+,FF and Opera*

Templates edit :

1. In Header template find :
   
   PHP Code:

   ---

   $ad_location[ad_header_end] 


   ---

   Add after :
   
   Code:

   ---

   <div id="sideBar">
       
        <a href="#" id="sideBarTab"><img src="images/slide-button.png" alt="sideBar" title="sideBar" /></a>
       
        <div id="sideBarContents" style="width:0px;">
                <div id="sideBarContentsInner">
                        <h2>Sitename&nbsp;<span>in</span></h2>
                       
                        <ul>
                                <li><a href="#"><img src="images/32/Blinklist.png" border="0" alt="Blinklist" /></a></li>
                                <li><a href="#">Link Two</a></li>
                                <li><a href="#">Link Three</a></li>
                                <li><a href="#">Link Four</a></li>
                                <li><a href="#">Link Five</a></li>
                        </ul>
                       
                </div>
        </div>
       
</div>

   ---

2. In headinclude template find :
   
   PHP Code:

   ---

   <!-- / CSS Stylesheet --> 


   ---

   Add after :
   
   Code:

   ---

   <script type="text/javascript" src="clientscript/mootools.js"></script>
<script type="text/javascript" src="clientscript/side-bar.js"></script>

   ---

3. In Additional CSS Definitions add :
   
   Code:

   ---

           h2{
                color:#1b1bc4;
                font-size:90%;
                font-family:arial;
                margin:10px 10px 10px 50px;
                font-weight:bold;
        }
       
        h2 span{
                font-size:105%;
                font-weight:normal;
        }
       
        ul{
                margin:0px 0px 0px 0px;
                padding:0px 0px 0px 0px;
        }
       
        li{
                margin:0px 0px 3px 50px;
                padding:2px;
                list-style-type:none;
                display:block;
                background-color:#fff;
                border: 1px solid #D1D1E1;
                width:140px;
        }
       
        li a{
                width:100%;
        }
       
        li a:link,
        li a:visited{
                color:#0a8dc3;
                font-family:verdana;
                font-size:70%;
                text-decoration:none;
                display:block;
                margin:0px 0px 0px 0px;
                padding:0px;
                width:100%;
        }
       
        li a:hover{
                color:#36687c;
                text-decoration:underline;
        }
       
        #sideBar{
                position: absolute;
                width: auto;
                height: 350px;
                top: 150px;
                right:10px;
                background-image:url(images/background.png);
                background-position:top left;
                background-repeat:repeat-y;
        }
       
        #sideBarTab{
                float:left;
                height:5px;
                width:36px;
        }
       
        #sideBarTab img{
                border:0px solid #FFFFFF;
        }
       
        #sideBarContents{
                overflow:hidden !important;
        }
       
        #sideBarContentsInner{
                width:200px;
        }

   ---

Freest Post

WOW IT LOOKS GREAT
ANY DEMO
TAGGED FOR LATER USED

THANX

Any demo anywhere ?

Try Screenshots

Whats this do/for?

very cool
can we get a live demo please?

thanks

you need change "clientscript" to "js"

Or upload js content to clientscript :P

(sorry my bad english :P)

where do i add step 3 at?