Watch video

In this chapter, you will be setting up Rich Text Editor Styles - RTE Styles. 
What you want to be able to do is set up some styles which will be managed through the *Styles *dropdown in the Rich Text Editor.

By default, you can enter text into the RTE, but you cannot really add any extra styling. **You can also notice a Styles dropdown, which is currently **empty.

*What you will do, is relate a stylesheet to the RTE. * 
This will work best if you have a dedicated stylesheet. You will be able to set up tags (h1, h2, ...) or specific classes (.grey, .red, ...).

Move to your Settings section and create a new stylesheet, which you will in this case name RTE. This will be your dedicated stylesheet that will only be used to set up styles for the RTE.

To create styles, right click on your stylesheet and select create. For instance, call the first one Header. The name you give it is what will be shown in the dropdown on the RTE. 01.50

  • Alias: this can either be a tag, like H4, or a class. If it's a class, that will need to be prefixed with a dot.

  • Styles: here is where you set up your style, like the font size or similar.

  • Preview: this shows what your style will look like.

Set up another style, by again just right clicking, selecting create. For instance, call this style Red.

Instead of a specific tag, create a class. Write your style, in this example, the color red, and click on save. Your preview will show your style.

If you now move back to the RTE, the Styles dropdown is still empty. 
What you will have to do next is relate the stylesheet to your RTE. Go to the *Developer *section. Expand the Datatypes folder, and select your RTE.

You will see that one of the options you have on your RTE, is to relate a stylesheet. Choose your RTE stylesheet and click on save.

If you now move back to the RTE, you can see that the dropdown now has options.

Make some changes to the text, using the styles. For instance, type some text and choose the Header style.

If you take a look at the underlying HTML, you will see that an H4 element has been added.

If you select a part of the text and choose the Red style, you will see that the changes have been applied to the text.

If you take a look at the HTML, you will see that the class of red has been added.

Let's review this chapter.

  1. In order to populate the Styles dropdown of the RTE, you need to relate a dedicated stylesheet.

  2. *On the stylesheet you will set up styles: either using tags or classes. *

Stylesheets and Javascript

Total Time: 00:11:56

This short badge covers how to work with CSS stylesheets and JavaScript files in Umbraco and how to add custom styles to allow content editors to apply specific styles in their content.