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: 22% [?]
You guys are killing me with the comic sans!!
But great blog post! kudos!
Comic Sans – That’s the only font I’ll use from now on. You guys rock!
Once I realised that this is great for “Everything but IE” I had a quick hunt around and found this – http://css3pie.com/ – works alongside the -WebKit and -moz functionality and kicks the goals I want. Useful for people developing solutions for clients with an IE install-base.
Cheers!
Great article~! But how can we open up the page layout containing the HTML editor at the first place?
This is great, I got this working as described for the Rich Html Field in a page layout, but how do we show the custom styles for the Content Editor (Rich Text) web part when inserted by the author?
Custom HTML Tags in SharePoint
To add custom HTML tags such as meta description, keywords, and titles, you will want to edit the page in SharePoint Designer. We first need to start be verifying the existing page and template are in good form and readable by SharePoint. Skipping this step can lead to erroneous error.
1) Open SharePoint Designer
2) Edit in Advanced Mode
3) Goto Design View — This will test the pages and all problems denoted need corrected.
4) Go to code view and add the custom Title in “asp:Content “ named “PlaceHolderPageTitle”. This should be the TITLE Content /TITLE, omit the title tags.
5) META Description goes in the “asp:Content” named “PlaceHolderAdditionalPageHead”. This will be the actual HTML code.
When I followed the directions provided by others, I had a small problem in the ASP which provided an accurate error by following steps 1-3.
Shawn Zernik
Internetwork Consulting
To add custom HTML tags such as meta description, keywords, and titles, you will want to edit the page in SharePoint Designer. We first need to start be verifying the existing page and template are in good form and readable by SharePoint. Skipping this step can lead to erroneous error.
1) Open SharePoint Designer
2) Edit in Advanced Mode
3) Goto Design View — This will test the pages and all problems denoted need corrected.
4) Go to code view and add the custom Title in “asp:Content “ named “PlaceHolderPageTitle”. This should be the Content, omit the title tags.
5) META Description goes in the “asp:Content” named “PlaceHolderAdditionalPageHead”. This will be the actual HTML code.
When I followed the directions provided by others, I had a small problem in the ASP which provided an accurate error by following steps 1-3.
Thank you for this post!
How about the Position dropdown (Fin: “Sijainti”) for an image: which styles belong under that? I made a test and I got the button blank now. Image *Styles* I got back by finding and adding appropriate styles from the original htmleditstyle file. But I thought the original ms-rte-Position-1, -2, and so on would be about the Position button. I renamed them according my new file, but the button stays empty.
This was solved by me, and it was about naming and alternative css…
I’ve looked up the table styles in the above mentioned css file. And have tried to define my own set og styles. Which works like a charm. But for some reason, I cannot get the table styles to show in the table style menu. My prefix is added and the styles I have added are there, but I cannot select among them in the menu. Any ideas?
Thank you, thank you, thankyou. Have been trying to get my custom styles in the drop down for weeks and this is the only article that mentions that the css style needs to have “Style” appended to the custom style prefix in order for it to appear in the list.
Something so simple, yet Microsoft make it so frustrating…grrrr.
Yeah its a lil’ off topic lol you spotted a couple of typos about halfway thr
Anyone know how to let the content author remove a style/markup.
I can get the styles/markup into the dropdowns, but i can’t remove the inserted class, without going into the html-Edit html source dialog.
Never mind, finally figured out that selecting my custom style with the Select Command and then using Clear Format will remove my style. Apparently i never got the style selected properly
I am developing website with a customized masterpage.
Anyone knows how I can set PrefixStyleSheet property for RichHtmlField
As I did not use a pagelayout for the site.
Thanks
I need to change default font size for the wiki pages of the site I am community manager in my (large) company. Verdana 8pts is definitly unreadable ! Does this post permit to do it for my site only or will other sites be impacted as well ? My IT department told me that it is impossible to change default font for my site without changing it for others. What do you think ?
Thierry, you could change the font by using an alternative css for that site(with publishing features enabled) or just add a few wiki-page specific common css rules for your default css. Use your browser of choice and fire up developer tools to look for common elements only visible on the wiki pages and override their default styles on your own custom stylesheet.
With enterprise wiki it usually goes like:
.col-fluid-1 p { font-size: 1.1em !important; } or .edit-mode-border { … }
..or you could use the adjacent sibling selector:
This piece of writing is really a good one it assists
new the web viewers, who are wishing in favor of blogging.
This article will help the internet visitors for
creating new website or even a blog from start to end.
Needed to send you this tiny observation so as to say thank you as before just for the precious concepts you’ve contributed on this website. This is so shockingly generous of you giving unreservedly exactly what numerous people would’ve offered for sale as an e-book to help make some profit for their own end, and in particular now that you could possibly have tried it in the event you desired. The strategies in addition served to become a great way to be sure that most people have the same interest really like my personal own to learn significantly more on the subject of this issue. I’m certain there are lots of more pleasant opportunities ahead for folks who view your website.
I have this working for my customer but now he wants one of the styles to be the last in the drop-down.
In the special CSS file, I have it as the last entry but SharePoint Does not care.
Anyone know how to force an order?
Thank you so much a bunch with regard to giving that with all of persons you truly determine what you happen to be discussing! Bookmarked. I implore you to moreover seek advice from this site Is equal to). Organic meat have a link transform set up involving us all