What are Snippets?

  • Snippets are pre-formatted HTML and CSS code that can be inserted onto a page via selection menus.
  • Once the snippet is inserted onto a page, the on-page content can be edited without affecting the original snippet.   
  • Snippets are created by Web Services. Any requests for snippets need to be made through the Web Work Request Form.

How to Insert Snippets

To insert a snippet, click the "Insert Snippet" icon, represented by a puzzle piece, on the toolbar.  A "Choose Snippet" pop-up box will appear.

Then, select from the list of options.

  • Note: the snippet will appear where your cursor was in edit mode. 
  • Edit the snippet like a table, adding and removing rows.
  • Follow any other instructions the individual snippet contains, noting which fields are optional.
  • Don't forget to publish images or your page for newly uploaded images to appear.

Contact Us

Training Resources

jengilmore@augusta.edu

Register for training

Current Snippets


How to Edit Tables & Table Transform Snippets

Tables and Table Transform Snippets can be edited in a similar fashion in Edit mode. Only use tables for data, not to design your page.

Please do not use tables for layouts of pages; instead, choose a table transform snippet or component and / or toggle off different sections of your template in properties mode.

Insert a Table

 

1. To insert a table, select the "Table" drop-down icon on the toolbar.

2. Then, hover over the "Insert Table" option, and select the number of rows and columns desired.

3. Upon selecting the table size, the table will be automatically inserted onto the page.

Change Table Properties

 

1. Once the table is selected, you can click the "Table Properties" option on the Table drop-down menu.

2. Clicking this button will bring up a pop-up box where users can modify the properties of a table.

In order to make tables change based on a user's screen size, you can add/change the class to the table.

3. Under "Table Properties," change the "Class" option to "Custom." In the blank field that appears, type "table", and click "OK".

Striped Table

 

You can also type "table table-striped" in the custom class field, to make the table responsive, with alternating colored rows.

Doing this makes tables more friendly to tablets and phones, but still can be difficult to view.

The web team recommends using tables sparingly to avoid the issue.

Table Cell Options

 

This menu contains three options, allowing users to edit specific and individual table cells. 

  • Cell Properties:  Brings up a pop-up box similar to the Table Properties pop-up box
  • Merge Cells:  Merges the selected cells together
  • Split Cells:  Separates a previously merged cell into its original cells

Table Row Options

The "Table Row Options" allows users to edit specific table rows.  This menu contains the following options:

  • Insert Row Before
  • Insert Row After
  • Delete Row
  • Row Properties
  • Cut Row
  • Copy Row
  • Paste Row Before
  • Paste Row After

Table Column Options

 

This menu contains three options, allowing users to edit specific table columns.

  • Insert Column Before
  • Insert Column After
  • Delete Column

Snippet Examples You Can Use

The following are examples of the current list of snippets.

Profile Card Example

photo of Eric Example

Eric Example

  • Web Developer
photo of Richard Rohl

Richard Rohl

  • Memelord


Contact Us Example - Only Use In Sidebar

Contact Us

Training Resources

867-5309

jengilmore@augusta.edu

Register for Intermediate training


Basic Info Cards Example

Only use the University Calendar for public university events

Do not create or use calendars on your own individual pages.

For meetings, use the Outlook calendar.

Use the faculty directory for faculty bios

Do not create a separate page for each faculty member.

Instead, link to the official Faculty Directory.

  Maintain Accessibility Standards

If you would like a refresher on Accessibility, feel free to sign up for the Accessibility Compliance course again.

Grid Layout Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis urna et augue vehicula tincidunt. Praesent et ante tellus. Morbi non ipsum commodo, dignissim lectus in, dapibus enim. Aenean et neque lorem. Mauris mi est, accumsan vitae porta sit amet, molestie sed ipsum. Duis fermentum augue vel quam vestibulum gravida. Suspendisse tempus ante vitae efficitur porttitor. Ut faucibus nunc malesuada arcu ultrices tristique.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis urna et augue vehicula tincidunt. Praesent et ante tellus. Morbi non ipsum commodo, dignissim lectus in, dapibus enim. Aenean et neque lorem. Mauris mi est, accumsan vitae porta sit amet, molestie sed ipsum. Duis fermentum augue vel quam vestibulum gravida. Suspendisse tempus ante vitae efficitur porttitor. Ut faucibus nunc malesuada arcu ultrices tristique. 

Horizontal Link Bar with Icons Example

Image with Caption Example

Always include an alt description for accessibility
A caption for the above image.












Manual Calendar Cards Example

August

12

4:30-6:15pm
Ed Commons, GB1120D

September

25

4:30-6:15pm
JSAC Ballroom

January

29

4:30-6:15pm
Ed Commons, GB1120D

February

26

4:30-6:15pm
JSAC Ballroom


Tiles with Icons Example

Upcoming Event Cards Example

Taco Party

Tacocat's House

123 Taco Lane / BYOT

OU Campus Study Session

Tomorrow

Your House

Study; Study; Study; Pizza; Study

Website

Bring Back Myspace

Facebook

Let's add all of the features we loved about Myspace and put them in Facebook.