Add Styles to Format Text Tab On the Ribbon

Target:

Editor Style (add styles to Format Text tab on the ribbon)

Details:

SharePoint 2013 enables you to add specific styles to your custom CSS that can be accessed through the ribbon and used by content authors on your site. You can add styles to the following areas of the Format Text tab on the ribbon:

· Font Face: The font face used on the selected text.

· Font Size: The size of the selected text.

· Highlight Color: Background color behind the selected text.

· Font Color: The selection text color.

For these styles, the selector always begins with ".ms-rte" (for Rich Text Editor), then the ribbon area that is being updated (like FontFace), followed by a dash and a custom name that you provide. For example, .ms-rteFontFace-WafflesFontFace adds a new FontFace to the ribbon. The declaration often includes a special Microsoft code such as "-ms-name" to tell the ribbon how the item should be named when the user hovers over visual options, such as -ms-name:"Custom Comic Sans";.

Demo:

Add font size 100px to deopdown list in FORMAT TEXT tab in ribbon which in font section.

1- Edit this wiki page and add content editor webpart.

2- Edit webpart and write this css class

<style>

.ms-rteFontSize-100

{

font-size:100pt;

}

</style>

3- This is the result:

What is happen in back-end? This is the question.

In this demo JavaScript have main role because the 100px option in select tag of font size is added by JavaScript function.

This function gets all classes starting with "ms-rteFontSize-" and use attributes "font-size" from these classes to create options in this select tag. I called this model "Using CSS as Data Source".

Reference: SHAREPOINT®2013 BRANDING and USER INTERFACE DESIGN Book.