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
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
[ed. note: okyanet last edited this post 14 years, 10 months ago.]