vb.org Archive - Forum Home Enhancements - [CM] Floating Sidebar (Custom + Shine Effect)

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 4.x Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=246)

- - Forum Home Enhancements - [CM] Floating Sidebar (Custom + Shine Effect) (https://vborg.vbsupport.ru/showthread.php?t=286400)

[CM] Floating Sidebar (Custom + Shine Effect)

This was brought to you by ChiNa-Man

First of all I am a free soul, So if one of you guys decided to post this on another forum or a website, I would be appreciated if you give some CREDITs to the Developer simply typing his name: Credits to: ChiNa-Man, and do not CHANGE or DELETE the ORIGINAL CONTENT! Thank you!

:::::::::::::::::::::::::::::::::::::::::::::

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

https://vborg.vbsupport.ru/external/2012/09/1.gif

Tutorial 2 NO "Drop Shadow & NO Gradient effect!

Example Image

https://vborg.vbsupport.ru/external/2012/09/2.gif

Also Other Colors Available:

(Purple)

https://vborg.vbsupport.ru/external/2012/09/2.png

(Black)

https://vborg.vbsupport.ru/external/2012/09/3.png

(Red)

https://vborg.vbsupport.ru/external/2012/09/4.png

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:

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

}

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

Code:

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:

https://vborg.vbsupport.ru/external/2012/09/5.png

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:

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)

Code:

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)

Nice one mate May be just what we wanted for our members

Very nice.
Method 1 worked like a charm for me.

Only thing you need to pay attention to:
When following the standard instructions and uploading the "menu" folder to your image folder the path to the images in your installation instructions doesn't match up.
You are linking to "images/test/". You need to remove "/test"

Thank you so much guys, I am very happy for you guys made it work!

Qpurser: Thank you for noticing, I have now changed it to "images/sidebar"!
I was using the test folder in my forum! Thank u sir!

Doraj: Demo HERE

working great!! thank you!!
there is a small error in the "header" code
teh name of the image foldor that you bring in menu
in your code you neme it test..

Yoda, I have fixed it now! Thank you for noticing !

haha thats crazy ive been looking for one of these for months, then i finally made my own and you come out with one 2 days later lol
nice work

https://vborg.vbsupport.ru/external/2012/08/39.jpg

Quote:

Originally Posted by ChiNa-Man (Post 2355261)

Your demo link will not open

Demo Link Fixed Demo HERE

DeadlyDucklink, Looking nice mate!

Like the mod but decided the images were a little too small so I went with some different ones with less background but the same overall size (28x28). To me it looks a little better this way.

https://vborg.vbsupport.ru/external/2012/08/37.jpg

If anyone wants the alternative images you can download them from here:
Sidebar Alternative Images

Nice Job, Thanks for the comment, and for your to contribution!

Amazing. Thanks a lot for this! Is there a way to add a hover to the buttons?

Ti6, can you please make it clear what you mean with "a hover to the button"?
Bcoz right now there is a hover added already..

Excuse my short answer. :) Hover effect: Social media icons getting highlighted on mouseover.
Ill tryed something like

PHP Code:


		
			
#hover a {
    opacity:0.6;filter:alpha(opacity=60);
    }

#hover a:hover{
    opacity:1;filter:alpha(opacity=100);
}

but it didnt work out. Can you help me?

Ti6, I will try see If I can catch a code for you , but You need to Click Install to get support for this mate..

I will try get the code for you, its not simple because when you use the <li> for listing buttons, and for each image we are going to use a <div> CLASS="name"> </div>! I will get back to you when I have made the code..

NEW UPDATE 11 - August - 2012:
Ok Guys, First of all please click INSTALL for having support and if you like it!

I have added a new Tutorial with a new effect! Now your SideBar icons will shine while hovering your mouse over it! Make sure to download the new SideBar.zip which contains the new icons, and replace the old ones! And Inside the Background.txt file

I have added:
7 new codes with Gradient effect,
7 other codes WITHOUT the gradient effect!

And a Transparent Background Code added as well! So your buttons can be transparent, and your forum is fully visible throug the SideBar!

Good luck guys and make sure to click Installed!

great mod!!

question...

1. Anyway to share code for the floating sidebar on the right?
2. the code for the images next to name?

any chance to share?

Quote:

Originally Posted by LgsOfChampions (Post 2356311)

great mod!!

question...

1. Anyway to share code for the floating sidebar on the right?

I believe if you just change this line:

Code:

right:0;

to this:

Code:

left:0;

... Man this is amazing! Thank u so much for the updates. The hoverstyle looks beautiful. :rolleyes:

Ill just have a questions: I changed the sidebarsize to: width:34px; and enlarged the images to 35x 35px and tryed to adapt the hover-boarder but nothing shows up. Ill already tryed to change box-shadows sizes with no effect.
Which lines do i have to edit, that i can see the hover again? I Almost tryed to change every code line. :confused:

Iam sry to bothering u with stuff like this, but iam not so into css yet. :erm:

Quote:

Originally Posted by bzcomputers (Post 2356317)

I believe if you just change this line:

Code:

right:0;

to this:

Code:

left:0;

yea, I was half a sleep when I wrote this, lol!

I mean't his floating side bar that is on the left side with all his forum links?

**Installed**

