Adding custom styles to the "Apply CSS Class" dropdown in the Sitecore Rich Text Editor

Defining the classes You will need to edit the ToolsFile.xml located in \sitecore\shell\Controls\Rich Text Editor\ToolsFile.xml to provide a description and the class to apply. by default the class file will have an emply <classes></classes> node and you can update it as follows: <classes>     <class name="Large Text" value=".txt-lrg" />     <class name="Medium Text" value=".txt-med" />     <class name="Small Text" value=".txt-sml" /> </classes> This xml file is a list of all classes that are available in the RTE editor. Now we can use them in stylesheets for our editor profiles. Creating the stylesheets When you're creating the stylesheet files it's best to do so in a predictable manner - this means you can have one override for the editors. For multisite solutions (which you should always be coding for) you should location your stylesheets in a folder with the site name, if you are then creating different stylesheets for different editor profile you can name the stylesheet with the GUID of the editor profile. Your stylesheet should only contain class definitions for items you want to be selectable. In this example I want to allow editors to use txt-sml and txt-med only .txt-sml {     font-size: 80%; } .txt-med {      } Adding rules to the class definitions will style them in the editor (and drop down), but you will need to remember to keep these in sync with the actual CSS (or sass or less) files. I tend to use blank definitions for this reason. Defining stylesheets The next thing to do is to create the custom editor configuration to override the loading of the stylesheets into the editor. public class CustomEditorConfiguration : EditorConfiguration     {         public CustomEditorConfiguration(Item profile) : base(profile)         {         }         protected override void SetupStylesheets()         {             var site = Sc.Context.Item.Axes.SelectSingleItem("./ancestor-or-self::*[@@templateid='{00000000-0000-0000-0000-000000000000}']");             this.Editor.CssFiles.Add(string.Format("{0}/css/{1}.css", site.Name, Profile.ID.Guid));         }     } You can then configure your editor profiles to use this class. Switch to the core database and navigate to your editor profiles (/sitecore/system/Settings/Html Editor Profiles). You then need to create a Html Editor Configuration Type node (template: /sitecore/templates/System/Html Editor Profiles/Html Editor Configuration Type) and specify the class you just created in the type field. And that's it! The css and xml files we edited in the first steps are generally cached by the browser. I normally navigate to the file and shift-refresh them. One this I noticed is that the caching is case sensitive so check your path is using the same case as the path you specified in your Editor Configuration.