Protiviti / SharePoint Blog

SharePoint Blog

April 15
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.PNG

 

Page Elements and Text Styles


markupstyles.PNG

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. 

font2.PNG


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... 

fontselect1.PNG

and updates the HTML with a span with the class specified above. 

fontselect2.PNG

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... 

pageelement1.PNG

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. 

pageelement2.PNG
 

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.

textstyle.PNG

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.

- Sonny

If you're interested in learning more about SharePoint Design, check out our Design and UX blog archive!

If you'd like to explore SharePoint Design training options, feel free to browse our Training Events Calendar​

Quick Launch


© Protiviti 2020. All rights reserved.   |   Privacy Policy