Color change on click

[aneeselahi]

I dont know about the trick for change the color on one click in forum and websites, its surly use Javascript with helping CSS. can anybody hellp me??
here I put the website link for example
Here

in this forum there is two button blue and magenta when I press blue the whole layout becomes blue, likewise click magenta for magenta.

how to do this type on forum (specially Vbulletin)?

and also web.

w8ing 4 reply

[bluewalrus]

That page is using php I think to know which style you've chosen.

<a href="?styleid=158">
<font color="#21678d">
<img height="28" border="0" width="23" src="http://www.vip6600.com/vip/images/C-Pink/gradients/catbg-1.gif"></font></a>

I think there php would be something like this

<?php
if (isset($_GET['styleid'] {
$style_is = $_GET['styleid'];
if ($style_is =="158") {
?>
css code for magenta
<?php
} else if ($style_is =="156") {
?>
css code for blue 
<?php
} // if other styles put them below with additional ifs
} //this closes the if styleid is set 
?>

There is also a javascript way of doing this but I don't recall it and your example wasnt using it.

[MrEnder]

Just like you do your

a:link
a:visited
a:hover
a:active

you can also do this to your paragraphs divs and prolly other things I've never tried

for example

p {

font-size: 12pt;

}

p:hover {

font-size: 16pt;

}

:active means as you click and or hold a mousedown on that object it will do so and so it is active

That might be what your looking for no scripting required

however if your referring to an entire stylesheet change easy way to do it is (javascript)

document.styleSheets[2]; /*The number is the ammount of stylesheets u have*/

document.styleSheets[1].disabled = boolean; /*This makes the stylesheet either turn on or off allowing you to use multiple stylesheets and turn them on and off with the click of a button have a main template and then color templates*/

[aneeselahi]

First, Many thanks to bluewalrus & MrEnder for reply and giving me time,
as Mr. blue says the trick I will try but in which file I make this changes?
or I make another file (by my own) but there is problem, how to link with all other pages?
I think on CSS file of VBull I mention these CSS, is it right?

[bluewalrus]

It uses css but not on it's own. The css is changed depending on the page the user is on. The page will be the same page on the server but will appear different in the address bar. That could I posted would go onto any page that you wanted to have the 2 swapping options. You would then link them with

<a href="?styleid=158">Magenta</a>
<a href="?styleid=156">Blue</a>

You can put this before you start your html.

<?php
if (isset($_GET['styleid'] {
$style_is = $_GET['styleid'];
?>

In your head put in this

<?php
if ($style_is =="158") {
?>
<style type="text/css">
Any Styles You want for the magenta coloring this should only change color values so you dont redo the layout.
</style>
<?php
} else if ($style_is =="156") {
?>
<style type="text/css">
Any Styles You want for the blue coloring this should only change color values so you dont redo the layout.
</style><?php
} // if other styles put them below with additional ifs
} //this closes the if styleid is set 
?>

In the body of your page whereve you want want the swaping options put in

<a href="?styleid=158">Magenta</a>
<a href="?styleid=156">Blue</a> 

You can change that value also to be 1 and 2 or whatever you want just change it everywhere. Post back if you got any more questions.

[bluewalrus]

Actually you don't want to use this exactley as I've put it unless the style ID will always be set. They way I've written it your starting html will be ignored if the style ID is not set so instead do this (and i missed some closing tags)...

Pre-HTML

<?php
if (isset($_GET['styleid'])) {
$style_is = $_GET['styleid'];
}
?>

Head

<?php 
if (isset($style_is)) {
if ($style_is =="158") {
?>
<style type="text/css">
Any Styles You want for the magenta coloring this should only change color values so you dont redo the layout.
</style>
<?php
} else if ($style_is =="156") {
?>
<style type="text/css">
Any Styles You want for the blue coloring this should only change color values so you dont redo the layout.
</style><?php
} // if other styles put them below with additional ifs
} //this closes the if styleis is set 
?>

The rest is still the same

[aneeselahi]

Actually you don't want to use this exactley .....

No, that day I just read n replied and due to some other important work I did'nt get the time.

so today now I am ready to use these all.

Thanks in advance