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:

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

%d bloggers like this: