Custom styles not working

Question

I'm trying to add some custom styles to a rich text editor on my edit form. I'm following this tutorial which says you can add css styles that start with ms-rte and they will be added to the formatting control ribbon. I created the following style as a test and put it on the page in a script editor webpart.

h2.ms-rteElement-SpecialHeading{
  -ms-name: "Special Heading";
}
.ms-rteElement-SpecialHeading{
  font-style: bold;
  color: white !important;
  padding:2px 5px;
  background-color:green;
}

If I edit source in my rich text field and enter the html for a h2 class="ms-rteElement-SpecialHeading"> I do see the heading rendered with my style..

But when I drop down the formats from the ribbon I don't see it there. I just get the built in ones.

Any idea why it wouldn't be working?

Answer 1

I believe any styles for the styles menu in the ribbon have to be loaded in your stylesheet (they can't be included via css either). SharePoint needs to read the style before rendering the menu. If the CSS is included on the page, then the controls have already been rendered.

You're browser however, probably recognises the CSS and then applies the style.

Add the custom styles to your main CSS file for your theme/masterpage and you should see it within the menu.