Here's a complete example I extracted from a working solution.
Reference
Add the .js and the .css to the .master
<!-- Must be located under Themable for the Theming Engine to work https://blogs.msdn.microsoft.com/sharepointdesigner/2010/04/09/working-with-the-sharepoint-theming-engine/ -->
<SharePoint:CssRegistration name="Themable/Client/Styles/styles.min.css" EnableCssTheming ="true" After="corev15.css" runat="server" Version="15" />
<SharePoint:ScriptLink Language="javascript" runat="server" LoadAfterUI="true" Localizable="false" Name="Client/Scripts/script.min.js" />
JS
Client.Branding.RichTextEditor = {
DisableRibbonElements: function () {
/// <summary>
/// This function sets the prefix for RTE controls
/// </summary>
$('.ms-rtestate-write:not(.ms-rteflags-0)').attr(
{
PrefixStyleSheet: 'yourprefix-'
}
);
}
};
CSS
/*Font presets for RichtText Editor*/
/*overwrite the default font-family settings*/
.yourprefix-FontFace-1 {
-ms-name: "Verdana";
font-family: Verdana, Arial, sans-serif;
}
.yourprefix-ThemeFontFace-1 {
-ms-name: "Verdana";
font-family: Verdana, Arial, sans-serif;
}
/*overwrite the default font-size settings*/
.yourprefix-FontSize-1 {
font-size: 1em;
}
/*overwrite the default font-color settings*/
.yourprefix-ThemeBackColor-1-0 {
background-color: #333;
-ms-color: "Grau";
}
/*Style presets*/
H1.yourprefix-Element-H1 {
-ms-name: "Hauptüberschrift";
font-size: 1.4em;
/* [ReplaceColor(themeColor:"ContentAccent1")] */ color: #0072C6;
font-weight: bold;
}
H2.yourprefix-Element-H2 {
-ms-name: "Überschrift 2";
font-size: 1.1em;
/* [ReplaceColor(themeColor:"BodyText")] */ color: #444;
font-weight: bold;
}
H2.yourprefix-Element-H2B {
-ms-name: "Überschrift 2 Akzent 1";
font-size: 1.1em;
/* [ReplaceColor(themeColor:"ContentAccent1")] */ color: #0072C6;
font-weight: bold;
}
H2.yourprefix-Element-H2C {
-ms-name: "Überschrift 2 Akzent 2";
font-size: 1.1em;
/* [ReplaceColor(themeColor:"ContentAccent2")] */ color: #0072C6;
font-weight: bold;
}
P.yourprefix-Element-P {
-ms-name: "Fließtext";
-ms-element: "true";
}
HR.yourprefix-Element-HR {
-ms-name: "Trennlinie";
-ms-element: "true";
}
.yourprefix-Style-Fliesstext {
-ms-name: "Standard";
}
.yourprefix-Style-FliesstextB {
-ms-name: "Kursiv";
font-style: italic;
}
.yourprefix-Style-FliesstextC {
-ms-name: "Akzent 1";
/* [ReplaceColor(themeColor:"ContentAccent1")] */ color: #0072C6;
}
.yourprefix-Style-FliesstextD {
-ms-name: "Akzent 2";
/* [ReplaceColor(themeColor:"ContentAccent2")] */ color: #0072C6;
}
.yourprefix-Style-SUP {
-ms-name: "Hochgestellt";
vertical-align: super;
font-size: smaller;
}
/*recreate standard styles*/
.yourprefix-Image-0 {
-ms-name: "Ohne Rahmen";
}
.yourprefix-Image-1 {
-ms-name: "Dünne Rahmenlinie";
/* [ReplaceColor(themeColor:"BodyText",opacity:"1")] */ background-color: #444;
/* [ReplaceColor(themeColor:"BodyText-Darker",opacity:"1")] */ border: 1px solid #333;
/* [RecolorImage(themeColor:"SubtleBodyText",method:"Tinting")] */ background-image: url("/_layouts/15/images/tabtitlerowbottombg.png?rev=23");
background-repeat: repeat-x;
background-position: top;
}
.yourprefix-Image-2 {
-ms-name: "Tabellenrahmen";
padding: 2px;
/* [ReplaceColor(themeColor:"SubtleLines")] */ border-top: 1px solid #c6c6c6;
/* [ReplaceColor(themeColor:"Lines")] */ border-bottom: 1px solid #ababab;
/* [ReplaceColor(themeColor:"SubtleLines")] */ border-left: 1px solid #c6c6c6;
/* [ReplaceColor(themeColor:"Lines")] */ border-right: 1px solid #ababab;
}
.yourprefix-Image-3 {
-ms-name: "Dunkler Rahmen";
padding: 15px;
/* [ReplaceColor(themeColor:"BodyText-Darker",opacity:"1")] */ background-color: #333;
/* [ReplaceColor(themeColor:"BodyText",opacity:"1")] */ border: 1px solid #444;
/* [RecolorImage(themeColor:"BodyText-Darker",method:"Tinting")] */ background-image: url("/_layouts/15/images/tabtitlerowbottombg.png?rev=23");
background-attachment: fixed;
background-repeat: repeat-x;
background-position: left bottom;
}
.yourprefix-Image-4 {
-ms-name: "Heller Rahmen";
padding: 6px;
padding-bottom: 33px;
/* [ReplaceColor(themeColor:"BackgroundOverlay-Lightest",opacity:"1")] */ background-color: #F2F2F2;
/* [ReplaceColor(themeColor:"SubtleLines")] */ border-top: 1px solid #c6c6c6;
/* [ReplaceColor(themeColor:"Lines")] */ border-bottom: 1px solid #ababab;
/* [ReplaceColor(themeColor:"SubtleLines")] */ border-left: 1px solid #c6c6c6;
/* [ReplaceColor(themeColor:"Lines")] */ border-right: 1px solid #ababab;
background-image: url("/_layouts/15/images/selbg.png?rev=23");
background-repeat: repeat-x;
background-position: top;
}
.yourprefix-Table-default > tbody > tr > td,
.yourprefix-Table-default > tbody > tr > th,
.yourprefix-Table-0 > tbody > tr > td,
.yourprefix-Table-0 > tbody > tr > th,
.yourprefix-Table-1 > tbody > tr > td,
.yourprefix-Table-1 > tbody > tr > th,
.yourprefix-Table-2 > tbody > tr > td,
.yourprefix-Table-2 > tbody > tr > th,
.yourprefix-Table-3 > tbody > tr > td,
.yourprefix-Table-3 > tbody > tr > th,
.yourprefix-Table-4 > tbody > tr > td,
.yourprefix-Table-4 > tbody > tr > th,
.yourprefix-Table-5 > tbody > tr > td,
.yourprefix-Table-5 > tbody > tr > th,
.yourprefix-Table-6 > tbody > tr > td,
.yourprefix-Table-6 > tbody > tr > th,
.yourprefix-Table-7 > tbody > tr > td,
.yourprefix-Table-7 > tbody > tr > th,
.yourprefix-Table-8 > tbody > tr > td,
.yourprefix-Table-8 > tbody > tr > th,
.yourprefix-Table-9 > tbody > tr > td,
.yourprefix-Table-9 > tbody > tr > th,
.yourprefix-Table-10 > tbody > tr > td,
.yourprefix-Table-10 > tbody > tr > th {
vertical-align: top;
padding: 7px 5px 6px;
}
.yourprefix-Table-default > tbody > tr > th,
.yourprefix-Table-default > tbody > tr.yourprefix-TableFooterRow-default,
.yourprefix-Table-0 > tbody > tr > th,
.yourprefix-Table-0 > tbody > tr.yourprefix-TableFooterRow-0,
.yourprefix-Table-1 > tbody > tr > th,
.yourprefix-Table-1 > tbody > tr.yourprefix-TableFooterRow-1,
.yourprefix-Table-2 > tbody > tr > th,
.yourprefix-Table-2 > tbody > tr.yourprefix-TableFooterRow-2,
.yourprefix-Table-3 > tbody > tr > th,
.yourprefix-Table-3 > tbody > tr.yourprefix-TableFooterRow-3,
.yourprefix-Table-4 > tbody > tr > th,
.yourprefix-Table-4 > tbody > tr.yourprefix-TableFooterRow-4,
.yourprefix-Table-5 > tbody > tr > th,
.yourprefix-Table-5 > tbody > tr.yourprefix-TableFooterRow-5,
.yourprefix-Table-6 > tbody > tr > th,
.yourprefix-Table-6 > tbody > tr.yourprefix-TableFooterRow-6,
.yourprefix-Table-7 > tbody > tr > th,
.yourprefix-Table-7 > tbody > tr.yourprefix-TableFooterRow-7,
.yourprefix-Table-8 > tbody > tr > th,
.yourprefix-Table-8 > tbody > tr.yourprefix-TableFooterRow-8,
.yourprefix-Table-9 > tbody > tr > th,
.yourprefix-Table-9 > tbody > tr.yourprefix-TableFooterRow-9,
.yourprefix-Table-10 > tbody > tr > th,
.yourprefix-Table-10 > tbody > tr.yourprefix-TableFooterRow-10 {
/* [ReplaceColor(themeColor:"SubtleBodyText")] */ color: #777;
text-align: left;
font-weight: normal;
}
.yourprefix-tablecells {
padding: 2px;
vertical-align: top;
}
.yourprefix-Table-default {
-ms-name: "Standardtabellenformat - Hell";
}
.yourprefix-Table-default,
.yourprefix-Table-default > tbody > tr > td,
.yourprefix-Table-default > tbody > tr > th,
td.yourprefix-Table-default,
th.yourprefix-Table-default,
.yourprefix-tablecells {
/* [ReplaceColor(themeColor:"SubtleLines")] */ border: 1px solid #c6c6c6;
}
.yourprefix-Table-0 {
-ms-name: "Tabellenformat 1 - Durchsichtig";
border-width: 0;
border-style: none;
border-collapse: collapse;
}
.yourprefix-Table-1 {
-ms-name: "Tabellenformat 2 - Hell verbunden";
}
.yourprefix-Table-1 tr.yourprefix-TableHeaderRow-1,
.yourprefix-Table-1 tr.yourprefix-TableFooterRow-1,
.yourprefix-Table-1 tr.yourprefix-TableHeaderRow-1 > th,
.yourprefix-Table-1 tr.yourprefix-TableFooterRow-1 > th,
.yourprefix-Table-1 tr.yourprefix-TableFooterRow-1 > td {
/* [ReplaceColor(themeColor:"BackgroundOverlay",opacity:"1")] */ background-color: #fff;
/* [ReplaceColor(themeColor:"BackgroundOverlay")] */ background-color: rgba( 255,255,255,0.85 );
/* [ReplaceColor(themeColor:"Lines")] */ border-top: 1px solid #ababab;
/* [ReplaceColor(themeColor:"Lines")] */ border-bottom: 1px solid #ababab;
}
.yourprefix-Table-1 tr.yourprefix-TableOddRow-1 {
/* [ReplaceColor(themeColor:"BackgroundOverlay-Lighter")] */ background-color: #D8D8D8;
}
.yourprefix-Table-1 tr.yourprefix-TableEvenRow-1 {
/* [ReplaceColor(themeColor:"BackgroundOverlay",opacity:"1")] */ background-color: #fff;
/* [ReplaceColor(themeColor:"BackgroundOverlay")] */ background-color: rgba( 255,255,255,0.85 );
}
.yourprefix-Table-6 {
-ms-name: "Tabellenformat 3 - Mittel Zweiton";
}
.yourprefix-Table-6 tr.yourprefix-TableHeaderRow-6,
.yourprefix-Table-6 tr.yourprefix-TableFooterRow-6,
.yourprefix-Table-6 tr.yourprefix-TableHeaderRow-6 > th,
.yourprefix-Table-6 tr.yourprefix-TableFooterRow-6 > th,
.yourprefix-Table-6 tr.yourprefix-TableFooterRow-6 > td {
/* [ReplaceColor(themeColor:"ContentAccent1-Darker")] */ background-color: #005594;
/* [ReplaceColor(themeColor:"BackgroundOverlay")] */ color: #fff;
}
.yourprefix-Table-6 tr.yourprefix-TableOddRow-6 {
/* [ReplaceColor(themeColor:"ContentAccent1-Lightest",opacity:"0.7")] */ background-color: #C0E4FF;
}
.yourprefix-Table-6 tr.yourprefix-TableEvenRow-6 {
/* [ReplaceColor(themeColor:"BackgroundOverlay",opacity:"0.7")] */ background-color: rgba( 255,255,255,0.85 );
}
.yourprefix-Table-2 {
-ms-name: "Tabellenformat 4 - Helle Linien";
}
.yourprefix-Table-2 tr.yourprefix-TableHeaderRow-2,
.yourprefix-Table-2 tr.yourprefix-TableFooterRow-2,
.yourprefix-Table-2 tr.yourprefix-TableHeaderRow-2 > th,
.yourprefix-Table-2 tr.yourprefix-TableFooterRow-2 > th,
.yourprefix-Table-2 tr.yourprefix-TableFooterRow-2 > td {
/* [ReplaceColor(themeColor:"BodyText")] */ background-color: #444;
/* [ReplaceColor(themeColor:"BackgroundOverlay",opacity:"1")] */ color: #fff;
}
.yourprefix-Table-2 tr.yourprefix-TableOddRow-2,
.yourprefix-Table-2 tr.yourprefix-TableEvenRow-2 {
/* [ReplaceColor(themeColor:"StrongLines")] */ border-top: 1px solid #92c0e0;
/* [ReplaceColor(themeColor:"StrongLines")] */ border-bottom: 1px solid #92c0e0;
}
.yourprefix-Table-3 {
-ms-name: "Tabellenformat 5 - Raster";
}
.yourprefix-Table-3,
.yourprefix-Table-3 > tbody > tr > td,
.yourprefix-Table-3 > tbody > tr > th {
/* [ReplaceColor(themeColor:"Lines")] */ border: 1px solid #ababab;
}
.yourprefix-Table-3 tr.yourprefix-TableOddRow-3 {
/* [ReplaceColor(themeColor:"BackgroundOverlay-Lighter")] */ background-color: #D8D8D8;
}
.yourprefix-Table-3 tr.yourprefix-TableHeaderRow-3,
.yourprefix-Table-3 tr.yourprefix-TableFooterRow-3,
.yourprefix-Table-3 tr.yourprefix-TableEvenRow-3 {
/* [ReplaceColor(themeColor:"BackgroundOverlay")] */ background-color: rgba( 255,255,255,0.85 );
}
.yourprefix-Table-4 {
-ms-name: "Tabellenformat 6 - Akzent 1";
}
.yourprefix-Table-4,
.yourprefix-Table-4 > tbody > tr > td,
.yourprefix-Table-4 > tbody > tr > th {
/* [ReplaceColor(themeColor:"ContentAccent1-Darker",opacity:"1")] */ border: 1px solid #005594;
}
.yourprefix-Table-4 tr.yourprefix-TableHeaderRow-4,
.yourprefix-Table-4 tr.yourprefix-TableFooterRow-4,
.yourprefix-Table-4 tr.yourprefix-TableHeaderRow-4 > th,
.yourprefix-Table-4 tr.yourprefix-TableFooterRow-4 > th,
.yourprefix-Table-4 tr.yourprefix-TableFooterRow-4 > td {
/* [ReplaceColor(themeColor:"ContentAccent1-Darker",opacity:"1")] */ background-color: #005594;
/* [ReplaceColor(themeColor:"BackgroundOverlay",opacity:"1")] */ color: #fff;
}
.yourprefix-Table-5 {
-ms-name: "Tabellenformat 7 - Akzent 2";
}
.yourprefix-Table-5,
.yourprefix-Table-5 > tbody > tr > td,
.yourprefix-Table-5 > tbody > tr > th {
/* [ReplaceColor(themeColor:"ContentAccent2-Darker",opacity:"1")] */ border: 1px solid #009AC3;
}
.yourprefix-Table-5 tr.yourprefix-TableHeaderRow-5,
.yourprefix-Table-5 tr.yourprefix-TableFooterRow-5,
.yourprefix-Table-5 tr.yourprefix-TableHeaderRow-5 > th,
.yourprefix-Table-5 tr.yourprefix-TableFooterRow-5 > th,
.yourprefix-Table-5 tr.yourprefix-TableFooterRow-5 > td {
/* [ReplaceColor(themeColor:"ContentAccent2-Darker",opacity:"1")] */ background-color: #009AC3;
/* [ReplaceColor(themeColor:"BackgroundOverlay",opacity:"1")] */ color: #fff;
}
.yourprefix-Table-7 {
-ms-name: "Tabellenformat 8 - Akzent 3";
}
.yourprefix-Table-7,
.yourprefix-Table-7 > tbody > tr > td,
.yourprefix-Table-7 > tbody > tr > th {
/* [ReplaceColor(themeColor:"ContentAccent3-Darker",opacity:"1")] */ border: 1px solid #1D603F;
}
.yourprefix-Table-7 tr.yourprefix-TableHeaderRow-7,
.yourprefix-Table-7 tr.yourprefix-TableFooterRow-7,
.yourprefix-Table-7 tr.yourprefix-TableHeaderRow-7 > th,
.yourprefix-Table-7 tr.yourprefix-TableFooterRow-7 > th,
.yourprefix-Table-7 tr.yourprefix-TableFooterRow-7 > td {
/* [ReplaceColor(themeColor:"ContentAccent3-Darker",opacity:"1")] */ background-color: #1D603F;
/* [ReplaceColor(themeColor:"BackgroundOverlay",opacity:"1")] */ color: #fff;
}
.yourprefix-Table-8 {
-ms-name: "Tabellenformat 9 - Akzent 4";
}
.yourprefix-Table-8,
.yourprefix-Table-8 > tbody > tr > td,
.yourprefix-Table-8 > tbody > tr > th {
/* [ReplaceColor(themeColor:"ContentAccent4-Darker",opacity:"1")] */ border: 1px solid #585A40;
}
.yourprefix-Table-8 tr.yourprefix-TableHeaderRow-8,
.yourprefix-Table-8 tr.yourprefix-TableFooterRow-8,
.yourprefix-Table-8 tr.yourprefix-TableHeaderRow-8 > th,
.yourprefix-Table-8 tr.yourprefix-TableFooterRow-8 > th,
.yourprefix-Table-8 tr.yourprefix-TableFooterRow-8 > td {
/* [ReplaceColor(themeColor:"ContentAccent4-Darker",opacity:"1")] */ background-color: #585A40;
/* [ReplaceColor(themeColor:"BackgroundOverlay",opacity:"1")] */ color: #fff;
}
.yourprefix-Table-9 {
-ms-name: "Tabellenformat 10 - Akzent 5";
}
.yourprefix-Table-9,
.yourprefix-Table-9 > tbody > tr > td,
.yourprefix-Table-9 > tbody > tr > th {
/* [ReplaceColor(themeColor:"ContentAccent5-Darker",opacity:"1")] */ border: 1px solid #B10026;
}
.yourprefix-Table-9 tr.yourprefix-TableHeaderRow-9,
.yourprefix-Table-9 tr.yourprefix-TableFooterRow-9,
.yourprefix-Table-9 tr.yourprefix-TableHeaderRow-9 > th,
.yourprefix-Table-9 tr.yourprefix-TableFooterRow-9 > th,
.yourprefix-Table-9 tr.yourprefix-TableFooterRow-9 > td {
/* [ReplaceColor(themeColor:"ContentAccent5-Darker",opacity:"1")] */ background-color: #B10026;
/* [ReplaceColor(themeColor:"BackgroundOverlay",opacity:"1")] */ color: #fff;
}
.yourprefix-Table-10 {
-ms-name: "Tabellenformat 11 - Akzent 6";
}
.yourprefix-Table-10,
.yourprefix-Table-10 > tbody > tr > td,
.yourprefix-Table-10 > tbody > tr > th {
/* [ReplaceColor(themeColor:"ContentAccent6-Darker",opacity:"1")] */ border: 1px solid #4E1F5B;
}
.yourprefix-Table-10 tr.yourprefix-TableHeaderRow-10,
.yourprefix-Table-10 tr.yourprefix-TableFooterRow-10,
.yourprefix-Table-10 tr.yourprefix-TableHeaderRow-10 > th,
.yourprefix-Table-10 tr.yourprefix-TableFooterRow-10 > th,
.yourprefix-Table-10 tr.yourprefix-TableFooterRow-10 > td {
/* [ReplaceColor(themeColor:"ContentAccent6-Darker",opacity:"1")] */ background-color: #4E1F5B;
/* [ReplaceColor(themeColor:"BackgroundOverlay",opacity:"1")] */ color: #fff;
}
.yourprefix-TableGrid td, .yourprefix-TableGrid th {
border: 1px dotted black;
}
.yourprefix-Position-1 {
-ms-name: "Links";
float: left;
}
.yourprefix-Position-2 {
-ms-name: "Rechts";
float: right;
}
.yourprefix-Position-3 {
-ms-name: "Oben";
vertical-align: text-top;
}
.yourprefix-Position-4 {
-ms-name: "Mitte";
vertical-align: middle;
}
.yourprefix-Position-5 {
-ms-name: "Unten";
vertical-align: text-bottom;
}
/*may used in later versions*/
/*blockquote.yourprefix-Element-BLOCKQUOTE
{
-ms-name:"Zitat";
font-style:italic;
background: #EEE;
border-left: 5px solid #ccc;
margin: 1.5em 10px;
padding: 1em 10px;
quotes: "\201C""\201D""\2018""\2019";
}
blockquote.yourprefix-Element-BLOCKQUOTE:before {
color: #ccc;
content: open-quote;
font-size: 3.25em;
line-height: 0.1em;
margin-right: 0.25em;
vertical-align: -0.4em;
}
blockquote.yourprefix-Element-BLOCKQUOTE:after {
content: no-close-quote;
}*/