Add Styles to Umbraco TinyMSE editor.

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
    font-family: sans-serif; 

h3, p4
    font-family: sans-serif; 


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:


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: