To start customizing the rich text editor, simply add a stylesheet called richtext.css anywhere in the public folder.

Whenever the rich text editor is shown, the richtext.css stylesheet will be included and the editor will be configured based on the CSS selectors.

If the stylesheet is empty you’ll get a very minimalist editor.

Here’s an example stylesheet that matches the default configuration of the editor:

h2, h3, h4, pre, strong, em, ol, ul, a, img {}

That’s it - simply setting up a rule for these elements will make the editor include them.

To add a h5 and h6, again just mention them in the stylesheet:

h5, h6 {}

You can also add new classes in this way, both for block elements and inline elements. Some simple color rules:

.red { color: red; }
.blue { color: blue; }

Now in the rich text editor you’ll get a new dropdown menu for applying inline styles with options for “Red” and “Blue”.

Another option is adding a block element with a class. Imagine you want a “Lead Paragraph” element with a larger font-size:

p.lead_paragraph { font-size: 22px; }

Now in the rich text editor in the format dropdown you’ll get a “Lead Paragraph” option.

You can also specify classes for inline elments or images. Here’s the typical option for floating images left or right:

img.align_left { float: left; }
img.align_right { float: right; }

These rules will not show up in the style dropdown when normal text is selected, but if you insert an image and select it, you’ll now get both the “Align Left” and “Align Right” options in the dropdown.

Remember, it’s up to you to then include the richtext.css in the actual page or make sure the classes and elements look the way they ought to. Webpop never includes any CSS or JavaScript in your website unless you explicitly tell it to.