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

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

Posted on April 11, 2012 0 Comments

The content you're reading is getting on in years
This post is on the older side and its content may be out of date.
Be sure to visit our blogs homepage for our latest news, updates and information.

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!

progress-logo

The Progress Team

View all posts from The Progress Team on the Progress blog. Connect with us about all things application development and deployment, data integration and digital business.

Comments

Comments are disabled in preview mode.
Topics

Sitefinity Training and Certification Now Available.

Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.

Learn More
Latest Stories
in Your Inbox

Subscribe to get all the news, info and tutorials you need to build better business apps and sites

Loading animation