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.<\/p>\n
In order to have a custom style show up in either the Markup Styles<\/em> and Styles<\/em> drop downs in the Ribbon, you need to prefix your HTML class with either ms-rteElement-<\/strong> (shows up in Markup Styles) or ms-rteStyle-<\/strong> (shows up in Styles). You also need to use the -ms-name<\/strong> property within your rule.<\/p>\n For example:<\/p>\n 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<\/strong> property is a custom CSS extension in the MS name space. I tried adding properties like -moz-name<\/strong> and -webkit-name<\/strong> and even name<\/strong> but they had no effect.<\/p>\n Turns out the RTE custom styles don’t show up if they appear inside an @media<\/strong> block in your CSS file!<\/p>\n I ended up creating a bunch of stubs with just name -ms-name property BEFORE<\/strong> 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.<\/p>\n You can read more about how to create custom styles for the SharePoint 2010 RTE here:<\/p>\n 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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,25,43],"tags":[142,44,144,56,58,49,140,141,42,143,47,46],"class_list":["post-284","post","type-post","status-publish","format-standard","hentry","category-development","category-html-css","category-sharepoint-development","tag-ms-name","tag-44","tag-bug","tag-css","tag-custom","tag-ribbon","tag-rich-text-editor","tag-rte","tag-sharepoint","tag-styles","tag-ue","tag-user-experience"],"_links":{"self":[{"href":"https:\/\/singchan.com\/wordpress\/wp-json\/wp\/v2\/posts\/284","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/singchan.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/singchan.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/singchan.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/singchan.com\/wordpress\/wp-json\/wp\/v2\/comments?post=284"}],"version-history":[{"count":11,"href":"https:\/\/singchan.com\/wordpress\/wp-json\/wp\/v2\/posts\/284\/revisions"}],"predecessor-version":[{"id":295,"href":"https:\/\/singchan.com\/wordpress\/wp-json\/wp\/v2\/posts\/284\/revisions\/295"}],"wp:attachment":[{"href":"https:\/\/singchan.com\/wordpress\/wp-json\/wp\/v2\/media?parent=284"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/singchan.com\/wordpress\/wp-json\/wp\/v2\/categories?post=284"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/singchan.com\/wordpress\/wp-json\/wp\/v2\/tags?post=284"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}H2.ms-rteElement-H2Lg {\r\n -ms-name: "Large Heading 2";\r\n font-size: 26px;\r\n}\r\n<\/pre>\n\/* create stubs with -ms-name property here *\/\r\nh2.ms-rteElement-H2Lg {\r\n -ms-name: "Large Heading 2";\r\n}\r\n\r\nul.ms-rteStyle-LinksList {\r\n -ms-name:"Links List";\r\n}\r\n\r\n\/* place actual properties inside @media block *\/\r\n@media screen {\r\n\r\n h2.ms-rteElement-H2Lg {\r\n font-size: 26px;\r\n }\r\n\r\n ul.ms-rteStyle-LinksList {\r\n list-style: none;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n}<\/pre>\n\n