Custom CSS Heading Styles in SharePoint Ribbon?

Question

I have custom heading styles (h1,h2,h3) displaying in the SharePoint Ribbon to choose from on the front-end. SharePoint picks up on this from my css file. Is it possible to get this in the back-end as well?

Example: In a content List, an item with a "Page Content" field. I would a user to see my custom Heading style options in the SharePoint Ribbon.

Answer 1

I had a question similar to this come up a while ago regarding creating a new style for the ribbon. I would guess you should be able to replace existing with your own this way. If I understand the question that's what you're trying to do. Hopefully this helps you out.

1. Open Designer with the appropriate site collection that you want the style to appear.
2. Go to All Files -> Style Library.
3. Create a new .css file and name it approriately.
4. Edit the file and depending on whether you want it to show up in Page Elements or Text Styles you will list it as one of the two:
   • Page Elements - span.ms-rteElement-/yourdefinedname/
   • Instead of using a span you can use any 'h' tag if you'd prefer
   • Text Styles - .ms-rteEStyle-/yourdefinedname/
5. Inside your class definition to have a visual name appear in the ribbon use:
   • -ms-name:"Style Name";
6. After that, style the class however else you need.
7. Save the file and make sure to publish a major version.
8. Now you need to reference the .css file. You can do this either in the master page or in the page layout that it will be used.

Answer 2

The "System Master Page" is what I was looking for.

Site Settings > Masterpage > "System Master Page".

I referenced my CSS file in the System Master Page and it worked.

SPM:

<SharePoint:CssRegistration Name="/Style Library/myRibbon.css" runat="server"/>

Answer 3

Add -ms-element:"true"; in you css class. And make other properties !important It will work.