Skip Navigation

Style Guide

Content Editing

There are many ways to help you organize your content. Below you will find a description of the tools offered by SiteExecutive as well as an overview of other features you can add to your pages.

Site Executive Toolbar

In order to style your page you will need to do so from SiteExecutive's toolbar.

SiteExecutive Editing Toolbar

Content Formatting

SiteExecutive offers some default tools, including:

Default Formats - Headings (Headings Icon)

Headings can be picked from the Format dropdown. They should be used for outlining the different sections of your page, if you would like to highlight a particular sentence or word use [#] modifiers or contact our web team for advise.

Example of Headings

Heading 1

Heading 2

Heading 3

Heading 4

Normal Text

Modifiers

Modifiers will help you change the style of a particular word or sentence within a paragraph

Examples of Modifiers
  • The following text is Bold and therefor important (B icon) (strong markup used)
  • Now this is in Italics which is used to emphasize (I icon) (em markup used)
  • And this piece is Underlined (U icon) (u markup used)
  • However this one is Overstruck (ABC icon) (strike markup used)
  • Now Over here we have subcript text: H2O (Subscript Icon) (sub markup used)
  • And also superscript text: f(x)g(x) (Superscript Icon) (sup markup used)
  • For computer code such as: <!DOCTYPE html>  we use the class code

Insert Special Content

Lists

If you have a list of items such as steps, useful links or a names; you can use the Ordered or Unordered list buttons to create a numbered or bulleted listed respectively.

Example of an Ordered Lists (Ordered List icon)
  1. Lorem ipsum dolor sit amet
  2. Consectetuer adipiscing elit.
  3. Aliquam tincidunt mauris eu risus.
  4. Vestibulum auctor dapibus neque.
Example of an Unordered Lists (Unordered List icon)
  • Lorem ipsum dolor sit amet
  • Consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.

Blockquotes (Blockquote Icon)

Blockquotes will by default have additional padding on both sides but are no different form the rest of the copy.

Example of a Blockquote

Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus.

Here is a paragraph in a standard blockquote. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

— Edgar Allan Poe

Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus.

Special Characters (Special Character Icon)

There are certain characters that are not easily accessible through your keyboard. These type of characters can be found by selecting this option.

Examples of Special Characters

Copyright symbol: ®

Trademark: ™

M Dash: —

Horizontal Rule (Horizontal Rule Icon)

A horizontal rule defines a thematic change within your content, i.e. a shift of topics. A good example of this is listing bibliography or your sources.

Example of a Horizontal Rule

Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus.


  1. "Romeo and Juliet", William Shakespeare
  2. "Les Misérables", Victor Hugo

Tables (Table icon)

Tables should only be used to display tabular data.

Example of a Table

Bloomberg School Fees 2012-2013

Enrollment Deposit$600Required for all admitted degree candidates. It is applied to your student account as a credit toward all tuition and fees assessed upon enrollment.
Application Fee$45Applies to degree seeking students only. It is $45 per application.
Matriculation Fee$500A one-time fee for all new degree candidates to offset costs associated with registration, record keeping and graduation. (Please note: This fee is separate from the enrollment deposit.)
.........

Styling

Introductory Paragraph

This can be a small paragraph at the beginning of your page, after the Heading 1. An introductory paragraph is setup by right clicking on a normal paragraph and selecting the class intro from the Class dropdown menu. You can view the Introductory Paragraph in use in the following pages Admissions, and Dean's Biography.

Example of an Introductory Paragraph

Title

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus.

Images

To properly place an image within the content you are required to apply one of two classes to them block_left or block_right. These classes will float the images to the left and right respectively but will also add the proper amount of padding around it.

When adding images try to add them to the beginning of a paragraph so that the top of the images lines up with the top of the paragraph. We have a set of standard sizes to help keep things consistent. you can view them here.

Example of a Right Floated Image using the block_right class

Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus.

Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus.

Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.

Pull Quotes

In order to create a pull quote you must add the class pull_quote to the blockquote element.

  1. First you must quote a paragraph by clicking on the Blockquote button ( _ )
  2. Then right click on the quoted paragraph
  3. Go to the Properties
  4. Select quote_pull from the [#]element trail
  5. And then select pull_quote from the Class dropdown menu.

Add a Source

In order to add a source to your pull quote:

  1. Type the information in a new paragraph
  2. Right click on it
  3. Go to Properties
  4. Select source from the Class dropdown menu.
Example of a Pull Quote

Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.

Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus. Donec non enim in turpis pulvinar.

— Edgar Allan Poe

Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.

The following example is not yet available to users but can be added upon request.

Example of a Pull Quote

Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.

Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan, facilisis.

— David Mitchell

Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.

Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.

Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.