SharePoint 2010 allows for incredible site branding of content. This has always been a challenge in MOSS 07.
SharePoint 2010 as a seamless process of including specific style rules through a combination of the out-of-the-box "WYSIWYG" functionality and Custom StyleSheets.
Custom Style Sheet
I created a custom StyleSheet that is referenced in a master page template. This step is not necessary since you can simply include the stylehseet through the Alternate CSS URL when you select/configure the master page under Look and Feel section (Site Settings>Master Page).
SharePoint parses the StyleSheets and includes specific "ms-rte" class rules. The rules are devided by Functionality; Style, Element, Image, Position, Table. Depending on the rule name used after the "rte".
- ms-rteStyle
- Specifies a Style Rule
- ms-rteElement
- Specifies an Element Rule
- ms-rteImage
- Specifies an Image Rule
- ms-rtePosition
- Specifies a Position Rule
- ms-rteTable
- Specifies a Table Rule
In order for the style names to be available in the desired drop down selector you have to specify the "-ms-name" property in the class:
.ms-rteStyle-FooBar{
-ms-name: "Foo Bar";
}
This will include "Foo Bar" as a label in the Style Selector.
Element Rules
- [element].ms-rteElement-[name]
- Will specify styles for the Element Source Selector
Element rules are very concrete element specific rules.
This gives you complete control of what type of element you want rendered and what class name it should inherit.
If I wanted the Shadowed Box to render as a "DIV", I would simply specify the element (DIV) tag in the stylesheet along with the ms-rteElement rule:
DIV.ms-rteElement-ShadedBox{
-ms-name:"Shaded Box";
border: 1px solid #d7d7d7;padding: 5px 10px;background: #eee;}
This rule is then available in the Markup Styles selection.
And will render the following:
<div class='ms-rteElement-ShadedBox'>Shaded Box</div>
Style Rules
- .ms-rteStyle-[name]
- Will classifiy rules for the Markup Styles Selector
Style rules are simply appending class names to any element that you choose in the "WYSIWYG" Editor.
For example, if you want a selected elment to inerhit a style that creates a shaded box around content:
.ms-rteStyle-ShadedBox{-ms-name: "Shaded Box";border: 1px solid #d7d7d7;background: #eee;padding: 5px 10px;display: block;}
After a quick browser refresh, this rule was available in the Style Selector. I am very excited about this. I know that this was available in MOSS 07, but it took some work
around to get it to work, so we never deployed it.
SharePoint 2010 implements this behavior exactly the way it should be.
Position Rules
- .ms-rtePosition-[name]
- Will classify rules for the Postion Selector (designed for images)
Image Rules
- .ms-rteImage-[name]
- Will classify rules specifically for the Image Selector
For Example, say we wanted an image with a dark orange border and a lighter orange background:
.ms-rteImage-OrangeBackground{
-ms-name: "Orange Background";background-color: #f93;border: 1px solid #c63;padding: 6px;}
Will Give you the following option:
Table Rules
Note that the name is very important in this context. You want to specify the same name for every cascading rule of the table.
For example if you start with:
.ms-rteTable-Foo.
Every cascasding class has to have the name
Foo:
/*Table Rule */
.ms-rteTable-Foo{}
/* Header Row */
.ms-rteTable-Foo tr.ms-rteTableHeaderRow-Foo{}
/*First Header Col*/
.ms-rteTable-Foo td.ms-rteTableHeaderFirstCol-Foo{}
/*Last Header Col*/
.ms-rteTable-Foo td.ms-rteTableHeaderLastCol-Foo{}
/*Odd Header Col*/
.ms-rteTable-Foo td.ms-rteTableHeaderOddCol-Foo{}
/*Even Header Col*/
.ms-rteTable-Foo td.ms-rteTableHeaderEvenCol-Foo{}
/*Odd Row*/
.ms-rteTable-Foo tr.ms-rteTableOddRow-Foo{}
/*Even Row*/
.ms-rteTable-Foo tr.ms-rteTableEvenRow-Foo{}
/*First row Col*/
.ms-rteTable-Foo td.ms-rteTableFirstCol-Foo{}
/*Last row Col*/
.ms-rteTable-Foo td.ms-rteTableLastCol-Foo{}
/*Odd row Col */
.ms-rteTable-Foo td.ms-rteTableOddCol-Foo{}
/*Even Table Col*/
.ms-rteTable-Foo td.ms-rteTableEvenCol-Foo{}
/*Footer Row*/
.ms-rteTable-Foo tr.ms-rteTableFooterRow-Foo{}
/*First Footer Col*/
.ms-rteTable-Foo td.ms-rteTableFooterFirstCol-Foo{}
/*Last Footer Col*/
.ms-rteTable-Foo td.ms-rteTableFooterLastCol-Foo{}
/*Odd Footer Col*/
.ms-rteTable-Foo td.ms-rteTableFooterOddCol-Foo{}
/*Even Footer Col*/
.ms-rteTable-Foo td.ms-rteTableFooterEvenCol-Foo{}
- .ms-rteTable-[name]
- Will classify rules specifially for the Table Selector
- tr.ms-rteTableHeaderRow-[name]
- Is a cascading rule for the Header Row of the parent class.
- td.ms-rteTableHeaderFirstCol-[name]
- Is a cascading rule for the first header table cell
- td.ms-rteTableHeaderLastCol-[name]
- Is a cascading rule for the last header table cell
- td.ms-rteTableHeaderOddCol-[name]
- Is a cascading rule for every Odd header table cell
- td.ms-rteTableHeaderEvenCol-[name]
- Is a cascading rule for every Even header table cell
- tr.ms-rteTableEvenRow-[name]
- Is a cascading rule for every even table row
- tr.ms-rteTableOddRow-[name]
- Is a cascading rule for every odd table row
- td.ms-rteTableFirstCol-[name]
- Is a cascaing rule for the first table column
- td.ms-rteTableEvenCol-[name]
- Is a cascading rule for every even table column
- td.ms-rteTableOddCol-[name]
- Is a cascading rule for every odd table column
- td.ms-rteTableLastCol-[name]
- Is a cascading rule for the last table column
- tr.ms-rteTableFooterRow-[name]
- Is a cascading rule for the footer row
- td.ms-rteTableFooterFirstCol-[name]
- Is a cascading rule for the first footer column
- td.ms-rteTableFooterEvenCol-[name]
- Is a cascading rule for every even footer column
- td.ms-rteTableFooterOddCol-[name]
- Is a cascading rule for every odd footer column
- td.ms-rteTableFooterLastCol-[name]
- Is a cascading rule for the last footer column
