Posted By

thesmu on 07/24/12

Tagged

drupal

Versions (?)

Last Edited at 07/24/12 01:37am

Statistics

Viewed 957 times

Favorited by 0 user(s)

Related snippets

Add Styles to the drop-down menu in Umbraco

/ Published in: Other

Add Styles to the drop-down menu for editors to use

Highlighted TextExpand

First, you need to set up a link between the styles and the RT Editor.
1. One the Settings Tab, under "Stylesheets", create a style sheet to hold the styles you want available in the WYSIWYG RT editor "styles" menu. Let's call it "Text Styles".

2. Paste all the style code for those styles in this sheet, to keep them all in one place. (Remove them from the other style sheets.)

3. Update your "Templates" to add a reference to this new stylesheet in the HEAD sections:

Next, follow these steps to create the drop-down entry for each of the styles you want to be available for your editors to select.
1. Go to the stylesheets in the settings section, right-click on the "Text Styles" sheet and click "Create".

2. Type the name you want displayed to users in the drop-down (example: Subheading), click the Create button.

3. For "Alias" type in the name of the style as it appears in your CSS (example: h2 or .subheading). When the user selects the style, the classname will be added to the selected element. If you specified a tagname in the style, then the HTML tag will be added.

4. For "Styles:" put in the CSS code to change the display of that text as it will appear to the editor in the WYSIWYG RTE. example:

font-weight: bold;
font-size: 110%;
5. Save the new style.

Repeat these steps for each of the styles you want in the drop-down.

URL: http://our.umbraco.org/wiki/how-tos/customizing-the-wysiwyg-rich-text-editor-(tinymce)/add-styles-to-the-drop-down-menu-for-editors-to-use

Report this snippet Tweet