Changing my sites style

Message

Music Head · #1 Post by **Music Head** » Sun Aug 29, 2004 1:46 am

Have you ever visited a sit where they have a pull down menu and you select the way the site looks eg. the background changes, text so on. Just like on the spiderman2 website. How can i add this technique to my site. I just want the background to change and table backgrounds.

Peter Swinkels · #2 Post by **Peter Swinkels** » Sun Aug 29, 2004 2:57 pm

Perhaps you should post a link to the site you mentioned, it might give people a better idea of what you want. Any way to make a site that users can customize you would probably need to use Java Script or Visual Basic Script.

#3 Post by **navynuke04** » Sun Aug 29, 2004 4:07 pm

If you go into your profile on this site, you can change the theme from agdi to KQ1VGA. This does pretty much exactly what you are wanting.

JWar · #4 Post by **JWar** » Sun Aug 29, 2004 9:57 pm

Doing this before I head off to bed, so there might be a few bugs:

1st of all, use stylesheets. A lot of people from ´the oldschool´ scream that this is not the way to go, but I beg to differ. I do this for a living, and in the long run, its just neater.
Lets say you have two styles you want ´default style´ and ´pink-bunny style´. Seeing as you want to only change the backgrounds of the page and the tables, it´s relatively easy:

/* Default style */
.dStyle{
background-image: url("defaultBgImage.gif");
}

/* Default style */
.pinkStyle{
backgrounde-image: url("pinkBgImage.gif");
}

now, in your html code do the following:

<body class="dStyle">

and for every table you use

<table class="dStyle">

<select>
<option id="dStyle" onclick="javascript:changeStyle(this);">Default Style</option>
<option id="pinkStyle" onclick="javascript:changeStyle(this);">Default Style</option>
</select>

Now, between the page´s <head> tags, do the following:

<script language="Javascript">
function changeStyle(o){
var styleName = o.id;
var a = document.getElementsByTagName("body");
var bodyTag = a[0];
bodyTag.className = styleName;
a = document.getElementsByTagName("table");
for(i = 0; i < a.length; i++){
a.className = styleName;
}
}
</script>

I think that should do it. If it doesn´t, let me know here, and I´ll take a better look at it and maybe even test it .

Hope it helps