Advanced Search

Add Styles to the drop-down menu in Umbraco

/ Published in: Other
Save to your folder(s)
Add Styles to the drop-down menu for editors to use

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. First, you need to set up a link between the styles and the RT Editor.
  2. 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".
  3.  
  4. 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.)
  5.  
  6. 3. Update your "Templates" to add a reference to this new stylesheet in the HEAD sections:
  7.  
  8. <link href="/css/TextStyles.css" rel="stylesheet" type="text/css" />
  9. 4. On the Developer Tab, locate the "Richtext editor" under "Data Types". Where it says "Related stylesheets:", check the box next to "Text Styles"
  10.  
  11. 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.
  12. 1. Go to the stylesheets in the settings section, right-click on the "Text Styles" sheet and click "Create".
  13.  
  14. 2. Type the name you want displayed to users in the drop-down (example: Subheading), click the Create button.
  15.  
  16. 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. 
  17.  
  18. 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:
  19.  
  20. font-weight: bold;
  21. font-size: 110%;
  22. 5. Save the new style.
  23.  
  24. 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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.