As designers, something that we all wish at one point or another is for non-technical users to be able to style their contributed content according to the styles we have defined in style sheets. Users usually want to be able to easily do this as well. If a WYSIWYG is involved it often means a user will be selecting colours and fonts that will end up inline with the element; hard coded in the HTML like <div style="{background-color='green'; font-size='2em';}" >. It can also be time consuming to have to go and style everything a user inputs if it doesn't exactly fit your design model.

For tinyMCE, there is a nice feature that allows you to add styles to a 'style' pull-down menu. Here is how you can go about setting that up:

1. Add and enable the Wysiwyg module

2. Go to Site Configuration >> Wysiwyg

3. click 'edit' beside Full HTML -- TinyMCE

4. click 'buttons and plugins' to open the buttons settings. In here you will want to check 'font style', 'remove format', 'HTML block format'

5. click 'CSS' to open the css settings. Here there are several fields:

• Block Formats: are the tags a user can enclose their content in. It appears in the editors 'Format' pull-down. These are up to you.
• Editor CSS: Selects where the 'Styles' pull-down inherits its options from. By default it is set to 'Use Theme CSS' which means the admin theme's CSS. Set this to 'Define CSS' so it will inherit from the CSS of your choice.
• CSS Path: The path(s) to the CSS file(s) you want the CSS classes to be pulled from. I find the full path works best. See Style sheet instructions below for further details.
• CSS Classes: Optionally you can use this to filter the styles that you want to appear in the pull-down list. If left blank it all styles will appear in the pull-down.