How Do I Customize the Styles Drop-Down List?

This website contains links to software which is either no longer maintained or will be supported only until the end of 2019 (CKFinder 2). For the latest documentation about current CKSource projects, including software like CKEditor 4/CKEditor 5, CKFinder 3, Cloud Services, Letters, Accessibility Checker, please visit the new documentation website.

If you look for an information about very old versions of CKEditor, FCKeditor and CKFinder check also the CKEditor forum, which was closed in 2015. If not, please head to StackOverflow for support.

You need to pass your own style definitions to the CKEDITOR.stylesSet.add function, giving them a unique name, and then configure the editor to use them by setting the stylesSet value.

CKEDITOR.stylesSet.add( 'my_styles',
	// Block-level styles
	{ name : 'Blue Title', element : 'h2', styles : { 'color' : 'Blue' } },
	{ name : 'Red Title' , element : 'h3', styles : { 'color' : 'Red' } },

	// Inline styles
	{ name : 'CSS Style', element : 'span', attributes : { 'class' : 'my_style' } },
	{ name : 'Marker: Yellow', element : 'span', styles : { 'background-color' : 'Yellow' } }

Depending on whether your definitions were placed inline or in an external file, you need to set the stylesSet configuration setting accordingly.

// For inline style definition
config.stylesSet = 'my_styles';

// For a definition in an external file
config.stylesSet = 'my_styles:';

For more details on the definition format and best practices on how to customize the styles please refer to the Styles article from the Developer's Guide.

Stylesheet Parser Plugin

Note that since CKEditor 3.6 you can also populate the Styles drop-down list with style definitions added in an external CSS stylesheet file. Check the How Do I Add Existing CSS Styles from an External File to the Styles Drop-Down List? article for more information about using the new (and optional) Stylesheet Parser plugin.

This page was last edited on 31 May 2011, at 14:22.