Well at least I think its advanced cuz it looks complicated. I saw the use of this on a site Snecx This is a very neat website and the dude is amazing with photoshop. But getting back to the point, if you go to that site at the top right(not so top) it has
No C.S.S | V. II | V.I
and when you click on one of them it changes the whole layout. I want to do the same thing except change the color of the layout so the user can chooose the layout color. Matter of fact Spoono does exactly what I'm trying to do. If you go to that site it says flavor and you choose the color which I'm trying to do. If anyone knows how or knows of a tutorial please point me in the right direction. Thanks in advance.

Well I found a javascript version of it on Spoono. But I still don't get it.
Spoono Tutorial
I don't get how it would change the colors. Would I have to include the different colored images on the css files or what??? And if I do how do I do that, just take the all html code and put it in the css file, lol.

Ok, this is what you want to do.

#1...create an folder to store the images in. Then, inside this folder, create a new folder for each color (i.e. img/blue/ and img/red/).

#2...upload all the colored images you need to use to each individual folder.

#3...you create a different .css file for each "skin" you want. I.e. you can create a red.css and a blue.css.

I notice they are using php to differentiate the CSS files, but it can easily be done with html as well if it's just an html site.

Basically, you use the following code to call a CSS file:



So, if it's just html, create an index.html and an index1.html.

In index.html, use the code above and put the red.css inside a "css" folder. Then put the blue.css in there as well, and instead of the code above, in your index1.html, use this code:



Then when you load index.html it will load the red colored CSS and when you load index1.html it will load the blue colored CSS.

Now, as for images, if you use two different .html pages it will be easy enough to just map to the right images in each .html page. For the site you showed as an example, however, I believe they are using CSS and tables to display the correct images.

background-image: url('path/to/image/image.gif');

as an example.

Hope this helps.

Yep that helps alot. If I do 2 html pages and it links to different images then that would take a while to load. I could do background-image: url('path/to/image/image.gif');
it might take a while though. I'm planning on using only 2 or 3 different colors. Thanks alot b that helped alot.

Hmm, one more question. Can I add id's or classes to table columns and/or rows so for changing images on different css files it could go like.

On "RED" CSS file.
banner.td {background-image: url('red/banner.jpg');}

On "BLUE" CSS file.
banner.td {background-image: url('blue/banner.jpg');}


and after that just link to the different css files witht the tutorial.

Yes, in fact, that is likely how they do it on the other site there.

It is the most efficient way because of the fact if you do it that way, then you only have one .html page to create, and all changes are made in the CSS files. Then, if you want to change something on the .html page, you only have to do it one time. It gives it more of a "skin" feel than a different page feel.