Ellington CMS Knowledge BaseNewsStoriesStyling the WYSIWYG components

Styling the WYSIWYG components

The Style Sheets

Our built in WYSIWYG editor (Froala) comes coupled with a style sheet that will allow you to customize all the text formatting tools beyond the defaults in your admin. By customizing this style sheet, it effectively lets you set the styles for the selectable components in the WYSIWYG. 

You can adjust the spacing between embeddable objects, line heights, fonts, and much more. By customizing these options, when a member of the editorial staff selects them in the admin, the styles you outline will be applied on the frontend when the story body is rendered.

To get started, find the default stylesheets located in your media directory at:


Rather than edit these files directly, we recommend copying them and renaming them to something like froala_style_custom.css

You can now open your story_detail.html and include the stylesheet at the top of the file as you would any stylesheet.  Once installed into the story_detail.html template, you may proceed to edit the file and you will get the styles outlined when the story body is rendered.


Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.