Now;
I need a script that searches a color (take: #FF3300) and change it everyware in the css file by another color (depending on the img they click).
Can a script in the htlm page even search in a seperate css file??
Full Version: changing colors
First thanks for al the help so far, I'm learning alot from you guys!
Now;
I need a script that searches a color (take: #FF3300) and change it everyware in the css file by another color (depending on the img they click).
Can a script in the htlm page even search in a seperate css file??
Now;
I need a script that searches a color (take: #FF3300) and change it everyware in the css file by another color (depending on the img they click).
Can a script in the htlm page even search in a seperate css file??
Heh, never thought of this before. It can't be done the way you describe, since JS can't access the server's file system. But the browser already knows what's in the CSS file. Possibly it can be done with the DOM, but that's above me. If it can be done, I think it will be rather involved.
Interesting question though. Hope someone has the answer.
Interesting question though. Hope someone has the answer.
QUOTE(pandy @ Jun 22 2009, 12:19 AM) 
JS can't access the server's file system.
It should be possible with AJAX, but does the OP really want to rewrite his style sheets permanently, or just change colors temporarily in that browser window? The former sounds like a style switcher script. For the latter you might use the JS replace() method on the contents of an embedded (haven't tried external) style sheet, but browser support is shaky:
CODE
<script type="text/javascript">
function change_color(hex_value)
{
try // FF and Opera
{
x=document.getElementsByTagName('style')[0];
var css=x.innerHTML;
css=css.replace(/#ff3300/gi, hex_value);
x.innerHTML=css;
}
catch(err)
{
try // Safari (and Chrome?)
{
var x=document.getElementsByTagName('style')[0];
var css=x.firstChild.nodeValue;
css=css.replace(/#ff3300/gi, hex_value);
x.firstChild.nodeValue=css;
}
catch(err) // MSIE
{
var x=document.styleSheets[0];
var css=x.cssText;
css=css.replace(/#ff3300/gi, hex_value);
x.cssText=css;
}
}
}
</script>
<img src="dog.jpg" alt="Lime" onclick="change_color('#00ff00');">
<img src="dog.jpg" alt="Red" onclick="change_color('#3300ff');">
function change_color(hex_value)
{
try // FF and Opera
{
x=document.getElementsByTagName('style')[0];
var css=x.innerHTML;
css=css.replace(/#ff3300/gi, hex_value);
x.innerHTML=css;
}
catch(err)
{
try // Safari (and Chrome?)
{
var x=document.getElementsByTagName('style')[0];
var css=x.firstChild.nodeValue;
css=css.replace(/#ff3300/gi, hex_value);
x.firstChild.nodeValue=css;
}
catch(err) // MSIE
{
var x=document.styleSheets[0];
var css=x.cssText;
css=css.replace(/#ff3300/gi, hex_value);
x.cssText=css;
}
}
}
</script>
<img src="dog.jpg" alt="Lime" onclick="change_color('#00ff00');">
<img src="dog.jpg" alt="Red" onclick="change_color('#3300ff');">
(the above affects only the first embedded stylesheet on the page).
Another simpler idea is to change the JS "style" property, but then the element's style must initially have been set set with javascript too. To find the element's style as set in a stylesheet is more tricky, see http://www.quirksmode.org/dom/getstyles.html
I think the hinge is this.
cedric wants the script to scan the CSS for random colors that depend on user input and change all instances. There's the rub...
It's probably easier to make a list of all possible colors and where they occur and then do something like "if yellow button is clicked change a, b, c, d, e, f, and g to yellow".
QUOTE
I need a script that searches a color (take: #FF3300) and change it everyware in the css file by another color (depending on the img they click).
cedric wants the script to scan the CSS for random colors that depend on user input and change all instances. There's the rub...
It's probably easier to make a list of all possible colors and where they occur and then do something like "if yellow button is clicked change a, b, c, d, e, f, and g to yellow".
If anyone can provide a css theme switcher? With Cookie functioning for theme appearance(css)? I am completely lost with PHP and it is not working. Now I am left with javascript only. Plz help if anyone can suggest the script.
Pandy, that's what I want indeed.
I want all borders and text colors that are one color to change on click into another color.
I have seen several sites who change the background, but the text and the borders?
I want all borders and text colors that are one color to change on click into another color.
I have seen several sites who change the background, but the text and the borders?
Maybe just changing between various style sheets would be the simplest solution?
You could do it with a style sheet generated on the fly, like this:
http://imaginatorium.org/ecco/ecco.htm
Click in the colour palette at the bottom, and you get a stylesheet based on this.
http://imaginatorium.org/ecco/ecco.htm
Click in the colour palette at the bottom, and you get a stylesheet based on this.
My Chinese isn't that good, so I went with the different stylesheets with javascript onclick.
Thanks for the trouble.
Thanks for the trouble.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.