Skip to main content

Create custom formatting styles

This page applies to:MindTouch Responsive

Create custom formatting styles to access from within the MindTouch editor to control the styling of content sections. Whether you want to create a branded look for paragraphs, sentences or other page elements, custom styles can be used on any page across your site. 

Adding custom styles to the MindTouch editor requires CSS coding experience.


Use case

Create inline custom styles if you want to :

  • apply a certain style to specific sections (e.g. specific paragraphs or sentences) of your text 
  • reuse a text style across your entire site
  • ensure consistent branding from page to page

Applying a style through the Styles drop-down menu, adds elements to the source which can then be targeted with CSS.  Creating custom styles is a two-step process: (1) Adding the custom style option to the editor, and (2) adding custom CSS to define the style. Custom styles provide more granular control over the styling output of articles.  

By default, the MindTouch editor contains preformatted styles in the Styles drop-down menu:

Image of default styles in editor

Add custom style options

To add custom style options, you need to modify the editor configuration in the control panel.

  1. Navigate to Site tools > Control panel > System SettingsEditor.
  2. In the Set editor configuration window, add the following block of code:
CKEDITOR.editorConfig = function( config ) {
    config.stylesSet.push({ name : 'Paragraph Format', element : 'div', wrap:true, attributes : { 'class' : 'pformat', 'title' :'Formatted_Paragraph' } });
    config.stylesSet.push({ name : 'Sentence Format', element : 'div', wrap:true, attributes : { 'class' : 'sformat', 'title' :'Formatted_Sentence' } });

The above code will add two styling options to the Styles drop-down menu: Paragraph Format and Sentence Format.

Code breakdown

The block of code below is the base configuration needed for the MindTouch editor to know that you are adding new elements to it.

CKEDITOR.editorConfig = function( config ) {  


The code between the brackets { }, defines the applied properties:

config.stylesSet.push({ name : 'Paragraph Format', element : 'div', wrap:true, attributes : { 'class' : 'pformat', 'title' :'Formatted_Paragraph' } });
Property Description
name The name that you want to appear in the Styles drop-down menu. (In the above example, Paragraph Format is displayed.)
element The designated element the style is applied to. 
wrap Denotes that the element is wrapping around the text or content you have highlighted.
attributes Assigned attributes added to the div.  In this example, we are identifying a class and a title for the div.


  1. Click Save to add the custom styles to the editor configuration. 

Image of custom editor configuration in control panel


Apply styles in the editor

  1. Open a page in Edit mode.
  2. Click the Styles drop-down menu to view your custom style options.

Image of custom styles in editor

  1. Highlight text on the page and select Paragraph Format
  2. Switch to Source view (click View Source in the editor).
  3. Notice the new div element wrapped around the highlighted text.
<div class="pformat style-wrap" title="Formatted_Paragraph">
  1. Add CSS styling to your element (see below).


Add custom CSS

Now that you've added the styles to the editor, add your custom CSS:

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


What's next?

Learn more about branding your MindTouch site.  

  • Was this article helpful?