Dynamic Style Sheets?

HTML & CSS
21

Yah, I didn’t get to that the first time.

After skimming the code, that looks like what Iw ant.

Thanks,

Debbie

22

You could change stylesheets as described by others earlier or another option is to use javascript to change styles according to user preferences.

This demo has 2 checkboxes. The first toggles the text color in div 1 between red and its default colour. The second checkbox toggles the background colour of divs 2,3,4 between green and their default colour.

How you set the style changing options is limited only by your imagination.

If you really want to get fancy you could save the user selected style preferences in cookies on their pc so that the next time they go to your web page, their style preferences will be automatically loaded for them.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
 
#wrap {
 width: 500px;
    margin: 0px auto 0px auto;
    padding: 0px 0px 0px 0px
}
#leftCol {
 width 33%;
    float: left;
}
#rightCol {
 width 66%;
    float: right;
}

</style>
<script type="text/javascript">
 
var divO = new Array();
 
function changeBg(isChecked) {
       var bgColor = (isChecked)? 'green' : '';
       for(var i=0; i < divO.length; i++) {
            divO[i].style.backgroundColor = bgColor;
       }
}

function changeTxtCol(isChecked) {
       var txtColor = (isChecked)? 'red' : '';
       document.getElementById("div1").style.color = txtColor;
}
 
window.onload=function() {
      divO = document.getElementById("container").getElementsByTagName('div');
}
</script>

</head>
<body>
 
<div id="wrap">
 <div id="leftCol">
     <div><input type="checkbox" onclick="changeTxtCol(this.checked);" /> Change div 1 text color to red</div>
        <div><input type="checkbox" onclick="changeBg(this.checked);" /> Change divs 2,3,4 background to green</div>
    </div>
    
    <div id="rightCol">
     <div id="div1">div 1</div>
     <div id="container">
             <div>div 2</div>
            <div>div 3</div>
            <div>div 4</div>
        </div>
    </div>
   
</div>
</body>
</html>
23

Another old man! (Could be worse… you could only be 18!) :lol:

Debbie

24

He isn’t 100 (or close to it), his avatar is just of an old man.

Wasn’t that walt whitman? Or some damn poet type guy? : )

Stylesheet switching is one idea, but I’ve always wondered if one could do things like dynamically (on the back end) change things like the url to background images and that sort of thing. Of course, with browsers caching CSS sheets, that would be difficult to implement.

For changing background header images, we’ve had to resort to setting the CSS for that in the HTML (in <style> tags). The manager wanted to be able to randomly change background images at his whim. Changing the CSS sheet each time is beyond his capabilities, so we’ve added it to the HTML and built an admin panel where he can change it using a little form.

sigh

25

I would’ve played along at being 100 :slight_smile:

Now that you’re only 44 it changes your “character” when compared to your avatar. Maybe we should swap avatars :D.

btw - I’m 52