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

To allow users to apply styles to their content within the WYSIWYG editor:

1a. 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 and select the CSS file containing the classes you wish to make available and click Choose.

1b. Or at the System Level (the System Default configuration will be used for Sites without a configuration selected):

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 and select the CSS file containing the classes you wish to make available and click Choose.

2. Custom Styles: Once a CSS file is chosen, you will see an additional Custom Styles field appear. This field gives you the option to limit the classes from the CSS file which will be visible to users by listing specific classes you wish to make available. For example, if the CSS file contains the classes:

.red {
    color: red;
}
.blue {
    color: blue;
}
.yellow {
    color: yellow;
}

but you only wish to allow for users to select blue and red, list these two class names in the Custom Styles field (comma-delimited) as follows: blue, red.

Now users should see the blue and red styles available in the Formats drop-down menu of the WYSIWYG editor.

For more granularity, WYSIWYG Editor Configurations can also be assigned 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 to edit your WYSIWYG field and click Show Advanced Settings > Choose WYSIWYG Editor Configuration and choose your desired 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 choose your desired configuration.