Custom Styles for SharePoint 2010 Rich Html Field
A typical requirement from a client is to be able to incorporate their own custom styles for the Rich Html Field. Allowing their public relations department to apply nice text formating for paragraphs with some Comic Sans Hotness might not be the best practice in here, so let’s be careful out there. The best scenario is only to allow custom formatting for headings, paragraphs and maybe a few different table styles but let’s go!
First, open up the page layout containing the HTML editor and add PrefixStyleSheet property for the RichHtmlField:
id="Content"
FieldName="PublishingPageContent"
PrefixStyleSheet="my-rte"
runat="server"
/>
Now, the default value for the property is ms-rte. We are going to redefine this to my-rte. Do not use any uppercase characters in the property value as apparently those wont work. Deploy the page and open it in edit mode to see the desired effect. The styles collections are now empty in the Ribbon.
We now have to define our own styles prefixed with the string my-rte. I’d suggest that you put these style declarations in a separate stylesheet to avoid javascript errors caused by complicated and hard-to-parse stylesheets. Let’s name our new stylesheet rte.css and add a few declarations there.
The Markup Collection
Let’s say I want to have an option to add a level 1 heading or an H1 tag for the given page via the Markup Styles dropdown list:
Step 1 – introduce the tag:
{
-ms-name:"my level 1 heading";
}
Step 2 – add the styles to the tag:
{
font-size: 150%;
}
Save the rte.css and make a reference for it in your master page, page layout or even use an alernative css. If you want your clients to be able to edit the styles themself, you could upload the rte.css in the Style Library and reference it there.
I have saved the file directly in the 14-hive /_layouts/my/ -folder and use a quick reference in the master page:
ID="CssRegistration1"
runat="server"
Name="/_layouts/my/rte.css"
/>
Deploy and reload the page, fire up the edit mode and navigate to the ribbon where you can see your new style in action.
Your first custom style
Adding new elements is easy once you get to know the logic. Here’s an example of a parapgraph with nice rounded corners and superb font on modern browsers (note that I have combined the introduction and style values in one declaration):
{
-ms-name:"My CSS Rounded Paragraph";
background: #808;
color: #fff;
border: 3px solid #f0f;
text-transform: uppercase;
text-align: center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
box-shadow: 0 0 20px #000;
-moz-box-shadow: 0 0 20px #000;
-webkit-box-shadow: 0 0 20px #000;
padding: 10px;
font: bold 2em Comic Sans MS;
}
Even Grammatical Errors Wont Silence the Comic of Sans
The Styles Collection
The Styles collection can be populated with the same way by changing the Element-suffix into Style ie.:
{
-ms-name:"I am pink";
color: #f0f;
}
This (P)arapgraph is Pink
Other Items
I’d suggest that you check out the default HTML editor styles in /Style Library/en-us/Themable/Core Styles/htmleditorstyles for quick reference how to style the other elements, including table styles on the Ribbon.
Popularity: 14% [?]
Nice post. I learn something more challenging on your different blogs everyday. Thanks for sharing. our site
These codes are very helpful. Thanks by the way!
beardcareshop.com/
The beauty of the African sunset disguised the danger lurking nearby. concrete repair
The irony of the situation wasn’t lost on anyone in the http://www.cupertinopestcontrol.com.
Garlic ice-cream was her favorite click here!
Awesome stuff – don’t forget to visit us!
This is great to learn more about when learning about ccs. Concrete Repair
We test out this font on our Asphalt Repair site to help attract more customers with the known font.
CCS is probably the most black box area of website design for beginners. This helped break it down into a way that was easy to understand. I will definitely be referring back to this page. Thank you!
Jorge
Visit Us
This was super helpful and very easy to follow. Thank you for sharing this with us.
-Burt | Overland Park Auto Glass Replacement
Thanks for the easy explanation of CSS. A bit of the paygrade of myself at my concrete driveway company, but interested nonetheless!
Great look into custom headers. Our humble chimney sweep Melbourne company does not use sharepoint currently, but are working towards being fully operational through Teams
This absolutely perplexes me still!
Fair credit to you for getting through this
Whoa, some good stuff. http://www.pianolessonssanjose.com
Love this, thanks for explaining…. we do roof replacement if anyone is interested!