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.
3. Update your "Templates" to add a reference to this new stylesheet in the HEAD sections.
4. On the Developer Tab, locate the "Richtext editor" under "Data Types". Where it says "Related stylesheets:", chedck 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. 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).
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.
I should add that it will get very cumbersome with using all the css declarations from a 4000 line css within the wysiwyg editor - you may want to limit it to headers, paragraphs and a few special styles.
Give too much control to content contributors and you'll have marquee and blink tags everywhere in no time ;-)
how can i add styles in style sheet drop down of WYSWING Editor?
how can i add styles in style sheet drop down of WYSWING Editor?
I am having CSS with more than 4000 Line of code.and i want them to be added in CSS drop down.
I have seen this link http://our.umbraco.org/wiki/reference/package-actions/community-made-package-actions/set-a-css-style-for-the-richtext-editor
but not able to understand the same.
Please help me in the same.
Regards
Jigar
Hi Jigar,
What I would reccommend is this set of steps:
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.
3. Update your "Templates" to add a reference to this new stylesheet in the HEAD sections.
4. On the Developer Tab, locate the "Richtext editor" under "Data Types". Where it says "Related stylesheets:", chedck 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. 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).
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.
~Heather
I should add that it will get very cumbersome with using all the css declarations from a 4000 line css within the wysiwyg editor - you may want to limit it to headers, paragraphs and a few special styles.
Give too much control to content contributors and you'll have marquee and blink tags everywhere in no time ;-)
Dan
I added a Wiki page about this :
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
Hi Heather Thansk for you helps...Could you please post the above link in single line?
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
Hi - thanks for the tutorial, however I seem to be having a couple of issues here and there...
Does this mean that Ishould entries for the styles in two places, i.e. if I am trying to add the following:
h1{
font-size: 0.875em;
font-weight: bold;
}
I need to add it to both the 'Text Styles' stylesheet and the 'h1' stylesheet I create under the main Text Styles stylesheet?
;-)
is working on a reply...