Add custom styles to Editor

Part 1: Add custom style options to the editor

1. Navigate to Site tools > Control panel > System Settings > Editor.
2. In the Set editor configuration field, add the following sample code:

   CKEDITOR.editorConfig = function( config ) {
       config.stylesSet.push({ name : 'Custom div 1', element : 'div', wrap:true, attributes : { 'class' : 'custom1', 'title' :'Custom_Class1' } });
       config.stylesSet.push({ name : 'Custom span 2', element : 'span', wrap:false, attributes : { 'class' : 'custom2', 'title' :'Custom_Class2' } });
   };
   

3. Modify the sample code for your custom styles, adding additional lines as needed.
   • name: The name that you want to appear in the Styles drop-down menu (Custom div 1 and Custom span 2 in the sample code).
   • element: The designated element the style is applied to.
   • wrap: Denotes that the element is a block level element, which applies to <div> or <paragraph> elements. For non-block level elements such as <span> or <code>, set this attribute to false or omit the wrap component entirely.
   • attributes: The sample code identifies a class (custom1, custom2) and a title (Custom_Class1, Custom_Class2) for the style.
4. Click Save to add the custom styles to the editor configuration.

Part 2: Define the CSS format

1. Navigate to Site tools > Control panel > Branding > Custom Site CSS.
2. Add your custom CSS to style your custom classes.

Part 3: Use your custom styles

1. Open a page in Edit mode.
2. Highlight text or an element on the page
3. Select your custom class from, the Style drop-down menu.

To remove the custom style from the text, highlight the text and select the custom style again or select a different style.

Example

The following is a pre-built custom style that you can use or modify. It will add a gold "Warning" box that looks like this:

Part 1: Under Site tools > Control panel > System Settings > Editor, in the Set editor configuration field, add the following code, then save.

CKEDITOR.editorConfig = function( config ) {
    config.stylesSet.push({ name : 'Warning', element : 'div', wrap:true, attributes : { 'class' : 'mt-warning-container', 'title' :'Warning' } });
};

Part 2: Under Branding > Custom Site CSS, add the following CSS to the appropriate role field, then save.

.mt-warning-container{
 align-items: flex-start;
 background-color: @background;
 border: 1px solid #d9d9d9;
 border-radius: .25em;
 -webkit-box-shadow: 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12), 0 5px 5px -3px rgba(0,0,0,.2);
 box-shadow: 0 .55em .7em .05em rgba(0,0,0,.14), 0 .15em 1em .1em rgba(0,0,0,.12), 0 .35em 0.4em -.25em rgba(0,0,0,.2);
 color: #333;
 display: flex;
    .default-font-declaration(normal; 100%; 1.2; @default-font-family);
 margin: 2.25em 1em;
 padding: 1em;
}
 @media all and (max-width: 37.5em) {
 .mt-warning-container,
 .mt-note-container {
 margin: 2.25em 1%;
        }
    }
.mt-warning-container:before{
 flex: 0 0 auto;
    .icon-font-declaration(normal; 175%; 1; @icon-font-family);
 margin: 0 .5em 0 0;
 white-space: nowrap;
}
.mt-warning-container:before {
 color: #f6b221; gold
 content: '\e6f5';
}

.mt-warning-container p{
 color: #333;
 line-height: 1.7;
 margin: 0;
}