Apply Css class around <p>, Rich Text Editor - Sitecore 8.2u2

Question

EDIT: I'm doing this in the Design part of RTE, NOT Html.

I select a piece of text thats in a <'p>. Then "Apply Css Class" to add a class which changes the background color.

This becomes a <'span> inside the <'p>, and only gives a background color to the text. Not the paragraph. I wish the class to be set on the <'p>.

Expected: <'p class="blue">lorem ipsum<'/p>

Result: <'p><'span class="blue">lorem ipsum<'/span><'/p>

Anyone know how to achieve the Expected? I would like to do this without have to edit HTML in RTE.

Answer 1

You should be able to do this fairly easily.

Go to the root of your site and open up default.css (this comes by default with Sitecore).

Add the following at the bottom of the file:

p.blue {
    background-color:blue;
}

Go to \sitecore\shell\Controls\Rich Text Editor\ToolsFile.xml. Find the 'classes' element (or add one if it doesn't exist) and add your style:

<classes>
        <class name="Blue Background" value="p.blue" />
</classes>

Then save the files. Clear your browser cache and refresh the editor.

You should then find selecting a paragraph and choosing this option from the class drop-down in the RTE will style it correctly.

Answer 2

A method I much prefer for user-friendliness is to create a new paragraph type in the RTE Profile:

It looks like this in the Rich Text Editor window:

This way you can choose the type of DOM element you want and can specify multiple classes.