x First time here? Check out the FAQ
Join us a the Umbraco event of the year - get your Codegarden 14 early bird ticket today

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

    I personally like to separate these basic "content markup" styles into their own style sheet, separated from the "layout" styles and other special styles in use in the site design. This is what I detail below.

    First, you need to set up a link between the styles and the RT Editor.

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