Preview set css class

Sorry, asking another question over the weekend :wink:

First off I’ll describe what I’m trying to solve, then I’ll describe the feature that I think is needed.

I’m modifying the built-in heading module (or creating a copy of it) that will have 7 or so built-in styles. This is so there can be consistency across the site.

Currently I’m setting the style by adding a select field (header_type) that adds a css-class that has all the header styles (font-weight, font-size, color, line-height, letter-spacing).

The issue is that I’m unable to find a way to set a preview that will change the css class on-the-fly so instead I need to wait for what appears to be a full reload. Is there a better way to accomplish what I’m attempting to do?

The only thing I can think of is creating my own javascript preview that will toggle the class correctly.


Hey Jason,

In order to live preview that you’ll need to set the preview type for the header_type setting to none…

'preview' => array(
    'type'    => 'none'

Once you’ve done that, you’ll need to write some JavaScript in js/settings.js to add the class when that setting is changed. Let me know if you have any questions about that.


Thanks Justin, I figured as much.