Creating a "button" oriented syllabus page

Community Member
23 5 12.5K

Canvas is being introduced to my home institution next year and I am part of the transition team. During our training sessions with staff we aim to show them how to import the basics of a course syllabus into Canvas from a word document or pdf, of whatever form it is currently in. As part of this I routinely show them a course I am running live in Canvas and have done some more "advanced" things with, to which the question is always "how can I do that?". This page aims to be a brief overview of how to make a easy "button" oriented syllabus page.

The first thing to do is decide what you would like on your syllabus page. I like to keep it simple, with the lecturer and tutors names, and then a button linking to the content of each week, with finally an embedded pdf of the course handout that students receive in class, such as that shown below.

Example.PNG

Creating the "buttons" is the fun, but arguably most time consuming part of this process. There are websites such as Da Button Factory: online button maker which can be used to make nice looking buttons to save and load into Canvas like this one:

button.pngAnother way to do it is with Microsoft PowerPoint. By creating a slide which displays the layout of your button and saving it as a jpeg that you can import as a picture into Canvas. I have attached a template to this guide which you can use to make a button like the one below, all you need to do is add a picture and position it how you like.

Slide5.JPG

To add the buttons to Canvas I use a table to construct the page, which means that the different images are inserted in a table which keeps them aligned how I put them:working.PNG

Once you have the buttons aligned how you like, you can link them to whatever other part of Canvas or the internet. To send a button to an external website, highlight the button and click on "Link to url" in the rich content editor. This is great for sending people to your off-Canvas faculty page or other website.

In the example shown above, each picture is a button which takes the student to the module for each week of the course. In each module is any resource that was assigned to the students for that week such as links to readings, readings questions, lecture recordings, assignments, or anything else of interest. To do this, simply highlight the picture in the rich content editor and select whatever you would like to link it to from the "Links" tab in the "Insert content into the page" window to the right of the screen. Once you click on what you would like to link the page to, it will flash once. Once this is done, select "Update syllabus" and the link should work.

Module.png

You can make a button to any content within Canvas in this way. You could make one for an assignment which you have on the home page front and center in the weeks leading up to the assignment due date, or you could have a button to a module of revision topics when the exam is close. If you are going to make short-term changes to your home page, make sure to save a copy of the original in an unpublished page, that way you can always get it back easily without having to re-create the page.

Remember, any pictures you upload into Canvas will be available to be downloaded by students from the Files menu. If you would not like your buttons to be downloaded by students, but instead just viewed, you need to restrict the access to them. Information on how to do this can be found here: How do I restrict files and folders to students in Canvas?

Restrict.PNG

I hope this guide has been somewhat helpful to show you how to make a nice looking syllabus page which doesn't take too much time but looks impressive to your students and colleagues. If you have any questions please leave a comment or message me and I will get back to you.

5 Comments
Community Member

Right, you made that sound so easy, I'm off to make some buttons! Thanks, josh.emmitt@auckland.ac.nz​.

Community Member

Here's a short annotated list of online button generators...

Free Online Button Generators

I’ve only included places where you could generate buttons for free,

Then download as an image file, without having to make an account or send via email.

https://dabuttonfactory.com/

Widely recommended, super-easy to use, lets you add bubble effect

http://buttonoptimizer.com/

lets you embed icons in the button

http://www.glassybuttons.com/

Choose from pill, square, round shapes; glassy look

https://www.imagefu.com/create/button

Super-easy, lets you control rounding on individual corners, lets you add wave FX

http://www.bestcssbuttongenerator.com/

pretty plain, but super-easy, and you can get the button as css or html

http://css3buttongenerator.com/

Lets you control the attributes directly with code, which you type in

http://livetools.uiparade.com/button-builder.html

Lets you set the normal state, hover state, and pressed state

http://bootsnipp.com/buttons

Lets you add icons to buttons, generates a string of code, not a downloadable picture file

http://www.holshousersoftware.com/glass/

Surveyor

We have had some faculty reporting concerns that some buttons don't work with some mobile devices.  If this a valid concern?  Does anyone know how many mobile devices may not be able to use buttons?  All my mobile devices seem to use them with no concerns.

Thanks

Megan

Learner II

I love this example thanks Joshua.

Learner II

Hi Megan, 

I have found that using an image as a button worked well on mobile devices. But in my experience when using buttons, as found in this home sweet home post, they change into text with hyperlinks rather than displaying the button its self.

I found this post useful when using toggling buttons, but further down you can find information about making information viable or invisible on different devices.  

Hope this helps let me know what works for you.