Issue with custom styles in the SharePoint 2010 Rich Text Editor and @media
I recenty ran into some issues with exposing custom styles in the SharePoint 2010 Rich Text Editor (RTE) in browsers other than IE, or specifically with Firefox and Safari.
In order to have a custom style show up in either the Markup Styles and Styles drop downs in the Ribbon, you need to prefix your HTML class with either ms-rteElement- (shows up in Markup Styles) or ms-rteStyle- (shows up in Styles). You also need to use the -ms-name property within your rule.
For example:
H2.ms-rteElement-H2Lg {
-ms-name: "Large Heading 2";
font-size: 26px;
}
The problem I ran into was that the custom styles showed up the dropdowns for IE but not in any other browser. At first I though it was because the -ms-name property is a custom CSS extension in the MS name space. I tried adding properties like -moz-name and -webkit-name and even name but they had no effect.
Turns out the RTE custom styles don’t show up if they appear inside an @media block in your CSS file!
I ended up creating a bunch of stubs with just name -ms-name property BEFORE the @media block. If you try to place the stubs after the @media block, the RTE does not pick-up the label for the custom styles, they show up as empty options without labels in the RTE drop downs.
/* create stubs with -ms-name property here */
h2.ms-rteElement-H2Lg {
-ms-name: "Large Heading 2";
}
ul.ms-rteStyle-LinksList {
-ms-name:"Links List";
}
/* place actual properties inside @media block */
@media screen {
h2.ms-rteElement-H2Lg {
font-size: 26px;
}
ul.ms-rteStyle-LinksList {
list-style: none;
margin: 0;
padding: 0;
}
}
You can read more about how to create custom styles for the SharePoint 2010 RTE here: