Home » SharePoint » CSS » How to Add Custom Styles to SharePoint Content Editor

How to Add Custom Styles to SharePoint Content Editor

Recently I was challenged by a client to add a functionality to the publishing site so that they can add horizontal rules within Content Editor Webpart. My initial reaction is to tell them to just use the Edit Source button and add <hr> tag to the webpart. However the client was not too happy to see all the ugly HTML code. Did a little research and found that this can be achieved using CSS!

Here is the code:

When you add this CSS to your page you will see the new style like this:

If you want to add additional custom styles, you can add them by using .ms-rteStyle-CustomStyleName and .ms-rteElement-CustomElementStyle 

 

Thanks to Tiago Duarte for his contributions.

Leave a Reply

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

*
*