Adding new custom styles to a RTE column

Question

Upfront, before anyone asks: yes, I've googled this and I've read every single article on every dodgy blog site instructing me to:

1. Create a CSS file and drop in the Style Library.
2. Write some CSS with .ms-rteStyle-whatever and/or .ms-rteElement-whatever.
3. Reference it in my master page.
4. Check in and publish all the things.

Also, I've already seen this question and subsequent comment, and I'm not using a custom new or edit form. Just a custom list with an enhanced rich text site column.

The advertised method for adding custom styles works great... for wiki content on pages. Unfortunately, that's not what I need. I need to be able to offer these custom style options in an enhanced rich text column on a custom list. Anyone know what I'm doing wrong, or what I need to do?

Answer 1

Try the following css:

/* Overriding H3 in the ribbon */
H3.ms-rteElement-H3 {
    -ms-name: "Heading 3";
    -ms-element: "true";
    font-family: Helvetica,Arial,sans-serif;
    font-size: 24px;
    font-weight: normal;
    color: Green;
}


/* Adding custom H5 in the ribbon */
H5.ms-rteElement-H5 {
    -ms-name: "My Custom Heading 5";
    -ms-element: "true";
    font-family: Helvetica,Arial,sans-serif;
    font-size: 18px;
    font-weight: normal;
    color: Red;
}



/* For multi-line text field */
.ms-rtestate-field h5, .ms-rtestate-field .ms-h5 {
    line-height: 1.6;
    font-family: Helvetica,Arial,sans-serif;
    font-size: 18px;
    font-weight: normal;
    color: Red;
}

.ms-rtestate-field h3, .ms-rtestate-field .ms-h3 {
    font-family: Helvetica,Arial,sans-serif;
    font-size: 24px;
    font-weight: normal;
    color: Green;
}
/* @end */