Amassment Message Board

I want to create a fan site where the visitor can choose which skin to use to view it in. I can't use php because my hosting package at the moment doesn't support it, so I am stuck with using css or something else which my host will support.

I have managed to create separate css documents and they work well if I use the VIEW -> PAGE STYLE menu in Firefox, but I would like a set of links in the page so that people can change the skin/layout that way, partly so that it works in IE, but also so that people know that the function is there. Without links to change the skin, most people would overlook the function.

I have come across tutorials which uses Javascript but I am not sure how to use it - if I need to edit it to make links to the css files, or even how to integrate the Javascript into the html page because all the tutorials I've found on coding sites seem to miss these parts off.

Any help would be appreciated, thanks in advance.

Ah! I have just the solution for you! I did this for a project at work. I don't know if you've seen this page yet, but I think it's pretty helpful: http://www.inetsolution.com/turnleft/po ... ow-to.aspx

What you want to do to make sure that it works is make sure that all of your style sheets have a title. Make sure to make your default style sheet have title="default".

I trick that I did was I made a style sheet and put all the base classes in it with just the sizing and positioning. Then I made the default style sheet (and other style sheets) just to have the colors/images that I was switching out. So, for an example:

In my page.css:

.div {
width: 500px;
height: 500px;
}

in my default style sheet:


.div {
background-color: green;
}


I hope that makes some sense. Since I've just spent a large amount of time on this, if you need any help, let me know. :) I think the Javascript is really easy since I could just copy and paste, then I was good to go! :D

You can use this code: JS Skins the links don't even need to be links, they can images or span like: <span onclick="bake1();">Layout 1</span> or a preview image. you don't need to change anything unless you name your css files something other than layout1.css, etc. Also remember to place the onload code on the body tag to call the script. You can keep the same function names and just add numbers to keep it easy. It's basically a css switch so if you want to change something other than colors, just use the images as div background and combine that with position relative to change the whole look of the page, shape, size and all, just make sure all the layout divs have ids so you can modify them via css. :)

@Mikari: About this I have a question. For the ids do they all need to be the same throughout the CSS? Javascript confuses me something fierce.

each id can only be use on one item (div or whatever) and the CSS will refer to that item. So each different css file would have each id with different colors and style. Although since Pirates Boards can use php, it's better to stick to that for layouts. I find that using variable navigation with the content rather than the layout being the inserted code is much easier.

Ah okay. Still a little confused but I think I'll be okay. I have a hard time grasping the concept of alternate skins...well coding them.