Customizing
Canvas through
Javascript and CSS
Canvas Customization
NEIT Switched to Canvas last April
Consistent “Customized” user experience
Brand our courses and departments
“Manage” course development process
• 350 full and part time faculty
• Short amount of time
• Streamline and manage course setup
• “Policy” decisions regarding the setup and use of the
system
•
•
•
•
Canvas Customization
Custom Home Page
Custom Home Page
Help Page
Customization of the Modules Page
Tabs
How Does This Work?
Separation of Powers
From Canvas:
• HTML – Page Content & Structure
From Canvas and Customer:
• CSS – Appearance
• Javascript – Behaviors
– (can include changing page content and
structure)
• Multiple CSS and Javascript
components can be loaded separately,
from entirely different locations
Plugging In Your Own Code
CSS vs. JS
• Appearance (CSS)
– Hide the Conclude Course
button
– Branding and term/week
banner graphic
– Improve Modules page
aesthetics
– Hide Syllabus Tool
• Behavior (JS)
– Hide the Delete Course
button except for admins
– Add/change links and other
structure to the page
• Nav links in banner
• Rename left-hand navigation
items
• Add Twitter feeds to
Dashboard page
– Make requests for
supplemental information
• Feature Week section
• Announcements box and
"unread" indicator
– Activate "tabs"
A CSS example: Hide Delete Course Button
1) Chrome Developer Tools helps identify the structure you'll select for in CSS
A CSS example: Hide Delete Course Button
1) Chrome Developer Tools helps identify the structure you'll select for in CSS
2) Style settings go into your local CSS file
A JS example: Show # Unread Announcements
Use Canvas API to:
1) Retrieve all
announcements
for a user
2) Count unread
3) Add a new
element to page
This code is available
at:
http://pastebin.com/9
ghxPMkJ
Some CSS Is Built-In
Canvas Styleguide: https://[your_canvas_url]/styleguide
Some JS Features Are Built-In (with a little help from you)
Canvas Styleguide: https://[your_canvas_url]/styleguide
Canvas HTML Whitelist
https://s3.amazonaws.com/tr-learncanvas/docs/Canvas_HTML_Whitelist.pdf
Gotchas and Maintenance
• Canvas changes frequently
– BUT…things break infrequently (once in eight months
we've been in production)
– Quick-check beta release site every ~2 weeks
• when you get the Beta Release Notes
• Change only as much as you must, and don't get
too clever!
• Use good error-handling practices in your JS code
(try/catch, etc)
• Controlling load order is non-trivial
• The browser wars are not over (test in several!)
Thank You
Tom Thibodeau
[email protected]
Denise Gautreau
[email protected]
Larry Bouthillier
[email protected]
URL for Announcement Count:
http://pastebin.com/9ghxPMkJ