Customizing Markup and Table Styles in Sharepoint 2010 (RichHTMLField)

Do you have content producers that you either a) want to save the hassle of editing for or b) don’t trust to stick to your brand/theme you’ve worked so hard on? Here’s your answer! Following these instructions, you’ll be able to lock down various areas of the Rich HTML field in Sharepoint 2010. Now you have a lot of options, but we’re going to start out by just applying custom markup styles, then we can move to custom table styles and more customizing of the ribbon.

Click to skip ahead
Step 1: Modify Page Layout
Step 2: Open/Register a CSS file
Step 3: Markup Styles
Step 4: Table Styles

Step 1: Modify Page Layout

Open up your Page Layout in Sharepoint Designer. Find the “<PublishingWebControls:RichHtmlField……” control. This is where most of the control is put. And it’s relatively easy. Add the following things, and then I’ll describe them in a bit more detail.

1. AllowFontsMenu=”False” (This disables the font menu that allows people to change the font…important if you have corporate/system-wide fonts you prefer to use)
2. AllowFontSizesmenu=”False” (This disables the font size menu, so users cannot change the size of the font)
3. AllowColorsMenu=”False” (This disables the color menu, so users cannot change the color of anything)
4. PrefixStyleSheet=”mystyle-” (The most important control to add. Note: You cannot use capital letters here…no idea why)

Now, if you go into the browser and check out the page layout, you should see no more markup styles and no more table styles (you don’t need to do this step, just check it out so you can see the difference later).

Step 2: Open/Register a CSS file

I prefer to register an additional stylesheet in my master page called “text.css” so I can keep things a little cleaner.

Step 3: Markup Styles

Create a new CSS style for the class “mystyle-element-H1″. This adds the h1 tag to the text you’ve selected and since it has the “mystyle-” prefix that you set in your page layout, it will use your styles. Name your style so that it will show up in the “Markup Styles” drop-down in the browser using the “-ms-name:” tag. After that, just apply whatever style you desire.

.mystyle-Element-H1 {
  -ms-name:"Level 1 Heading"; /* This sets the title of your markup style */
  font-weight:bold;
  font-size:2em;
  color:#333;
}

You can also apply styling to a default paragraph tag:

p.mystyle-Element-p {
  color:#000;
  font-size:12px;
}

As you can tell, you can do this for all of the h1, h2, etc. elements, as well as the p element, and as you’ll see next, the table element.

Step 4: Table Styles

Create a new Table Style:

table.mystyle-Table-borders {-ms-name:"Thin Borders with alternating stripes";} /* sets the name of the table style */
table.mystyle-Table-borders td {padding:5px;vertical-align:top;} /* sets padding and vertical align for all td cells in the table....you might have to do this for the th cells as well */

/* set the background color of alternating rows */
table.mystyle-Table-borders tr.mystyle-TableEvenRow-alternating td{background:#ccc;}
table.mystyle-Table-borders tr.mystyle-TableOddRow-alternating td{background:#efefef;}

Play with those styles and see what you come up with. Here’s a full list of tables styles (taken from Microsoft’s site where you can also find the other items you can declare in the RichHTMLField):

.ms-rteTable-1
.ms-rteTableHeaderRow-1
.ms-rteTableHeaderFirstCol-1
.ms-rteTableHeaderLastCol-1
.ms-rteTableHeaderOddCol-1
.ms-rteTableHeaderEvenCol-1
.ms-rteTableOddRow-1
.ms-rteTableEvenRow-1
.ms-rteTableFirstCol-1
.ms-rteTableLastCol-1 
.ms-rteTableOddCol-1
.ms-rteTableEvenCol-1
.ms-rteTableFooterRow-1 
.ms-rteTableFooterFirstCol-1 
.ms-rteTableFooterLastCol-1 
.ms-rteTableFooterOddCol-1 
.ms-rteTableFooterEvenCol-1