We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 33968
    • 863 Posts
    I'm about to start work on a project with similar requirements, but from experience it's not a good idea to give too much design control to content editors laugh

    Rather than giving them unlimited palette control, why not pre-define some css class styles and assign them to the <body> element, then use a TV to allow your editors to switch between styles.

    Eg:

    template:
    <body class="[[*styleSwitch]]">
        <h1>First level heading</h1>
        <p>Paragraph .... </p>
         ...
    


    'styleSwitch' TV

    Set your TV up like this which will add the css class 'green', 'red' or 'blue' to the body tag in your html
    Input Type: Listbox (Single-select)
    Input Option Values:  green || red || blue
    


    And in your css:
    .green {
        color: green;
    }
    
    .red {
        color: red;
    }
    
    .blue {
        color: blue;
    }
    


    You could also set your TV up to switch between pre-defined stylesheets like this:
      <link rel="stylesheet" media="screen" href="[[*styleSwitch]]" />
    


    Just a really simple example but that should give you an idea of how you can easily switch styles without having to move css to your template. Keeping css in an external stylesheet means you can take advantage of browser caching, keep your page weight down and avoid mixing styling and markup.

    It also means you can give your editors some styling choices without it ending up like Boyd's Toast Store tongue [ed. note: okyanet last edited this post 14 years, 10 months ago.]
      • 28042 ☆ A M B ☆
      • 24,524 Posts
      I find myself frequently using a TV to indicate what kind of page it is - home page, two-column, single-column. I use the TV in the body tag to create a specific ID for styling:
      <body id="[*styletype*]">

      Then in my CSS file I can be very specific:
      /*** Single column pages ***/
      #single-column #sidebar{display:none;}
      #single-column #main{width:100%;}

      You could also create separate .css files, and use the TV in the stylesheet link in the template head:
      <link rel="stylesheet" href="assets/styles/[*styletype*].css">


      http://sottwell.com/tv-input-types.html
        Studying MODX in the desert - http://sottwell.com
        Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
        Join the Slack Community - http://modx.org
        • 9207 ☆ A M B ☆
        • 2,475 Posts
        No no, that's a perfectly legitimate use case. Go for it! Another good use-case is if you want to enforce permissions on your CSS -- e.g. setup logins for your front-end designers/devs.