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.