Easy Style Color switcher

[chennairam]

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 (http://chennaigsm.org/forums/index.php?styleid=89)


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/ (http://www.youdomain.com/forum/)

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

[gsmlover4u]

installed www.gsmlover.com

and working fine thanks ram

[DobieGillis?]

installed www.gsmlover.com

and working fine thanks ram

I saw this at the top of your forum, can it be placed at the bottom of the main forum page

[gsmlover4u]

how i can remove strip
and how i can put the switch at the bottom of the forum ?

[DobieGillis?]

how i can remove strip
and how i can put the switch at the bottom of the forum ?

that strip does look bad.

[chennairam]

how i can remove strip
and how i can put the switch at the bottom of the forum ?

Change This Code css topbar

#topbar {
height: 32px;

}


Copy whole Customer Code To paste in Footer template


hope it will work

[gsmlover4u]

i put the code in footer
now swith at the bottom of the forum
thanks

[DobieGillis?]

looks much better. Will try mine now

[chennairam]

Cheers Gsmlover4u

Br.,
Ram

[gsmlover4u]

Change This Code css topbar

#topbar {
height: 32px;

}


Copy whole Customer Code To paste in Footer template


hope it will work

i remove
#topbar {
height: 32px;
background: #CCCCCC;
}

that code now much better

[chennairam]

i remove that code now much better

Yes You Can removed From header templete

[DobieGillis?]

installed and works fine except I cannot get back to my default color, lol!

[chennairam]

installed and works fine except I cannot get back to my default color, lol!

Thx Dobiegillis Mark as installed

Cannot Get Back to my default Color

Shows me your Forum link

[DobieGillis?]

<a href="http://www.cooluniverse.net" target="_blank">www.cooluniverse.net</a> ...it's in the bluefox test skin

[DjEddie]

Installed and works a charm .... only thing it doesnt do is get rid of the image gifs that are on the end of the catagory strips...

any ideas?

[chennairam]

www.cooluniverse.net ...it's in the bluefox test skin

Works Fine

Nice Forum

[DobieGillis?]

Works Fine

Nice Forum

thank you

[chennairam]

Installed and works a charm .... only thing it doesnt do is get rid of the image gifs that are on the end of the catagory strips...

any ideas?

What ever You Want to add Others stripsto changes To Put a Code In red.css, Green.css like all

[chennairam]

www.cooluniverse.net ...it's in the bluefox test skin

Works greatly

[hexeditor]

thanks good work

[chennairam]

thanks good work

Can you Show Me Demo Of Your Site

[subzero06]

works great on 3.7.6

[nomoreturn]

Installed and works great my forum looks kool now

[chennairam]

works great on 3.7.6

Installed and works great my forum looks kool now

Thank you Friends

Can you Shows me your Forum links

[RedDevil]

Installed thanks.

It does miss a few mods out like mgc shoutbox, notices and a few others at bottom of forum, otherwise very nice.

[macc]

Nice mod - thanks - works perfect!

macc

[isatice]

nice hack , easy installation , great job , mark as installed
also i added "thead" and "tfoot" to css files

[RobbieZ]

All I see is the text.

Choose your color scheme:

No little boxes of color , no nothing :(

EDIT: Sussed it, It only work on certain styles. :D

Thanks

nice hack , easy installation , great job , mark as installed
also i added "thead" and "tfoot" to css files

Can you supply your CSS coding please? Thanks isatice

[chennairam]

All I see is the text.



No little boxes of color , no nothing :(

EDIT: Sussed it, It only work on certain styles. :D

Thanks



Can you supply your CSS coding please? Thanks isatice



Can edit what Ever you like all Css file For your Current templete For example (red.css , blue.css)

[cordleztoaster]

Any chance you can add a button so user can switch between a fixed width and non fixed width? like on the bottom of this page?

[ddo36]

Installed :) nice nice nice. =)

BUT Is there a way to add another color?'

how do you do that?

[dvbusuario]

Very Good Hack, thank you!

Install!

[ddo36]

Installed nice nice nice. =)

BUT Is there a way to add another color?'

how do you do that?

nevermind. ive done it. :)

[DR.vBProf]

looking www.flstudio.biz

[Bounce]

The blocked web page included objects that were either infected or likely to be infected with a virus. :eek:

[SirHappy]

nice work. thanks:)

[TAIFUN_T]

Live Demo Click Here

This page have virus

[jonlar]

Seems i have done something wrong. i do get this

http://img3.imagebanana.com/img/sizg19ky/thumb/Unbenannt.jpg (http://img3.imagebanana.com/view/sizg19ky/Unbenannt.jpg)

