Forum Home Enhancements - [CM] Floating Sidebar MOD (Custom + Shine Effect)

NEW UPDATE: This is a MODIFICATION!

You can also get this as a XML ADDON, by 1 click install!
The modification also in vB ADDONS section!

Click HERE to get the ADDON!

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: Yaldaram.com as Support & Co-Author
------------------------------------------

Only 1 Template Edit!
------------------------------------------

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

Also Other Colors Available:


(Purple)

(Black)



(Red)




Tutorial 1 (With Shadow & Shine Effect)

Step 1: Go to your AdminCP, Click on Styles and Templates, then Style Manager, and on your right side in the dropdown sidebar, you choose Edit Templates!

Now you are in the Templates area! You can either add the following code in your "footer" or your "header" template! But start with your header. Click and open your header template, and add the following code below everything else!

Code to add in "header" template:

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

Click SAVE! Dont forget to download the SideBar.zip from the attachments. And upload the images folder to your root!

The path should be --> YOURFORUM/images/sidebar

We are now done, with Tutorial 1:

======================================

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

Lets Start with Tutorial 2: (Without Shadow & Shining Effect)

Step 1: Go to your AdminCP, Click on Styles and Templates, then Style Manager, and on your right side in the dropdown sidebar, you choose Edit Templates!

Now you are in the Templates area! You can either add the following code in your "footer" or your "header" template! But start with your header. Click and open your header template, and add the following code below everything else!

Code to Add in "header" Template:

PHP Code:

<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))
}
#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"><img src="images/sidebar/home.png"></a></li>
<li><a href="usercp.php" title="UserCP"><img src="images/sidebar/profile.png"></a></li><li><a   href="search.php" title="Search"><img src="images/sidebar/search.png"></a></li>
<li><a href="profile.php?do=editavatar" title="Edit Avatar"><img src="images/sidebar/avatar.png"></a></li>
<li><a href="http://facebook.com" title="Facebook"><img src="images/sidebar/facebook.png"></a></li>
<li><a href="http://twitter.com" title="Twitter"><img src="images/sidebar/twitter.png"></a></li>
<li><a href="http://youtube.com" title="Youtube"><img src="images/sidebar/youtube.png"></a></li>
</ul> 


Click save, and lets go to the last step.

Step 2: Unzip the SideBar.zip file which is below in the Attachments with the Icons inside! And simply upload the "image" folder to your root!

The path should be --> YOURFORUM/images/sidebar

We are DONE, And your SideBar should be ready! I prefer you use Tutorial 1!

Plz. Click Installed, if you use like or use this mod! Its for later support!

Extra Notice:
There are 14 icons inside the file! We only use 7 for the sidebar, The others are Extra! Make sure to Download the new ones! These fits perfectly for the Gradient & Drop Shadow!

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

Extra Optional Options

If you wanna change the "Shine Effect Color", Change the line I have marked in red, like the one below, and only change the blue diggit numbers. Go to this site to choose your rgb color: http://www.tayloredmktg.com/rgb/

Code to Change:

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

Change only the numbers in "BLUE COLOR". Which is in RGB COLOR CODE!!

For more, Check the Tutorial below for the RGB colors!

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

<ul id="SideBar">
<a href="index.php" title="Home"><img src="images/sidebar/home.png"></a></li>
<li><a href="usercp.php" title="UserCP"><img src="images/sidebar/profile.png"></a></li><li><a  href="search.php" title="Search"><img src="images/sidebar/search.png"></a></li>
<li><a href="profile.php?do=editavatar" title="Edit  Avatar"><img src="images/sidebar/avatar.png"></a></li>
<li><a href="http://facebook.com" title="Facebook"><img src="images/sidebar/facebook.png"></a></li>
<li><a href="http://twitter.com" title="Twitter"><img src="images/sidebar/twitter.png"></a></li>
<li><a href="http://youtube.com" title="Youtube"><img src="images/sidebar/youtube.png"></a></li>
</ul>

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

