SitePoint Sponsor

User Tag List

Results 1 to 25 of 25
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,762
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Dynamic Style Sheets??

    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

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,762
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    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

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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/cod...t-switcher.php

  5. #5
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,762
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Rayzur,

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



    Debbie

    P.S. Are you like 100?!

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    Did you follow my original question? (It's late and my brain is fading...)
    Yes
    Quote Originally Posted by DoubleDee View Post
    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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    P.S. Are you like 100?!
    Lol, I'm only 44
    Sometimes it feels like 100 though

  8. #8
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would've played along at being 100

    Now that you're only 44 it changes your "character" when compared to your avatar. Maybe we should swap avatars .

    btw - I'm 52

  9. #9
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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*

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    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
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  11. #11
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    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.

    Quote Originally Posted by Stomme poes View Post
    Wasn't that walt whitman? Or some damn poet type guy? : )
    I thought it was either Santa (pre-diabetes) or Darwin (looking particularly curious)

    Quote Originally Posted by Stomme poes View Post
    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/

  12. #12
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,762
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    Lol, I'm only 44
    Sometimes it feels like 100 though
    We can grow old together!


    Debbie

  13. #13
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,762
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kalon View Post
    I would've played along at being 100

    Now that you're only 44 it changes your "character" when compared to your avatar. Maybe we should swap avatars .

    btw - I'm 52
    Another old man! (Could be worse... you could only be 18!)


    Debbie

  14. #14
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    Another old man! (Could be worse... you could only be 18!)


    Debbie
    Worse?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  15. #15
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,762
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    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

  16. #16
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,762
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Worse?
    Just kidding!


    Debbie

  17. #17
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    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.
    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.

    Code:
     
    <!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>

  18. #18
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    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.

  19. #19
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    Could you use PHP to "build" a CSS stylesheet on the fly?
    Quote Originally Posted by Stomme poes View Post
    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.
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  20. #20
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  21. #21
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    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.

  22. #22
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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).

  23. #23
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,762
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    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!!


    Debbie

  24. #24
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,762
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kalon View Post
    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.

    Code:
     
    <!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

  25. #25
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,762
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    Indeed you can, if you visit the link I provided earlier it explains how to make a PHP powered stylesheet.
    Yah, I didn't get to that the first time.

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

    Thanks,


    Debbie


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •