PDA

View Full Version : changing CSS Style with a Script

Urnemanden
09-16-2008, 07:06 AM
Hi!

My site is 99% finished, the only thing i need to do, is to make the "Settings" page. This will contain a Style changer. I downloaded a script from This Site (http://www.codelifter.com/main/javascript/changestyles.html) but i found out that it didnt work in the way i wanted. What i want is a script that saves a cookie on the users PC, after the user choosed the Style. Then next time the user visits the site, the style has been changed.

Now, i don't understand much of making scripts in any way, so i just wanted to know if anyone could help me create or find a free script that does that? :D

regards

Urnemanden
coothead
09-16-2008, 07:42 AM
HI there Urnemanden,

check out the attachment, it will allow for the setting of various stylesheets in the index/home page.
This setting will then be carried to other pages with a cookie.
Urnemanden
09-16-2008, 08:24 AM
I was unsure how to apply the script to my website, but i did as good as i could :)

- I copied the folder 'scripts' to my website
- I copied the following line to the <head></head> section:

<script type="text/javascript" src="scripts/setStyles.js"></script>

- I copied the following lines to the <body></body> section:

<div id="pic_holder">
<img id="pic0" src="images/bg_green_box.gif" alt="bg_green">
<img id="pic1" src="images/bg_blue_box.gif" alt="bg_blue">
<img id="pic2" src="images/bg_peach_box.gif" alt="bg_peach">
</div>


After changing the lines, i looked on the settings page, and saw the buttons and everything, but i couldn't click on them. I was thinking what was wrong, when i then said to myself it must be something with the fil structure (just a guess).

I dunno how to change that, but here is the file structure i use for my website:
http://img363.imageshack.us/img363/1222/filestructureme7.png
coothead
09-16-2008, 01:08 PM
Hi there Urnemanden,

if you can supply a link to your site I will, probably, be able to resolve the problem that you are experiencing. :agree:
Urnemanden
09-17-2008, 07:24 AM
My website is not online yet, but it will be as soon as possible! :D

Until now, i just need to wait. ;)
Urnemanden
09-18-2008, 12:41 AM
Hi again!

I just bought the domain & the server yesterday, so here is my website: http://www.urnemanden.com

It is in the "Settings" section you should be able to change styles with the script, so i hope you find out anything :)
coothead
09-18-2008, 09:02 AM
Hi there Urnemanden,

I have add the javascript to your site pages and also made a few coding amendments.
Check out the attachment which also includes simple installation instructions. :agree:
Urnemanden
09-18-2008, 02:50 PM
The pages you attached in the zip is curently not updated, so i just copy all changes related to the script over to the site, and see if i can get it work :D
Urnemanden
09-21-2008, 04:46 AM
I finaly got the script working on the Settings Page!
:)

Thanks for the script coothead. Could be cool if it could change the button img's too, but i have to learn something about scripting then. :D

Until now: Thanks!
TJNproductions
10-18-2008, 05:36 PM
Hey, Coothead. I already have a style switcher but I was just looking at yours and was wondering if it can be changed to a text link rather than a image? I'm XHTML Strict so it will have to validate :)
coothead
10-18-2008, 06:35 PM
Hi there TJNproductions,
I already have a style switcher but I was just looking at yours and was wondering if it can be changed to a text link rather than a image?
You can change the img element to just about any element that you require. :agree:
There would, of course, be a few amendments to the mark-up and the script.
For simplicities sake I would suggest using the same ids for your chosen elements as were used for the img elements.
So that would mean pic0, pic1, pic2, pic3.......
Also the alt attributes would need to be changed to title attributes

Here are the required amendments:-
In the markup change this...

<div id="pic_holder">
<img id="pic0" src="images/bg_green_box.gif" alt="bg_green">
<img id="pic1" src="images/bg_blue_box.gif" alt="bg_blue">
<img id="pic2" src="images/bg_peach_box.gif" alt="bg_peach">
</div>

...to something similar to this...

<ul id="pic_holder">
<li id="pic0" title="bg_green">style one</li>
<li id="pic1" title="bg_blue">style two</li>
<li id="pic2" title="bg_peach">style three</li>
</ul>

...and in the script, change this...

window.onload=function() {
pic=document.getElementById('pic_holder').getElementsByTagName('img');
for(c=0;c<pic.length;c++) {
pic[c].onclick=function() {
file='stylesheets/'+this.alt+'.css';
stylech(file);
}
}
readCookie();
}

...to this...

window.onload=function() {
pic=document.getElementById('pic_holder').getElementsByTagName('li');
for(c=0;c<pic.length;c++) {
pic[c].onclick=function() {
file='stylesheets/'+this.title+'.css';
stylech(file);
}
}
readCookie();
}