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

. 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.

Style Sheet instructions

You can simply add your site theme's stylesheet, but it will mean that all the theme styles will appear in the 'styles' pull-down. You could also filter them by entering all of the classes you wish to appear by setting the CSS Classes. However, this means updating this list everytime you want to add a style to the pull-down

I suggest keeping a separate style sheet just for the editor. ie. editorstyles.css. This means that you only have to add a style to this file and the editor will automatically pick it up. At the same time it gives you control over which styles appear.

It is important to note that only certain styles will appear. Simply defined styles show up in the pull-down. For example .blue-header and H2.blue-header will both show up as blue-header in the pull-down. Complex styles like div.someclass H2.blue-header will not show up at all. You can actually take advantage of this if you like:

.blue-header{color:blue;}
#sidebar-right div h2.blue-header{font-size: 2em; margin-bottom:1em;}
#content div h2.blue-header{font-size: 4em; background-color: #A5A5A5;}

In the above css only .blue-header will appear in the dropdown, but it will look different depending on the content region the user contributed content appears in.

You can also enter empty styles that will act simply as a reference to the styles defined in your theme's style sheet. ie. .blue-header{/*just a style reference*/} will add the class to the element, but all the style information is contained in style.css or whatever the name of the real stylesheet is.

Wysiwyg use instructions

1. The format pull-down in TinyMCE allows you to pick which kind of tag surround the text or image. By default it is p for paragraph. This is mostly what will be used unless you would like position things differently. See the bottom of the page for additional info.

2. The 'styles' pull-down contains all of the css classes that have been loaded from the specified stylesheet for TinyMCE. There are several ways in which you can use this to format your text or other elements. One, click and place the cursor at the beginning of a paragraph. If you select a style here it will add the style to the class attribute of the entire paragraph. Two, you can highlight specific text and select a style. This will wrap only the selected text in a span tag and sets its style to the one you picked.

3. To remove a style from the text you would do the following for the respective ways in which you added the styles above: one, set the style pull-down back to 'styles', or two, highlight the text from which you wish to remove styling from, and click the 'remove formatting' (eraser looking) button.

So you have it ... a way to allow users to format their content easily and consistent with your hard designed styles

cheers,
Jesse Payne