Adding custom CSS Class to Sitecore Rich Text Editor

The “Apply CSS Stylesheet” dropdown in the Sitecore RTE is quite a friendly option to Content Authors when it comes to applying complex styles/themes, without editing the HTML.

 ==>

To add a new value to this dropdown is relatively easy:

1. Verify the Configurations/Settings

Verify if the “WebStylesheet” settings is configured properly in your web.config or sitecore.config file:
By default, it would point to “default.css” lying in your root directory path (c:\inetpub\wwwroot\{Sitecore Instance Name}\Website folder)

Or you can browse the showconfig.aspx page to search for “WebStylesheet” settings and value (http://{CMS URL}/sitecore/admin/showconfig.aspx)

IMPORTANT: The default.css could get cached in your browser. So any updates you make to this css file will need to be refreshed on the client browser by any of the following options:

1. Refresh the file in the CDN (if you have one)
2. Point to a custom CSS file in your local site CSS folder
3. Explicit browser cache clearing
4. Using a versioned CSS URL like:
   

If the dropdown changes that you make are not reflecting in the Rich Text Editor, I would suggest you try loading the default.css file on your browser and check if its loading the latest CSS.

2. Add new tag to the RTE ToolsFile.xml file

Navigate to your shell\Controls\Rich Text Editor folder on your CM server:
“C:\inetpub\wwwroot\{Sitecore Instance Name}\Website\sitecore\shell\Controls\Rich Text Editor”

Edit “ToolsFile.xml” file to have additional classes:

NOTE: You can prefix you class names with the element that it should be applied on. It will also accordingly change the icon (observe the Pilcrow icon [¶] next to ‘My Custom Class’ dropdown value in the image below) in the CSS dropdown on the Rich Text Editor:

3. Add new style rule in your “WebStylesheet” CSS file:

Navigate to the “default.css” file or the corresponding file that you have defined in point #1 above and the corresponding CSS rule there with the exact same rule name as the “value” defined for the corresponding node in the ToolsEdit.xml file:

4. Customizing the Display text for various locales

If you have Content Authors from languages other than English working on Rich Text Editor, you can define your language specific CSS Class Names in the corresponding Resource files picked up by the Sitecore Rich Text Editor.

To do this, navigate to the corresponding locale specific Resource file located at “C:\inetpub\wwwroot\{Sitecore Instance Name}\Website\sitecore\shell\Controls\Rich Text Editor\Localization\RadEditor.Main.{Language Code}.resx”
ex. RadEditor.Main.resx for English Language, RadEditor.Main.resx.de.resx for German version and so on.

Outcome:

Here is the outcome of the custom style class appearing in the RTE dropdown:

 

Hope this was helpful!
Happy Coding!