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:
./froala_editor/css/froala_style.css ./froala_editor/css/froala_style.min.css
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.
0 Comments
Add your comment