Skip to main content
MindTouch Success Center

Add custom styles to Editor

Applies to:
All MindTouch Versions
Role required:
Admin
The MindTouch editor includes preformatted styles by default, but MindTouch 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 MindTouch site
  • Easily 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?