Custom Rich Text Editor Styles in SharePoint 2010


A common request to have in SharePoint 2010, especially externally facing installations, is to have custom Styles available in the menu.

Thankfully, SharePoint 2010 makes this extremely easy. The key is the prefix attached to your styles. SharePoint will interpret any style beginning with ms-rteElement-[custom name] as a markup style and it will interpret anything starting with ms-rteStyle-[custom name] as a Style. However, you are able to change this prefix, but we’ll start out by creating some new styles using the default ‘ms-rte’

First, the differences between the two:

Markup Styles (ms-rteElement):

  • Will wrap the currently selected area in the specified tag (See below)
  • Applied style to newly created tag

Styles (ms-rteStyle):

  • Applies your custom class to the currently selected element
  • Will not add additional markup

Getting Started

Now that we’ve discussed the differences between them, lets talk about how to implement them. To start, make sure you have a stylesheet already linked on your SharePoint master page. Once that’s ready, follow the steps below.

-ms-name is crucial when working with custom styles & markup styles. It sets the name that will be displayed in the menu.

-ms-name SharePoint 2010 Headings

**To avoid confusion make sure you select unique names for all -ms-name attributes.

Markup Styles (ms-rteElement):

To implement markup styles, you first need to create a custom style. We’ll create a custom heading for this example:

H1.ms-rteElement-CustomHeading {
-ms-name: "Custom Heading"; 
}

The H1 in our style specifies the tag that will be created when this markup style is created.

The .ms-rteElement-CustomHeading specifies the style that will be applied to the element that is created.

This will generate the following markup when applied to ‘Test’:

<h1 class='ms-rteElement-CustomHeading'>Test</h1>

After we’ve selected the element, class name, and the name of our new style, we’ll need to actually add some styles. To do this, lets add the following markup:

.ms-rteElement-CustomHeading {
color: #003366;
font-weight: bold;
font-size: 21px;
font-family: Corbel;
}

Now we’ve successfully created our Mark Up Style. That’s all there is to it.

Styles (ms-rteStyle):

Styles are almost the same as Markup Styles but they apply the style you create to whatever is currently selected instead of creating a new tag and wrapping it around it.

Just create a new style starting with .ms-rteStyle, as you see below.

.ms-rteStyle-CustomStyle {
-ms-name: "Custom Style";
color: red;
font-weight: bold;
}

That’s all there is to creating a custom style, once you’ve created it and named it you’re all set.

Hover Styles

Now, SharePoint 2010 gets a little confused you apply hover styles. if you try a standard .ms-rteElement-CustomHeading:hover, SharePoint will think you want to add a new style and throw a blank style entry in the list, like the one below.

ms-rteElement ms-rteStyle Blank Entry

To prevent SharePoint 2010 from we need to access our CSS class another way. Instead of directly using .classname we’ll need to use the brackets to select the class like this:

[class='ms-rteElement-CustomHeading']:hover {
color: blue;
}

This will allow us to apply the hover style to our class and avoid having a blank entry added to our list of Markup Styles and Standard Styles within SharePoint 2010.

As always, if you find any mistakes or have questions or suggestions, let me know!

Advertisements
    • Maja Remic
    • October 3rd, 2012

    [class=’.ms-rteElement-CustomHeading’]:hover is incorrect selector. It should be used without the dot, e.g. [class=’ms-rteElement-CustomHeading’]:hover

    • Good find! Sorry about that, I’ve fixed it.

  1. No trackbacks yet.

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 )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: