Add-On Releases - Easy Style Color switcher

Hello Friends

This is Our Frist Modification in Vbulletin...
Easily Style Switcher For Vbulletin like A Vb.org

It will Work On Version 3.7.X , 3.8.X


Live Demo Click Here


using java script colorchooser.js

Description: This is a "plug & play" style sheet switcher that lets your visitors switch between a list of alternative style sheets to apply to your forum. With a change of style sheet the entire look of your site can be transformed. Persistent cookies are used to store the user's selection and automatically recall that style sheet upon his return.

.

This is Work perfectly vbulletin default Style
if you Want More Change just edit made a CSS Code for like


Easy Style Color switcher Installation method

Styles & Templates > Style Manager > Main CSS > Scroll to the bottom and paste it in the second text area.

Add the following css code

#topbar {
height: 32px;
background: #CCCCCC;
}
.colorchooser {
float:right;
margin-right:10px;
margin-top:10px;
}
.colorchooser span {
  font-family:arial; 
  color:#FFFFFF; 
  font-size:10px; 
  text-decoration:none; 
  float:left; 
  display:block;
}
.colorchooser a {
  width:10px; 
  height:10px; 
  display:block;
  float:left;
  margin-left:5px
}

Styles & Templates > Search in template > Find > header

Add the following code first

<link rel="alternate stylesheet" type="text/css" title="orange-theme" href="orange.css" />
<link rel="alternate stylesheet" type="text/css" title="violet-theme" href="violet.css" />
<link rel="alternate stylesheet" type="text/css" title="red-theme" href="red.css" />
<link rel="alternate stylesheet" type="text/css" title="grey-theme" href="grey.css" />
<link rel="alternate stylesheet" type="text/css" title="black-theme" href="black.css" />
<link rel="alternate stylesheet" type="text/css" title="pinkish-theme" href="pinkish.css" />
<script src="colorchooser.js" type="text/javascript"></script>

<div id="topbar">
<div class="colorchooser"> <span>Choose your color scheme: </span>
<a href="javascript:ChennaigsmStyle('none')" style="background-color:#5A0000;"></a>
<a href="javascript:ChennaigsmStyle('orange-theme')" style="background-color:#FF9900;"></a>
<a href="javascript:ChennaigsmStyle('violet-theme')" style="background-color:#003366;"></a>
<a href="javascript:ChennaigsmStyle('red-theme')" style="background-color:#990000;"></a>
<a href="javascript:ChennaigsmStyle('grey-theme')" style="background-color:#999999;"></a>
<a href="javascript:ChennaigsmStyle('black-theme')" style="background-color:#000000;"></a>
<a href="javascript:ChennaigsmStyle('pinkish-theme')" style="background-color:#B26267;"></a> </div> 
</div>

Upload All Files In color Coding Folder Which i Attached here IN your Forum Root

/public_html/www.youdomain.com Or www.youdomain.com/forum/

Red.css , black.css , grey.css , orange.css , pinkish.css , violet , colorchooser.js

[archet1337]

Any chance of having this updated to vb4?

[princeedward]

great to have this on vb4.0.2

[archet1337]

Originally Posted by princeedward

great to have this on vb4.0.2

Give please

[chennairam]

I didnt Upgrade my forum to vb4

when i update my forum vb4 .. i will update this mod too

[obetyance]

is this the same as what is being use here at vB.org? at the bottom left of the page, it says:

Layout Options | Width: Fixed Color: - - - - - -

How can we add, Width?

[oldfan]

*bump*

[dany_danay]

*bump*
Please vb4!!!

[TravisWPaquin]

It won't let me type my web address to add the color? Where can I find besides typing it which is not working.

[adwade]

I just wanted to say that after reviewing all the color changing scheme MODs here on vBulletin.org I found this to be the easiest to implement and the slickest to use. Kudos to Chennairam for such a great job at coding & releasing it. :up:

[adwade]

Originally Posted by ddo36

Installed nice nice nice. =)

BUT Is there a way to add another color?'

how do you do that?

nevermind. ive done it.

HOW did you do it?

I created an additional green.css containing...

.tcat
{
	background: #336633;

}
.vbmenu_control
{
background: #336633;
}

Then uploaded it to my forum's root folder.

I also added the lines in red below to my header, to allow for a green color option...

<link rel="alternate stylesheet" type="text/css" title="orange-theme" href="orange.css" />
<link rel="alternate stylesheet" type="text/css" title="green-theme" href="green.css" />
<link rel="alternate stylesheet" type="text/css" title="violet-theme" href="violet.css" />
<link rel="alternate stylesheet" type="text/css" title="red-theme" href="red.css" />
<link rel="alternate stylesheet" type="text/css" title="grey-theme" href="grey.css" />
<link rel="alternate stylesheet" type="text/css" title="black-theme" href="black.css" />
<link rel="alternate stylesheet" type="text/css" title="pinkish-theme" href="pinkish.css" />
<script src="colorchooser.js" type="text/javascript"></script>

<div id="topbar">
<div class="colorchooser"> <span>Choose your color scheme: </span>
<a href="javascript:ChennaigsmStyle('none')" style="background-color:#ffffff;"></a>
<a href="javascript:ChennaigsmStyle('orange-theme')" style="background-color:#FF9900;"></a>
<a href="javascript:ChennaigsmStyle('green-theme')" style="background-color:#336633;"></a>
<a href="javascript:ChennaigsmStyle('violet-theme')" style="background-color:#003366;"></a>
<a href="javascript:ChennaigsmStyle('red-theme')" style="background-color:#990000;"></a>
<a href="javascript:ChennaigsmStyle('grey-theme')" style="background-color:#999999;"></a>
<a href="javascript:ChennaigsmStyle('black-theme')" style="background-color:#000000;"></a>
<a href="javascript:ChennaigsmStyle('pinkish-theme')" style="background-color:#B26267;"></a> </div> 
</div>

The new green pick box shows up just fine. When I hover over it it says: javascript:ChennaigsmStyle('green-theme') [S]However, when i click on it, it acts just like the 'none' selection[/S]. (Code above is now correct & works perfectly!)

EDIT: Nevermind, I too just found my error. In copying the violet lines of code to make new ones for the green color, I did not change the word violet to green in all places, see my mistake below.

Oops! When I copied the violet line, I only revised the last occurrence of violet to green

<link rel="alternate stylesheet" type="text/css" title="violet-theme" href="green.css" />

when it should have been

<link rel="alternate stylesheet" type="text/css" title="green-theme" href="green.css" />