Snippets tool to insert HTML layout features

Snippets is a plug-in tool in Canvas that provides ready-made HTML code snippets to display items such as buttons, buttons with links, page layouts, among others. Since Snippets is a third-party tool, it comes with various naming conventions, categories, structures etc, that are 'part of the package' and not possible for us to change.

 

The Snippets tool is part of the Rich-Content Editor (RCE) in Canvas, and is available whenever you are editing a page, a discussion or an announcement. We illustrate the tool while editing a page.

If you wish to create a new page, click on Pages on the course navigation menu, then View All Pages, and then +Add Page; alternatively opt to edit an existing page.

Click on Edit. Then select the 'plug-in' icon. If you don't see Snippets, then click View All:

Select Snippets.

 

You will see a list of four categories:

  • My Snippets: Provides an HTML editor for you to create and save your own HTML snippets, for later re-use (these snippets are stored in your web browser, so you might like to back them up on your computer)
  • Institutional Snippets: Oxford-specific items  
  • Shared Snippets: Default items that are part of the plugin tool, shared with other users
  • Canvas Snippets: Based on Canvas default items, some of these are called ‘primary’, ‘secondary’ etc. according to the international Canvas style guide.

Note: The structure and naming conventions were chosen by the developers of this third-party tool (and thus cannot be changed only in the Oxford version).  

 

Browse the categories to see what code snippets might be useful in buidling your HTML page. All the snippets shown in all categories are available to us at Oxford University.

 

For some snippets, the preview shown on the right-hand side of the tool does not show the actual layout, e.g. two-column page layout. The best thing to do is to Insert a selected snippet, then Save the page. This will display the actual format of the selected snippets – buttons, columns, images etc.

You may need to go into the resulting HTML code in your page, for example, to insert a line break or horizontal rule after a snippet, in order to continue adding to the page. Switch to the HTML editor by clicking on the </> option below the edit window. Then position your cursor at the end of the code for the inserted snippet.

  • To create a line break, insert the break tag: <br />
  • To insert a horizontal line, insert <hr />

Then Save the page.