+1-888-365-2779
Try Now
More in this section
Categories
Bloggers
Blogs RSS feed

Forcing authors to use your predefined CSS classes to style their content in Sitefinity 5

by Grigori Karanikolov

Coming from this blog post, I wanted to highlight the way the Sitefinity team made it easier to change the configuration of the WYSIWYG editor that is used in various places throughout the CMS.
You don’t even have to enter the “Advanced” section of the administration of Sitefinity, as I described in the blog post above. Now, you can simply go to Administration->Settings and open the Text Editor section to customize the default toolset, used through all the backend of Sitefinity:
image

You are able to edit the tools that show up in your editor’s toolbox right inside Sitefinity now. And of course, if you want to have separate configurations for the editors inside different modules of Sitefinity, you are absolutely able to achieve that by setting different toolbox configuration files in the options for each module.

  • As explained in the aforementioned blog post, this is extremely useful if you’d like to customize the number of tools content authors will have access to. This way you can enforce consistency for the content all over your website by enforcing authors to use only your CSS styles to format their content and removing tools that allow adding custom inline CSS.
    There are just 3 things you need to do:
    Edit the tool set and remove any tools you wouldn’t want to appear in there;
  • Add the ApplyClass tool, which would provide a dropdown with your own classes. Add it by simply including this: <tool name=”ApplyClass”/> between the <tools></tools> tags in the toolset configuration.
  • Specify which CSS files the ApplyClass should use and map which classes from these files it should be able to apply:

image

Save and you’re done!
Remember to clean your browser cache, so that the all the CSS files are refreshed! Otherwise you’ll end up with an empty ApplyClass dropdown menu.

image

Comments and thoughts are welcome!

7 comments

Leave a comment
  1. Michael Apr 13, 2012
    Thank you, this works. But now my editor is picking up my overall page background image within the editor.  This makes editing very difficult as the body has a very dark blue background and the text is a dark color.  How do you make the editor ignore the body's background?
  2. Grisha 'Greg' Karanikolov Apr 17, 2012
    Michael, have you created a separate CSS file for your RadEditor classes? I would recommend that you put the classes you need to use within RadEditor in a separate CSS file for easier management and to avoid such hurdles.
    Did this help?
  3. Martin Sahuc Jun 19, 2012
    Did someone know how to specify the css tu use in admin's preview pages ?
    Because styles are not applied in that case.
  4. Nancy Rackleff Jun 21, 2012
    This works fine for me up until the point that I add the "classes". If I add the apply class tool and the css file, it works fine, but displays everything in that file. So, I attempt to add the classes in order to narrow it down then it reverts back to nothing but the clear class. Here is my classes declaration:
    <classes>
        <class name="Green Button" value=".btn-grn"/>
        <class name="Blue Button" value=".btn-blu"/>
    </classes>
    Any idea what might be causing this? I don't want to have to duplicate all of the classes I need in a different file. I would like to be able to use the full file and just narrow it down with the class list.
  5. Nancy Rackleff Jun 21, 2012
    This works fine for me up until the point that I add the "classes". If I add the apply class tool and the css file, it works fine, but displays everything in that file. So, I attempt to add the classes in order to narrow it down then it reverts back to nothing but the clear class. Here is my classes declaration:
    <classes>
        <class name="Green Button" value=".btn-grn"/>
        <class name="Blue Button" value=".btn-blu"/>
    </classes>
    Any idea what might be causing this? I don't want to have to duplicate all of the classes I need in a different file. I would like to be able to use the full file and just narrow it down with the class list.
  6. Nancy Rackleff Jun 21, 2012
    Sorry about the double post there. Also, I forgot to mention that I am using Sitefinity 5.
  7. Nancy Rackleff Jun 21, 2012
    I think I've got this figured out....sort of. I read on http://www.telerik.com/help/aspnet-ajax/editor-css-styles.html "Please, note that if you have css classes defined with the following syntax: .Emphasis, p em{color: #A4CE3A; font-style: normal; } then the editor will parse and read only the .Emphasis class and will populate the "Apply Class" dropdown only with this class. If RadEditor starts to parse the strings after the comma, this will drastically decrease the editor performance and it will be loaded slower on the page."
    My blue and green button classes are part of a comma separated list of classes, so that could be part of it. Also, the classes in question appear in multiple declarations, so it may have just not been able to grasp them.
    I think I will end up creating a simplified stylesheet to use in the editor. It will probably be the easiest in the long run. I can simplify it by not including the hover or visited states for links and things like that.

    Leave a comment