Return to Snippet

Revision: 58600
at July 24, 2012 01:37 by thesmu

Initial Code
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:

<link href="/css/TextStyles.css" rel="stylesheet" type="text/css" />
4. On the Developer Tab, locate the "Richtext editor" under "Data Types". Where it says "Related stylesheets:", check the box next to "Text Styles"

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.

Initial URL

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

Initial Title
Add Styles to the drop-down menu in Umbraco

Initial Tags

Initial Language