Mark Stiles

Project Lifecycle

Blog Feed Sitecore Articles Feed

Recent Posts

Linq to Sitecore... Browser Language Detecti... Sitecore Data Importer U... Sitecore Caching Manager... Adding Fields To The Lin...

Recent Comments

I couldn't get it to wor... Hey Vikram, that functio... Sure thing Scott. I had ... Hey Mark - thanks for th... Hi, I just downloaded th...

Archives

April 2013 March 2013 February 2013 January 2013 October 2012 June 2012 February 2012 December 2011 August 2011 July 2011 June 2011 May 2011 April 2011 March 2011 February 2011

Tags

Caching C# .NET Linq Lucene Sitecore Sitecore Fields SQL Sublayouts Localization Datasource Sitecore Modules Interfaces Sitecore Rules Yellow Screen Of Death Sitecore Symposium Brightcove Templates HTML YouTube Security Extranet Web Controls Wysiwyg Shared Source SDN User Manager SVN Website JQuery Editor Tabs Sheer UI Compiling Continuous Integration Web Application XPath Extensions Layouts Sitecore Express Javascript

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.

 

Comments

Lieven Praet
August 16, 2011
You can also create a separate css file and reference it using the setting "WebStylesheet". This will automatically recognize the classes in the file and populate the dropdown.
mark stiles
August 17, 2011
Good point. The setting he is referring to is in the web.config and by default looks like <setting name="WebStylesheet" value="/default.css" />. There is also the <setting name="WebEdit.ContentEditorStylesheet" value="/webedit.css" /> setting which is included in the rich text editor field while in web edit mode. I prefer to use these stylesheets to style the content and use the tools file to populate the drop down.
Mortaza
November 22, 2011
<setting name="WebStylesheet" value="/Project/frontend/css/Editor.css" /> I have the setting above but the dropdown does not show anything and there are classes in the css, any idea why? thanx
Ty
March 27, 2012
Doesn't seem to work with 6.4. All I get is the Clear Class option in the select box. No other classes entered in ToolsFile.xml appear in the list.
Rick Cabral
April 18, 2012
Doesn't work in 6.5 either.
Agda
May 15, 2012
I can see my class in the RTE dropdown, and if I apply that class to an image it will be there when I view the page, however the actual style isn't picked up.
Mark Stiles
May 16, 2012
The RTE css file is only loaded into the rich text field editors. To get this to display on your frontend, you have one of two options. You can include this css file in the html of your page or you can duplicate it into another css file that you're already using for your frontend. Mostly I've left them separate and duplicated the content because I don't always include all the css definitions in the RTE css file. Certain things like background color can be overkill for the RTE.
Ollie
June 21, 2012
Managed to get it working in 6.5 Add the class to default.css or whichever file is referenced and ToolsFile.xml then restart IIS and clear browser cache.
Hakeem Missa
July 12, 2012
Does this work in sitecore 6.3 ?
Dave B
August 16, 2012
This article was very helpful. However the post contains an error which will cause the CSS classes not to show up in the css styles dropdown. In order for the XML file to be valid in ToolsFile.xml, do not use an opening and closing class tag, but rather use a single self-closing class tag like so: <class name="GreenText" value=".GreenText" /> This worked for me running Sitecore 6.4.
Mark Stiles
August 16, 2012
Thanks for the update. I've fixed the image to match your point.