Mini Mods - 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 :
   

   <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 :
   

   <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 :
   

   	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;
   	}

[MAD-DOG]

Freest Post

[kmohamed]

WOW IT LOOKS GREAT
ANY DEMO
TAGGED FOR LATER USED

THANX

[vijayninel]

Any demo anywhere ?

[Limode]

Originally Posted by vijayninel

Any demo anywhere ?

Try Screenshots

[whitetigergrowl]

Whats this do/for?

[Brandon Sheley]

very cool
can we get a live demo please?

thanks

[cuco2000]

PHP Code:

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

you need change "clientscript" to "js"

PHP Code:

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

Or upload js content to clientscript :P

(sorry my bad english :P)

[SilabGarza]

where do i add step 3 at?