vBulletin LTS

NEW UPDATE: 11 August 2012

Get this mod for vBulletin 3.x. CLICK HERE!

Hey everyone, This is a great SideBar that I have used while I as using MYBB Board, I have used lots of time to turn this to a vBulletin mod A great mod for you to decide where you want your users to visit, and can be fully customized by yourself!

------------------------------------------
Credits: http://yaldaram.com as Support & Co-Author
------------------------------------------

Transparent background added!
Shine Effect by Hovering (With Drop Shadow / Gradient Shine)
7 new Codes added in the Background.txt (With and Without Gradient Effect with 7 Different Colors, All codes are ready to COPY & PAST!


There are 2 Different Tutorials and 2 differen styles

A good advice will be "not to just JUMP in it", but look at both of the Tutorials, and If were YOU, I would def go for Tutorial 2 because it has the Shine and Gradient effect.

Tutorial 1: Image "Drop Shadow & Gradient effect!

Example Image
(Shines when hover)





Tutorial 2 NO "Drop Shadow & NO Gradient effect!

Example Image

<style type="text/css">
#SideBar{
list-style:none;
position:fixed;
z-index:5;
right:0;
top:130px;
width:24px;
padding:8px 5px;
border:2px solid #fff;
border-right:none;
-moz-border-radius:10px 0 0 10px;
-webkit-border-radius:10px 0 0 10px;
border-radius:10px 0 0 10px;
-moz-box-shadow:0 0 7px rgba(0,0,0,.6);
-webkit-box-shadow:0 0 7px rgba(0,0,0,.6);
box-shadow:0 0 7px rgba(0,0,0,.6);
background: rgb(0,0,0);
background:-moz-linear-gradient(top,rgba(255, 255, 255),rgb(0,0,0));
background:-webkit-gradient(linear,left top,left bottom,from(rgba(255, 255, 255)),to(rgb(0,0,0)));
background:linear-gradient(top,rgba(255, 255, 255),rgb(0,0,0))
}
.img:hover {
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
-webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 6px 1px rgb(255-255-255);
}
#SideBar li{
margin:9px 0 0 0;
line-height:0
}
#SideBar li:first-child{
margin-top:0
}
#SideBar a{
display:block;
width:24px;
}
#SideBar a span{
position:absolute;
top:-999em
}
</style>
<ul id="SideBar">
<a href="index.php" title="Home"><div class="img"><img src="images/sidebar/home.png"></a></div></li>
<li><a href="usercp.php" title="UserCP"><div class="img"><img src="images/sidebar/profile.png"></a></div></li><li><a  href="search.php" title="Search"><div class="img"><img src="images/sidebar/search.png"></a></div></li>
<li><a href="profile.php?do=editavatar" title="Edit  Avatar"><div class="img"><img src="images/sidebar/avatar.png"></a></div></li>
<li><a href="http://facebook.com" title="Facebook"><div class="img"><img src="images/sidebar/facebook.png"></a></div></li>
<li><a href="http://twitter.com" title="Twitter"><div class="img"><img src="images/sidebar/twitter.png"></a></div></li>
<li><a href="http://youtube.com" title="Youtube"><div class="img"><img src="images/sidebar/youtube.png"></a></div></li>
</ul>

Notice, the next tutorial has NO shine and NO gradient effect:

:::::::::::: DONE :::::::::::::

Extra Optional Options

box-shadow: 0 0 6px 1px rgb(255,250,250);

:::::::::::::::: >>>> Optional Info & Color Options <<<< ::::::::::::::::

NEW UPDATE: 09 - 08 - 2012

I have added extra Background codes inside a txt file. Now a new code for TRANSPARENT background added inside the file "Background.txt"! And there are codes ready for 7 different Backgrouds, Like the image below! With and Without Shining effect! All in the Background.txt. Download the file and open it with a NOTEPAD or TEXT EDITOR, and get copy the code from there!

SideBars from Background.txt Example:

Choice of a Custom URL Path and Image
If you decided to change the code and Icons and make your own icons, then let me show you how to change the code! Below you will see what every COLOR stands for!

Blue Color = URL to the Exact Page
Red Color = Icon Path and Name
Green = Title when you HOVER over the icon

Short Code Example:
<a href="FULL URL" title="GIVE A TITILE"><img src="ICON PATH"></a></li>

Full code:


Custom Choice of Color
(4 LINES with the word Background)

Only change the RED code at the end --> (0,0,0)
These 3 --> (0,0,0) stands for BLACK (The RGB NR and COLORCODE!)

You can use this color Generator: http://www.colorschemer.com/online.html

Here are some Extra RGB Colors Ready:

Black (0,0,0)
White (255,255,255)
Dark Blue (255,25,255)
Orange (255,102,51)
Dark Green (26,51,0)
Green (0,204,0)
Red (255,0,0)
Aqua (0.255.255)
Light Blue (51,153,255)
Purple (153,0,153)