Adding Your Own SharePoint Ribbon Font Styles

Whether it’s a rich HTML field or content editor web part, editing text within the content area provides some font formatting options in the ribbon like these…

Font Selection

fonts

Page Elements and Text Styles

markupstyles

Here is a great article on how SharePoint uses the Theme Fonts, Page Elements and Text Styles throughout its interface and when creating themes…

http://www.mssharepointtips.com/tip.asp?id=1138&page=1

But what if you wanted to add your own fonts or page elements or update the existing styles for the ones already there? Here’s a little guide to show you the syntax of these items. Just simply add the css to your stylesheets like below.

Theme Fonts

.ms-rteThemeFontFace-1{
    -ms-name:"Body";
    font-family:"Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif;
    font-size:30px;
}

You can see that it adds a span with the class specified above which allows you to style it anyway you need.
theme-font2

Fonts

.ms-rteFontFace-13{
    -ms-name:"New Font";
    font-family:"Times New Roman", Times, serif;
    font-size:30px;
}

This adds a new font to the list for selection…
font-select-1
and updates the HTML with a span with the class specified above.
font-select-2

Page Elements

div.ms-rteElement-test2 {
    -ms-name:"Markup Style DIV";
    background:#000;
    color:#fff;
    font-size:24px;
}

This adds a new Page Element for selection…
page-element-1
and these are unique in that you can specify the HTML tag that surrounds the text. The ‘div’ in the css selector above tells SharePoint to add a DIV around the text with the given class.
page-element-2

Text Styles

.ms-rteStyle-Normal{
    -ms-name:"Normal";
    font-weight:bold;
}

You can see that it adds a span with the class specified above which allows you to style it anyway you need.
text-style

 

Technically with any of the out of the box font styles and page elements you can just use the selectors and style them the way you need without having to use the -ms-name: attribute to specify the name of the styles, but I wanted to show the syntax of these styles entirely.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

eighteen + 15 =