Add Styles to Umbraco TinyMSE editor.
July 20, 2011 Leave a comment
As it is when you install a clean Ubraco site, some setup is required to add the functionality you wanted. Lets say you want to add different style to umbracos WYSIWYG editor. Making users able choosing font-styles just like in word. Her is what you have to do to enable that.
Firstly, know your css.
h1, h2 { color:BLue; font-size:24px; font-family: sans-serif; margin-top:0; margin-bottom:0; } h3, p4 { color:Green; font-size:18px; font-family: sans-serif; margin-top:0; margin-bottom:0; } p { color:Gray; }
Go to “Setting” section and look under “Stylesheets”
here add a new style-sheet by right-clicking on the “stylesheets” folder
I’ve named mine style-sheet “adminStyle”
Then add your styles by by right-clicking on “adminStyle”. Remember to give your styles logical names
so users will recognize them, when editing content.
When a style is created click on it and copy everything within the brackets in to the style. You can only add one style at a time, so don’t copy all your CSS in there at ones ,. .(c:
To finish up you need to enable your newly created “adminStyle” style-sheet in the richtext editor data type.
you can find it in umbraco under developer > data types folder. After cklicking on it look for your style-sheet name under “Related stylesheets”
Check it and save and you are done, Then take a look at the result in your Content and enjoy, the bliss of success. (c: