Custom CSS for RTF field for a Multisite Sitecore solution

Sitecore uses the telerik rich text field for allowing rich text on the items. While this allows the content author to enter any styled html they please, we might also want to provide them with a finite list of pre-existing styles which adhere to the current site design.
These can be managed in a CSS file and the CSS file can be referenced by overriding the WebStyleSheet setting in sitecore configuration:

      <setting name="WebStylesheet">
        <patch:attribute name="value">/_CSS/WYSIWYGStyle.css</patch:attribute>

The styles will then appear in the rich text editor for any rich text field:



In this case, the css class names in the css file, are TEXT–STYLE-1, link–style-1 etc. If we want more user friendly names, say with spaces etc, we need to override them in the sitecore/shell/Controls/Rich Text Editor/ToolsFile.xml file that telerik uses:


      <class name="Fancy Style Name" value=".TEXT--STYLE-1" />

Now, all this works perfectly well in a single site environment. If you want to have a different set of styles available to the content authors for each site in a multisite instance of sitecore, you’ll have to get a bit more creative 🙂

Here’s how we went about it.
We created a separate CSS file for each site.
Each site in our sitecore instance had a parent site node item. We added a field to enter the site specific css file path on the node.


On the site nodes, we would set paths relative to the website folder, eg: /_CSS/Site1/rtfstyles.css

Now for the fun part, in the code:

using Sitecore.Data.Items;
using Sitecore.Web;
using SharedSource.Helpers;

namespace MySite.Customizations.Customized_Sitecore
    public class RichTextEditorConfiguration : Sitecore.Shell.Controls.RichTextEditor.EditorConfiguration
        public RichTextEditorConfiguration(Item profile)
            : base(profile)
        { }

        protected override void SetupStylesheets()
            string id = WebUtil.GetQueryString("id");
            Item currentItem = SitecoreHelper.GetItemFromGUIDInMaster(id);
            Item siteNode = SitecoreHelper.GetAncestorOrSelfByTemplateId(currentItem, ISite_NodeConstants.TemplateIdString);

            if (siteNode != null && siteNode.Fields[ISite_NodeConstants.Rich_Text_Field_StylesheetFieldName] != null)


            public static Item GetItemFromGUIDInMaster(string guid)
                Item item = null;
                if (!string.IsNullOrEmpty(guid))
                    ID ItemID = ID.Parse(guid);
                    Database masterDB = Factory.GetDatabase("master");
                    item = masterDB.GetItem(ItemID);
                return item;

            public static Item GetAncestorOrSelfByTemplateId(Item item, string templateId)
                if (item == null || string.IsNullOrEmpty(templateId))
                    return null;

                ID parsedTemplateId;
                return ID.TryParse(templateId, out parsedTemplateId)
                           ? GetAncestorOrSelfByTemplateId(item, parsedTemplateId)
                           : null;

We use glassmapper here, so ISite_NodeConstants.Rich_Text_Field_StylesheetFieldName contains “Rich Text Field Stylesheet”.

We then patch into the HtmlEditor.DefaultConfigurationType setting:

      <setting name="HtmlEditor.DefaultConfigurationType">
        <patch:attribute name="value">MySite.Customizations.Customized_Sitecore.RichTextEditorConfiguration,MySite</patch:attribute>

Note: This code is triggered when you click on the ‘Show Editor’ button above.

One thought on “Custom CSS for RTF field for a Multisite Sitecore solution

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s