Preview set css class

Developers
1

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.

Thanks!
Jason

2

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.

Justin

3

Thanks Justin, I figured as much.