Quote:

Originally Posted by ChiNa-Man (Post 2355271)

Demo Link Fixed Demo HERE

DeadlyDucklink, Looking nice mate!

hey quick question not regarding the side bar, i was looking at your site i think its your site lol, is there anyway to make something like this that can be added to any vb site

ScreenShot: http://puu.sh/RZGh

DeadlyDucklink, Well its a great question, but the header I use is flash! And everything is coded in JavaScript! I will anyways try think if I possibly could make one either in flash or as Animated Gif..

Good one

Quote:

Originally Posted by ChiNa-Man (Post 2356587)

ok cool, and heres another example of one

http://clanvision.org/?page_id=782

China man, the side bar on the left side of your forum along with the members icon next to there names can u share the code for this?

Quote:

Originally Posted by DeadlyDuckling (Post 2356565)

i have a very sim one ur looking for, I have the .fla psd and swf w. images and all, use to work but now doesnt. not sure if china can get it to work

DeadlyD.... I tried very hard to Edit the my Flash Header, and I am kinda good in Flash Scripts and etc, but lets just say forget that one, I tried for almost 2 ours, WIth Adobe Flash CS4 and CS4, and I did even make another Flash Script, Still was not working out,,

https://vborg.vbsupport.ru/external/2012/08/18.gif
I found a few, Maybe later this week I will setup a few up, for testing, but I dont promising! But if you like this one, its very easy and css is very good and can be costumized!

Anyways the Link you provided me, Clanvision.org, they are using a Wordpress Theme from YooTheme, and they are using a WidgetKit, so thats also out of options......But I have found a few others, the problem will be that I suck at codings, I mean I am not able to make it as an ADD ON, but I can make a good HTML tutorial, but we will look into that....

LgsOfChampions, about the Left Navigation Menu, visit vBcoderz.com, my favorit vBulletin Forum, and here is the link http://www.vbcoderz.com/showthread.php?t=10464

ty chinaman!

You should let me send u this file. few edits u can have it working... Everything u need is there. :))

boooo, have to wait 7 days lloll. The site is ok, hate no screen shots on a lot of things

Please Notice: This message has nothing to do with the POST, this is a message about another SlideMenu. Just in case some of you may get confused reading this..

To LgsOfChampions:

:D I will help you out if anything with the Left SlideMenu Navigation..... Waiting for your reply! Makes sure to change the colors and the path to the Slider on vBCoderz.. You only need to edit one file "ssmItems.js" and do not touch the other! After edit, Upload them both to your forum root. And then put the extra code that you got from vBcoders in your header template!

Yea I can add it, just need the upload file lol :)

also whats the code for the icons next to user groups? I add link to show what I mean.

click here

Ohh I see You can simply right click and copy them...

Quote:

Originally Posted by ChiNa-Man (Post 2356729)

yea a html/css one would be good :) i hope to be able to test something soon, maybe dbtech could do something with this

Quote:

Originally Posted by ChiNa-Man (Post 2356764)

Ohh I see You can simply right click and copy them...

Yes I know that bro lol. How would I go about adding them to the usergroup? Is there a code?

Quote:

Originally Posted by LgsOfChampions (Post 2356863)

Yes I know that bro lol. How would I go about adding them to the usergroup? Is there a code?

like this? http://puu.sh/VgCq

i just put <img src="images/example.png"> before the html markup http://puu.sh/VgDD

and if you want more space you could put <img src="images/example.png"> 

Lgs, Go to your usergroups in your admincp and in the html markup put the code in the first FIELD to your right, the code the deadlyduckling provided,,, Good luck thats should do the job..

DeadlyDuckling thanks for explaining, Good job.

I can't get it to work with the glow I have. It makes my name vanish. This is my current code

first box

Quote:

second box

Quote:

</span>

Where would I put the

Quote:

to work with it?
I tried putting it in the front no luck :(

Quote:

Originally Posted by LgsOfChampions (Post 2356963)

I can't get it to work with the glow I have. It makes my name vanish. This is my current code

first box

second box

Where would I put the to work with it?
I tried putting it in the front no luck :(

you have to put an image link in the code <img src="images/example.png"> so you would upload the image to your image directory in ftp and rename the Example part

heres an example of what i have

html markup
first box:

HTML Code:

<img src="images/ef.png"> <span class='ecmem'><span style='color:#E1E1E1;'>

second box:

HTML Code:

</span></span>

then i have this in additional.css

HTML Code:

.admin {

text-decoration:  none !important;

text-shadow:  0 0 0.5em red,  0 0 0.5em red,  0 0 0.5em red;

background:  url("http://i47.servimg.com/u/f47/17/17/22/24/fire_o10.gif");

font-weight:bold;

}

Here is my css code, Just make sure to change the "RED" field for your image! The image beside your username!

First Field (Left)
<span class="administrator"><img src="images/YOURIMAGE.png" alt="Administrator" border="0"/>

Second Field (Right)
</span>

CSS Code:
.admin {
color: #FF0000;
font-weight: bold;
text-shadow: 0px 0px 7px #FF0000;
}

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01782 seconds Memory Usage 1,955KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (8)bbcode_code_printable (3)bbcode_html_printable (2)bbcode_php_printable (13)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (1)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (40)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: