Add New SharePoint Rich Content Editor Styles

Standard

All of us as a developers face a problem of misuse of the rich content editor that makes SharePoint site content looks very bad.

We always blame SharePoint power users (Content Editors) because we think that they must add a new content in a right way that make their content fits well with the whole site look and feel. On the other hand power users is not a web developer they don’t know about HTML and how to use it.

To eliminate this gab between developers and power users, it is good idea to provide them with a predefined custom styles to be used in editing content. To do this follow the following steps:

  1. Add a new CSS file or use any one referenced by that site
  2. Add new CSS class with the same conventions of the SharePoint Content Editor
  3. Save your file and open the SharePoint Content Editor to make sure your new style is their

 

CSS Classes Conventions for SharePoint Content Editor

SharePoint Content Editor styles list are defined by using the convention .ms-rte<Element> and inside these classes you can find other non-CSS standard related properties used to define additional information for the content editor like style name.

You can find all the default class at the /_layouts/{lang-lcid}/styles/Themable/corev4.css 
(ex. /_layouts/1033/styles/Themable/corev4.css for English language styles) in SharePoint 2010

Here are some (How to do)s to simplify your customization  

How to Convention Example
Define new font style .ms-rteFontFace-<UniqueName>
{
-ms-name:”<Display Name>”;
font-family:<Required Font Family>;
}
.ms-rteFontFace-MyHeaderFont
{
-ms-name:”My Custom Font”;
font-family:”Arial”;
}
 Define new font size .ms-rteFontSize-<UniqueName>
{
font-size:<Font size>;
}
.ms-rteFontSize-MyNewFontSize
{
font-size:18px;
}

Here are some results:

newstyle1newstyle2

 

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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