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
{
    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:

Advertisement