Changing my sites style
Moderators: adeyke, VampD3, eriqchang, Angelus3K
-
- Defense Minister Status
- Posts: 717
- Joined: Sun Aug 15, 2004 3:55 am
- Location: South Australia
Changing my sites style
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.
-
- Knight Status
- Posts: 183
- Joined: Mon Aug 02, 2004 12:12 pm
-
- Honorary AGD
- Posts: 5378
- Joined: Fri Sep 13, 2002 1:19 am
- Location: US of A
- Contact:
-
- Knight Status
- Posts: 153
- Joined: Fri May 21, 2004 11:49 am
- Location: Tygron Development Centre
- Contact:
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
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