Skip to main content
MindTouch Success Center

Add a "More" option to your Styles menu

This page applies to:MindTouch (current)

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

Example

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?