How to use FormatAreaStyles CSS in SDL Tridion 2011

I learned something new about Tridion this week that I hadn't really used before. This feature is the FormatAreaStyles.css file which controls the styles editors can add to markup in the Rich Text Editor in SDL Tridion. This may not seem like such a big deal but it's a really powerful feature. Consider the following example from a site I am currently working on.

The design requires all images to be masked to add stylised rounded corners, this is achieved through markup similar to the following:

<div class="imagemasksmall">
    <img src="tcm:1-2-16" alt="My Image of Something" />
</div>

This is fine to create in Template Building Blocks (or DD4T Views!) but what about images inserted into Rich Text fields?

One way of achieving this would be to instruct editors to go into the Source tab and edit the markup directly, but this could lead to invalid markup and you would have to give the editors access to the Source tab on Rich Text fields which could lead to the addition of markup that the templates cannot deal with.

A better way is to use the FormatAreaStyles.css file to provide the editor with the tools to add the class "imagemasksmall" to a div without editing markup and then provide instructions on how to create that markup using only the Section type and Style dropdowns in the Rich Text editor's formatting field.

Here's a step by step guide on how to acheive that:

  1. Locate the FormatAreaStyles.css file on your Content Management Server. This will usually be located at C:Program Files (x86)TridionwebWebUIEditorsCMEConfiguration (or %TRIDION_HOME%webWebUIEditorsCMEConfiguration)
  2. Add the style div.imagemasksmall,
    div.imagemasksmall
    {
         border:5px solid green;
    }
    Pro tip: You need to actually add a style to the CSS, otherwise the class will be stripped out as this file is processed by a CSS Handler / minifier which appears to remove any empty rules.
  3. Save the file.
  4. Clear your browser cache.
  5. Open a component that uses a Rich Text field.
  6. Insert an image using the Image tool as normal.
  7. Select the image in the Rich text editor.
  8. In the ribbon toolbar. Choose "Generic Container (div)" from the Section Type drop down.
  9. Choose "imagemasksmall" from the Style dropdown
  10. Good, we now see the green border.
    Image with Format Area Style Applied
  11. Check the source tab to see what the markup looks like
    Source with Format Area Style applied
  12. Save the Component and Publish the Page (or Component).
  13. We should now have the correct mark up in the page on the Content Delivery server too.

Things to be aware of:

  • Remember the FormatAreaStyles.css file lives on the Content Manager server, so you will need to add any styles you want for these classes on the Content Delivery side in your application style sheet.
  • For the same reason, you need to educate your editors that the Rich Text Field will not show exactly the same styles as those that will be visible on the published website.
  • The FormatAreaStyles.css file is cached like crazy, so you might have to: clear your browser cache and/or restart the app pool and/or increment the modification counter in System.config to get your styles to appear.
  • Try to name your styles in a sensible and meaningful manner, and also remember these can't be localised/translated. Follow the naming recommendations that you would use in your normal code.

Thanks for reading, hope this is helpful to you.

[Heading Image used under Creative Commons Attribution licence from geirarne on flickr]

Any questions?

If you need more information or have any questions just get in touch and we'd be happy to answer them for you.