Social tools by Sliding sidebar

Social tools by Sliding sidebar

Mod Version: 1.00, by Limode

vB Version: 3.8.4	Rating: (0 vote - 0 average)	Installs: 11
Released: 11 Sep 2009	Last Update: Never	Downloads: 103
Not Supported Template Edits

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 :

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>

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>

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

Download

Socialtools-sliding-side-bar.zip (175.0 KB, 120 downloads)

Screenshots

vBulletin LTS