Add Css Classes to Sitecore Rich Text Editor

August 13, 2011
Tags: Sitecore, Wysiwyg

There are lots of ways to add css classes to sites and I've covered how to setup stylesheets for multi-site installations, but if you're only building a single site on Sitecore and you're looking to quickly populate the class drop down, or any of the other rich text editor settings for that matter, then this is for you.

The settings for the rich text editor are stored in the Telerik Tools File. The file is located under /website/sitecore/shell/controls/Rich Text Editor/ToolFile.xml.

file location

There are all the settings for the drop down fields stored here. I'm not going to go through them all but I'll quickly run through adding the css classes. You'll want to jump to the <classes></classes> section and add a <class> tag. Then add name and value attributes for the display name and css class name respectively as shown below.

tools file

Hit save and clear your browser cache and jump into a rich text editor and check what you've got in the classes drop down list.

wysiwyg class drop down

Boom.