Skip to main content

Developing in Cascade how to

How do I make CSS classes available in the WYSIWYG formats drop-down menu?

To let users apply styles to their content in the WYSIWYG editor, attach a CSS file to a WYSIWYG Editor Configuration. You can do this at the Site level or the System level.

At the Site level

  1. Click Manage Site > WYSIWYG Editor Configurations.
  2. Select your configuration, or click Create to add one.
  3. In the CSS File field, click Choose File, select the CSS file containing your classes, and click Choose.

At the System level

The System Default configuration is used for Sites without one of their own.

  1. Click Menu > Administration.
  2. Under Preferences, click System Default WYSIWYG Editor Configuration.
  3. Click Edit.
  4. In the CSS File field, click Choose File, select your CSS file, and click Choose.

Limiting which classes appear

Once a CSS file is chosen, a Custom Styles field appears. Use it to list the specific classes you want editors to see. For example, given a CSS file containing:

CSS 
.red {
    color: red;
}

.blue {
    color: blue;
}

.yellow {
    color: yellow;
}

if you only want blue and red available, enter blue, red in Custom Styles. Those two then appear in the editor's Formats drop-down.

Assigning at the Data Definition or Content Type level

At the Data Definition level:

  1. Click Manage Site > Data Definitions.
  2. Select your Data Definition and click Edit.
  3. Click the pencil icon on your WYSIWYG field, then Show Advanced Settings > Choose WYSIWYG Editor Configuration.

At the Content Type level:

  1. Click Manage Site > Content Types.
  2. Select your Content Type and click Edit.
  3. Under Type of Content, select No Data Definition (WYSIWYG Only).
  4. Click Choose WYSIWYG Editor Configuration and pick your configuration.

To check which Editor Configuration a WYSIWYG is actually using, click Tools > Info inside the editor.

See WYSIWYG Editor Configurations for the full set of options, and Adding classes to tables for the authoring side.