Santa Clara University

CommonSpot Elements

Rich Text Editor: HTML Snippets

The Rich Text Editor includes a menu option called "HTML Snippets".

CommonSpot HTML Snippets

These are small blocks of HTML code that can be dropped into a page to create headings, floating tables for images and captions, and pull quote blocks. These snippets were created in order to make it possible to include headings, an important structural HTML component not otherwise presented in the editor, and small tables for images and pull-quotes that would be possible, but tricky, to build using the editor's interface.

Headings

HTML documents can be structured using heading tags. These tags are interpreted by the Web browser as defining the hierarchy and order of content within a page. There are six HTML heading tags, H1 is the highest level. The HTML snippets menu lists headings 3, 4, 5, and 6 for use within the content well. (Headings 1 and 2 are used within the site template).

Heading 3

Heading 4

Heading 5

Heading 6

The SCU Web site's global style sheet includes font size and color formatting attributes for each of the heading tags, which helps to ensure a standard look-and-feel across all sites.

Floating Image and Caption tables

To insert one of these snippets into a page, hit the enter key to create a paragraph break, then select the left- or right-aligned image/caption snippet.

Left-aligned

caption

Right-aligned

caption

Pull Quote

This HTML snippet is a right-aligned table that includes special formatting class assignments for the quotation and citation table cells:

"Quotation pulled from page content."

-Citation

Features - Content Well and Right Column

The "features" snippets can be used to apply special formatting to content in the main content well or right column:

If no image is available, delete this column.

Title (heading 4)

Subtitle (heading 5)

By default, the content well feature uses teal background and border color settings. To change the color format to yellow or blue, switch to Author mode and right-click in each table cell. Select "cell properties", and change the Style Class settings.

If the feature does not include an image, the left column should be deleted. (Right-click in the left column, then select "Delete Columns") Otherwise, select a new image from the Image Gallery and delete this text.

Add link to additional content, if needed

Title (heading 5)

Subtitle (heading 6)

By default, the right column feature uses yellow background and border color settings. To change the color format to teal or blue, switch to Author mode and right-click in each table cell. Select "cell properties", and modify the Style Class settings.

Select or upload a new image using the Image Gallery, or delete the placeholder image.