Skip to main content
NICE CXone Expert

We will be closed on Monday, January 20th in observance of Martin Luther King Day

Expert Success Center

Add custom styles to Editor

Applies to:
All MindTouch Versions
Role required:
Admin
The editor includes preformatted styles by default, but site administrators can configure custom options to appear in the Style drop-down menu in the Editor.

Create inline custom styles to:

  • Apply a certain style to text or tables
  • Reuse a text style across your site
  • Modify style through a global CSS change

Part 1: Add custom style options to the editor

  1. Navigate to Site tools > Control panel > System SettingsEditor.
  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 (custom1custom2) 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.

 

  • Was this article helpful?