Snippets & How to Use Them
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.
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.
Current Snippets
Profile Card
Contact Us
Display contact information for your department. Place in the sidebar section.
Basic Info Cards
Use this card to display an image and brief information. Each card can be linked.
Grid Layout
Horizontal Link Bar with Icons
Image with Caption
Manual Calendar Cards
Tiles with Icons
Upcoming Event Cards
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
Contact Us Example - Only Use In Sidebar
Contact Us
Training Resources
706-867-5309
Register for Intermediate training
Please do not use periods (.) in your phone number, only use dashes (-).
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
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
Admissions
Faculty Directory
Campus Maps
Upcoming Event Cards Example
Shepheard Blood Drive
- 06/29/2021
- Allgood Hall Parking Lot
The bloodmobile will be on campus in support of Ronald McDonald House.
Modern Campus CMS Study Session
- 12/05/2021
- Professional Building One
We will study and go over quick tips.
Homecoming
- 02/10/2022
- Douglas Barnard Amphitheater