Editor Styles

Styles

Everything below can be accomplished using the WYSIWYG editor within a Drupal site. No HTML needed! These are the styles and color palette provided by the "default UCR profile theme". Special characters, super-script, and sub-scripts are also available.

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph text

Separators

You can also use separators with any of the different headings or paragraph text. Below are examples using Heading 3.

Default Separator Above

Default Separator Below

Alt 1 Separator Above

Alt 1 Separator Below

Alt 2 Separator Above

Alt 2 Separator Below

Brand Blue Separator Above & Below

Brand Gold Separator Above & Below

Example of a full line separator, available in CKEditor.

Buttons

Any link can be transformed into a button. Once a link has been created, the styles available will include button options.

Light Blue Example: UCR Brand Colors

Light Blue Outline Example: UCR Brand Colors

Medium Blue Example: UCR Brand Colors

Medium Blue Outline Example: UCR Brand Colors

Dark Blue Example: UCR Brand Colors

Dark Blue Outline Example: UCR Brand Colors

Brand Blue Example: UCR Brand Colors

Brand Blue Outline Example: UCR Brand Colors

Red Example: UCR Brand Colors

Red Outline Example: UCR Brand Colors

Gold Example: UCR Brand Colors

Gold Outline Example: UCR Brand Colors

Orange Example: UCR Brand Colors

Orange Outline Example: UCR Brand Colors

Green Example: UCR Brand Colors

Green Outline Example: UCR Brand Colors

Arrow Example: UCR Brand Colors

Unordered and Ordered Lists

Drupal Default Unordered List
- Item 1
- Item 2
- Item 3
  - Subitem

Ordered List
1. Item 1
2. Item 2
3. Item 3
  1. Subitem 1

List Arrows Unordered List
- Item 1
- Item 2
- Item 3
  - Subitem 1

List Arrow Marks
- Item 1
- Item 2
- Item 3
  - Subitem 1

Pull Quotes

This is a quote from a famous person.

Callouts

Euismod elementum nisi quis eleifend. Eget aliquet nibh praesent tristique. Euismod lacinia at quis risus sed vulputate. Vitae tortor condimentum lacinia quis vel. Erat imperdiet sed euismod nisi porta. Mattis molestie a iaculis at erat pellentesque. Praesent elementum facilisis leo vel fringilla. Urna cursus eget nunc scelerisque viverra mauris. Vel elit scelerisque mauris pellentesque. Risus quis varius quam quisque id diam vel quam elementum. Ut sem viverra aliquet eget sit amet tellus cras. Ullamcorper velit sed ullamcorper morbi tincidunt ornare. Enim lobortis scelerisque fermentum dui.

Tables

Styled Tables

100% width with header on first row

Heading 1	Heading 2	Heading 3
Information	Information	Information
Information	Information	Information
Information	Information	Information
Something	Something	Something

100% width with header on first row using "No Stripes"

Name	Title	Phone
A. Smith	professor	827-xxxx
Mary Lamb	staff	827-xxxx
New Employee	staff	827-xxxx
New Faculty	professor	827-xxxx

Sortable Styled Table

100% width with header on first row. The sortable table will not work without a header row. After 10 entries, pagination starts.

Policy Number	Name	Date
90	Unknown	4/20/2020
100	Security	4/1/2018
101	Privacy	9/30/2020
102	HR	9/30/2020
102.5	HR Jobs	7/1/2019
103	HR	5/10/2019
103.5	Privacy	4/1/2018
104	Security	4/1/2019
105	Management	4/1/2020
106	Management 2.0	6/10/2022

Non Styled Table

When your cursor is in a cell, click on the "Styles" drop down and select "No Style".

Heading 1	Heading 2	Heading 3	Heading 4
Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell