SharePoint 2010: custom markup styles

How to complete customize the SharePoint 2010 markup styles

 

First of all you need to specify all your styles

• Font colors
• Fonts
• Font Sizes
• Mark colors
• Predefined Styles
• Predefined Markup Styles
 

The second step: write a css with all your specified styles

I have written a complete customized markup css file. You can download it at the end of this blog post. The location of the css file doesn't matter. I put always it in de layouts folder of the SharePoint root.

After that you have written your css file it's time to change the default markup styles with your custom markup styles. This can you do with jQuery:

 

$(document).ready(function () {
    ExecuteOrDelayUntilScriptLoaded(function () {
        $("div[RteRedirect]").each(function () {
 
            var id = $(this).attr("RteRedirect"),
        editSettings = $("#" + id);
 
            if (editSettings.length > 0 && editSettings[0].PrefixStyleSheet != 'custom') {
                editSettings[0]['PrefixStyleSheet'] = 'custom';
                editSettings[0]['StyleSheet'] = 

  '/_layouts/1043/STYLES/custom/customMarkupStyles.css';
                RTE.Canvas.fixRegion(id, false);
            }
 
        });
    }, "sp.ribbon.js");
});

Reference this jQuery file in you masterpage and the default styles are overwritten with your custom styles.

customMarkupStyles.css