Dynamic Style Sheets?

[DoubleDee]

Is it possible to create a dynamic Style Sheet?

I would like to create web page for my portfolio where a user could select a choice (e.g. radio button) and have that change what is in my CSS Style Sheet so that a particular element changes across the board.

Does that make sense?! :-/

Debbie

[DoubleDee]

@Rayzur

Lol, I’m only 44
Sometimes it feels like 100 though

We can grow old together!

Debbie

[AlexDawson]

The only immediate issue with JavaScript for the use of conditional styles would be if scripting were disabled. While the PHP (server-side) solution may seem like extra work where perhaps it could otherwise be done through active DOM manipulation, I wouldn’t want to push the client-side solution if it’s going to be used extensively and is required to have a set effect. In this case it’s physical features being made active, not just a degrading mechanism, IMO PHP is still the best way forward.

[AlexDawson]

@DoubleDee

There isn’t a why to change the CSS file itself on-the-fly sorta like how you can use PHP to change a web page’s HTML on-the-fly?

See, what you’re asking for is the CSS to change itself which isn’t possible because CSS isn’t a dynamic language, it’s static like HTML. When HTML changes dynamically it’s not due to the HTML, it’s due to the PHP altering the HTML. Therefore the only way to change the code would be to use scripting or PHP or something to make the dynamic changes as the code is rendered. Which is why you’d need to use scripting - to make the stuff happen as you need it.

@Stomme_poes

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

I thought it was either Santa (pre-diabetes) or Darwin (looking particularly curious)

@Stomme_poes

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.

Yes it is possible… you would need to set no-caching to the CSS file (as you said) in htaccess (actually perhaps if the code changes it won’t fetch the cached version) and you would use something like this (you could do a style.php file)… http://fwebde.com/css/php-dynamic-css/

[RyanReese]

@Stomme_poes

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.

sigh

Instead of using $_GET which loads variables in the URL string, he could use $_POST which would keep the information clean from the URL and strictly on the server side

[system]

For something like this, you don’t even need jquery.

You could use just plain vanilla javascript and probably end up using a lot less code. The demo I posted earlier is fairly basic but it wouldn’t take much to expand that to do more.

[DoubleDee]

@RyanReese

Worse?

Just kidding!

Debbie

[DoubleDee]

@AlexDawson

See, what you’re asking for is the CSS to change itself which isn’t possible because CSS isn’t a dynamic language, it’s static like HTML. When HTML changes dynamically it’s not due to the HTML, it’s due to the PHP altering the HTML. Therefore the only way to change the code would be to use scripting or PHP or something to make the dynamic changes as the code is rendered. Which is why you’d need to use scripting - to make the stuff happen as you need it.

Could you use PHP to “build” a CSS stylesheet on the fly?

What I was envisioning - forgetting fast - is an ability to be able to click check boxes or radio buttons in a control panel and then have it change the style of elements.

Not the same as having 3 stylesheets on hand, mind you, but a way to tweak things more.

Say I want to change all control from white to light blue, and make my background dark blue from white, and my text from black to white. I could click those element boxes and voilà, things change.

Next maybe I’d make the control yellow, text red, and leave the background white.

I just think that would be a good way to do a “website color scheme picker” as well as show people the power of CSS!

Debbie

[RyanReese]

@DoubleDee

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

Debbie

Worse?

[DoubleDee]

@Kalon

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>

Kalon, that is sorta what I was envisioning, although I like the link Alex posted which used PHP better since it is more user-proof!

Thanks just the same!

Debbie

[DoubleDee]

@AlexDawson

you would use something like this (you could do a style.php file)… http://fwebde.com/css/php-dynamic-css/

Alex,

I didn’t have time to try that code, but that looks pretty close to what I wanted, and it is better because it can’t be disabled like Javascript!

Thanks!! :tup:

Debbie

[Stomme_poes]

Meh, depends on how important changing styles is. If changing colour doesn’t change content, I don’t see why it can’t be in JS.

If it’s changing something important, then I’d start getting worried (display: none/block).

[Chroniclemaster1]

@DoubleDee

Could you use PHP to “build” a CSS stylesheet on the fly?

@Stomme_poes

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.

That’s an interesting caveat. In that case would a Javascript solution actually be better? That would manage the switching on the client-side in script so you wouldn’t have to worry about caching. It is at least another option. Alex has a good bead on the PHP solution. For a JS solution, I’d look at different jQuery options. Changing styles directly is one of the most basic jQuery options, and adding / removing classes is only slightly more complicated. Like the PHP, it would not be terribly difficult. For simple things like switching colors, I would do something like have a color picker (you can build your own, but there are also downloadable plug-ins in the UI libraries). When you pick a color, take the value and pass it to jQuery and change the color inline based on the input color. For more complicated transformations, define classes and use jQuery to add / remove the classes based on your application input.

[AlexDawson]

@DoubleDee

Could you use PHP to “build” a CSS stylesheet on the fly?

Indeed you can, if you visit the link I provided earlier it explains how to make a PHP powered stylesheet.

[Rayzur]

@DoubleDee

P.S. Are you like 100?!

Lol, I’m only 44
Sometimes it feels like 100 though

[RyanReese]

@DoubleDee

Did you follow my original question? (It’s late and my brain is fading…)

Yes

@DoubleDee

Rayzur,

Thanks for the links! (I’ll check them out tomorrow.)

Debbie

P.S. Are you like 100?!

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

[DoubleDee]

Rayzur,

Thanks for the links! (I’ll check them out tomorrow.)

Debbie

P.S. Are you like 100?!

[Rayzur]

Hi,

As Ryan pointed out, that is done with a script. You will find several examples by doing a search for “Style Sheet Switcher”.

Here is a tutorial that Eric put together.
http://www.visibilityinherit.com/code/style-sheet-switcher.php

[DoubleDee]

@RyanReese

You would need to incorporate JS into the mix (or PHP) depending on if you want it automatic or not

But CSS alone can’t do this.

Did you follow my original question? (It’s late and my brain is fading…)

I was thinking if you could change your CSS on the fly then you could give your website a whole different look (or elements inside it).

How would you use Javascript or PHP to do this?

There isn’t a why to change the CSS file itself on-the-fly sorta like how you can use PHP to change a web page’s HTML on-the-fly?

Debbie

[RyanReese]

You would need to incorporate JS into the mix (or PHP) depending on if you want it automatic or not

But CSS alone can’t do this.