i added the first Code here (red Border)
http://img3.imagebanana.com/img/tg0sli1n/thumb/Unbenannt.jpg (http://img3.imagebanana.com/view/tg0sli1n/Unbenannt.jpg)

Cause i do not understand whats ment with
Styles & Templates > Style Manager > Main CSS > Scroll to the bottom and paste it in the second text area.

this is the 2nd Box?! Thanks for help

edit: Using vBadvanced CMPS v3.2.0 and vB 3.8.3

[Cobra-J82]

This page have virus

samething happened here

and thanks for the hack works perfect ;)

[KevinGupta]

Is there anyway I can have it per section?
Like if I chose a color it change for ALL of the sections...
Can I have it colors showing one section each?

[Morrus]

Not working at all for me.

I get the strip at the top of the page OK.

Clicking on a color box gives me ""Error on page" in the bottom left of the browser, and has no effect.

Removed for now.

[Bansheebob]

Not working at all for me.

I get the strip at the top of the page OK.

Clicking on a color box gives me ""Error on page" in the bottom left of the browser, and has no effect.

Removed for now.

same here :confused:

[Bansheebob]

support? anyone? hmmm

[Morrus]

support? anyone? hmmm

Heh, yeah. Clearly not a currently supported mod. Who put that big "supported" check up there? :D

Developer's last post in this thread was in May, although he's been online here as recently as September.

[chennairam]

Thank you
======================
not work to change the background
And some of the intervals

Brother For Backgroud Change To you need To Edit red.css,black.css Etc.... Than only it will Work


My modification Work At most of That Default Style's

Some Style Not work Becuase you need To Edit all Color's css which i attached folder

[chennairam]

This page have virus

Demo Link fixed Now


Now Check the Demo

[New Joe]

Didn't work, it only changed some of my vB Default color.
Not installed, would be nice if it if work.

[chennairam]

Didn't work, it only changed some of my vB Default color.
Not installed, would be nice if it if work.

Yes i said already ..it will work Best in vbdefault style ...

if you custom style you must edit all css color which you upload same like as your style


hope you understand

[New Joe]

But I use vB Default color style.
Which I did say in my post;
Didn't work, it only changed some of my vB Default color.

[ade5675]

But I use vB Default color style.
Which I did say in my post;

You have to be creative with the code and add more css attributes you want to change.

This is what I used for grey.css file. Let me know if you need more ....

Check sample here (top right corner) ... http://www.naijadiscussion.com/naijaforum/


.tcat
{
background: #999999;
}


.vbmenu_control
{
background: #999999;
}


.thead
{
background: #B1B1B1;
}


.tfoot
{
background: #999999;
}


.tborder
{
background: #686868;
}


.controlbar
{
background: #999999;
}


.fieldset
{
background: #CCCCCC;
}



.alt2
{
background: #CCCCCC;
}

[New Joe]

Thanks for that, please put up any more.

[chennairam]

You have to be creative with the code and add more css attributes you want to change.

This is what I used for grey.css file. Let me know if you need more ....

Check sample here (top right corner) ... http://www.naijadiscussion.com/naijaforum/


.tcat
{
background: #999999;
}


.vbmenu_control
{
background: #999999;
}


.thead
{
background: #B1B1B1;
}


.tfoot
{
background: #999999;
}


.tborder
{
background: #686868;
}


.controlbar
{
background: #999999;
}


.fieldset
{
background: #CCCCCC;
}



.alt2
{
background: #CCCCCC;
}

You are absolute Right ...

keep it up ....

[ade5675]

You are absolute Right ...

keep it up ....

Tks ... and I have great respect for your work on this mod.

[ade5675]

Thanks for that, please put up any more.

I don't wanna steal chennairam's shine. He did a great work with this quick fix of a mod. If he is ok with it, I will post the rest. But remember it's all about been creative with it.

[revmitchell]

Styles & Templates > Search in template > Find > header

This doesnt make any sense

[COL NIL SATIS]

excellent this is!!! installed

[Hornstar]

Any chance for a VB4 update?

[mgurain]

I was looking for such a thing,
It will be better to make changes automatic by a product,
but worth a try.

Thanks,,

[ddo36]

what if i want the header and the background to change color just like the bars.
how can i do that>?

[mohammadxxx]

hi
very nice . i have meny search for this change 4 my forum .
nice job .

thanks
kind regards
all4persian

[archet1337]

Any chance of having this updated to vb4?

[princeedward]

great to have this on vb4.0.2

;)

[archet1337]

great to have this on vb4.0.2

;)

Give please :D

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

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') However, when i click on it, it acts just like the 'none' selection. :( (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.:o

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