Skip to main content

Add a "More" option to your Styles menu

This page applies to:MindTouch Responsive

This article outlines how to add a "More" option to view additional options not displayed in the menu.


When should I add a "More" option?

When adding custom styles to the formatting menu in the MindTouch editor, the drop-down menu may not be able to display all option since the height of the Styles drop-down list may become too large for some screen resolutions. In that case, add a "More" option to allow your users to access all of your custom style options.


Add the "More" option to the editor configuration

  1. Navigate to Site tools > Control panel > System Settings > Editor.
  2. In the Set editor configuration window, add the following line of code: 
config.styles_maxUserDefined = 2;

In the above code, the integer 2 is the number of items you would like the editor to display before displaying More


Below is an example of custom styles and the More option added to the editor configuration:

CKEDITOR.editorConfig = function( config )

config.stylesSet.push({ name : 'Administrators Conditional Block', element : 'div', wrap:true, attributes : { 'if' : 'user.groups["Administrators"]'} });
config.stylesSet.push({ name : 'Complete', element : 'div', wrap:true, attributes : { 'class' : 'complete', 'title' :'Complete' } });
config.stylesSet.push({ name : 'In Progress', element : 'div', wrap:true, attributes : { 'class' : 'inprogress', 'title' :'In Progress' } });
config.stylesSet.push({ name : 'Not Started', element : 'div', wrap:true, attributes : { 'class' : 'notstarted', 'title' :'Not Started'} });

config.styles_maxUserDefined = 2;


How it would look in the editor:

Image of the more option in the styles drop-down menu


What's next

If you already have styles identified that you'd like to import into MindTouch, you can do so through custom branding.  

  • Was this article helpful?