background:rgb(0,0,0);
background:-moz-linear-gradient(top,rgba(243,52,8,.75),rgb(0,0,0);
background:-webkit-gradient(linear,left top,left,bottom,from(rgba(243,52,8,.75),to(rgb(0,0,0);
background:linear-gradient(top,rgba(243,52,8,.75),rgb(0,0,0);

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)

[Lightmaster-AH]

Hallo,

at first, sorry for my bad english.

Is the path to the image in your code correct? The upload of the folder is "images/menu" and in your code it is "images/test".

[ChiNa]

I have changed it to "images/sidebar" and updated the files too.
I was using it as a test on my forum, Anyways,,,, Thanks for noticing

[betts02]

Works great many thanks

How would i change it from the right hand side of my forums to the left hand side ?

[ChiNa]

The 3 lines below will do the job, but you must keep changing a few times, untill it fits.. The code below is already added in the code I have provided.. So just change these 3 optiones to make it fit to the right!

PHP Code:

right:0;
top:130px;
width:24px; 


[ti6]

This floating slidebar is great. Created some new buttons for my website.
If anybody is interested pm me.



Cheers,
ti

[ChiNa]

TI6,, Very beautiful Good Job,, Did you see my post about the your request? With Hovering... Now I have changed it so when you hover it shines.. Hope you got the new code..

[ti6]

Nice that u like my buttons. Damnm i tryed to change the box shadows but nothing show up.

Thats my Code:

PHP Code:

<style type="text/css">
#SideBar{
list-style:none;
position:fixed;
z-index:5;
right:0;
top:130px;
width:35px;
padding:8px 5px;
border:1px solid #252525;
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(243,52,8,.75),rgb(0,0,0);
background:-webkit-gradient(linear,left top,left,bottom,from(rgba(243,52,8,.75),to(0,0,0);
background:linear-gradient(top,rgba(243,52,8,.75),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 30px 1px rgba(0,150,250,1);
}
#SideBar li{
margin:9px 0 0 0;
line-height:0
}
#SideBar li:first-child{
margin-top:0
}
#SideBar a{
display:block;
width:35px;
}
#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><img src="images/sidebar/space.png"></li>
<li><a href="calendar.php" title="Calendar" ><div class="img"><img src="images/sidebar/calendar.png"></a></div></li>
<li><a href="http://de-de.facebook.com/pages" title="Facebook" target="_blank"><div class="img"><img src="images/sidebar/facebook.png"></a></div></li>
<li><a href="http://www.urban-zone.org" title="UrbanZone" target="_blank"><div class="img"><img src="images/sidebar/uz.png"></a></div></li>
</ul> 


My Buttonsize is 35 x 35px. No beauty shining...

[ChiNa]

Its because I think you havnt seen my new instructions, but anyways, I have made the code so it fits with your template, and when you hover the icons will shine all arround.

Use the code below, and read the rest of my explanation below:

<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: rgba(255, 255, 255);
background:-moz-linear-gradient(top,rgba(255, 255, 255),rgba(255, 255, 255));
background:-webkit-gradient(linear,left top,left bottom,from(rgba(255, 255, 255)),to(rgba(255, 255, 255)));
background:linear-gradient(top,rgba(255, 255, 255),rgba(255, 255, 255))
}
.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(210,105,30);
}
#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>

Now if you wanted to change the Gradient or the Shadow, then change the line that I have marked in red, and only change the NUMBERS or DIGGITs in blue color, IF you want to change your shadow color.

First go to Go to this link your RGB CODE: http://www.tayloredmktg.com/rgb/

Find the line below in the CODE:
box-shadow: 0 0 6px 1px rgb(210,105,30);

Only replace the BLUE DIGGITs or NUMBERS with your rgb code from this site http://www.tayloredmktg.com/rgb/

GOOD LUCK

[Sparten]

Thats a nice skin your using, i use the same, with 1 differance i got the licens!

Compare right sidebar @ www.ragekings.com