Rich Text Editor Guide

UniSuper

Rich Text Editor Guide

This document briefly describes the steps to produce a heavily styled content using Sitecore’s Rich Text Editor.

There are few elements incorporated into the Rich Text Editor in order to follow some design extensions that have been done by Reactive. It may not be exactly the same style on Rich Text Editor as the actual style on the page, but this guide will help content editors to style and achieve expected results.

A sample URL of a page that has the most styling implementation:

The styles are:

-Heading 2 & heading 3

Highlight the text you wish to set as the heading, select the dropdown on the tool bar as per screen grab below:

Choose the heading style accordingly.

Results:

-Mark (adding background colour)

Highlight the text you wish to mark, then on the left dropdown select mark

This will then add a grey background colour to the text which on the actual page, the highlighted text will either have dark blue background or light pale green background for right sidebar promos.Here are some examples:

-Align images left or right

Click on the image you wish to align to left or right. On the style drop down select either alignleft or alignright.

-Blockquote

Create a paragraph and highlight the whole paragraph and select blockquote on the style dropdown.

-Green box align left or right (pulloutminorleftor pull out minor right)

This style is to create a box of the selected text and float it to the left or right. Highlight a sentence or paragraph then on the style dropdown select pulloutminorleftor pulloutminorright

-Table

There is an issue on IE. We suggest that content editors who are going to create / edit tables to use Google Chrome.

Click on the table icon on the toolbar, select the right number of columns and rows on the grid menu for example 3x3

Once the table is created, right click on the table (any cell) and choose Cell Properties.

Create two table headings by clicking on the Accessibility tab and set the Heading rows to 2 and click OK. This sets first and second row as table headings which makes the grey background and bolded dark grey text as per the picture below.

Right click on the table again and choose Cell Properties, select the cells on the 1st row by holding CTRL key and click on each cell. On the right hand panel, set the CSS Class to green, then click OK. This sets the table heading row background to green and the text to white just as follows

-Blue box align left or right (pull out major left or pull out major right)

This style is to create a box of the selected text and float it to the left or right. Highlight a sentence or paragraph then on the style dropdown select pulloutmajorleftor pulloutmajorright

You will have to double click the text inside the box to be able to edit. Select the first sentence to be the heading. On the style dropdown select pulloutmajortitle. The following couple of pictures illustrate the steps above.