[ARCHIVED] FastTrack: Canvas Admin - Ep. 7 Custom CSS

[lstark]

The "FastTrack: Canvas Admin Video Series" is a quick video guide for Canvas Administrators to learn about a few of our admin level tools and how they can be shared with Instructors and Students. This series is designed to continue to help with driving adoption and engagement of all the features of Canvas.  For the next 20 days we will present a new 2 1/2 - 3 minute video to the Community. Everyone is encouraged to reply and share their personal insight, experiences, and advice.

Episode 7 is a 5 minute video about Custom CSS in Canvas and how it can be utilized to allow Canvas Administrators how to remove the colored background from a course tile on the Canvas dashboard.  The technique being demonstrated is applicable to any custom branding you may want to try in Canvas.  So with that in mind, it may seem limited to what it can do and may not meet all of your institutions needs.  Thank you to Deactivated user for sharing his knowledge with the community!

This video is currently being processed. Please try again in a few minutes.

[mcowen]

These are the URLs referenced in the video:

How do I upload custom JavaScript and CSS files to an account or sub-account?

W3 schools - CSS Tutorial

Codecademy - https://www.codecademy.com/learn/learn-html-css

Canvas Guides

This is the code created at 3:14 in the video. It hides the the color overlay whenever an image is used on the course tile.

/* Hide the color of the tile on the dashboard when an image is being used on that tile */

.ic-DashboardCard__header_image .ic-DashboardCard__header_hero {

background:none !important;

}

Disclaimer  - As always, make sure you test this, and any code, in your test or beta environment to make sure it behaves as you desire before putting it into production.  Also, if you don't understand or can't maintain the code, please don't use it. I have no plans to update it in the future if things change in Canvas. This is 100% unsupported. Use at your own risk. --- End Disclaimer

[Stef_retired]

Deactivated user​, thank you for this informative walk through the process of writing a piece of custom CSS, and especially for giving an example that so many would find helpful. I have a few questions about removing the color overlay:

(1) If a teacher selects an image with a white background, does the edit pencil on the course card essentially disappear? Or does the edit pencil change color so that it's still visible?

(2) If this custom CSS is applied to the account, how does it affect the colors for the same courses on the Calendar?

(3) If the color overlay is removed from course cards with images, how does this affect the same course cards on mobile?

I'll definitely give a shout-out to this video in my CanvasLIVE​ Add Images to Your Course Cards​ quick demo later today.

Thanks!

[mcowen]

Great questions!

1) The pencil still displays over the image in its usual white color. If the image is white, then the edit pencil will not be able to be seen. It is still there and clickable, but white on white would not be easily seen.

2) The color on the calendar doesn't change. Notice the pink bar in the bottom of this image. That's the same color in the calendar.

3) This CSS has zero effect on anything in the mobile APP.  The mobile browser experience has the same branding as the desktop.

I hope this helps!

[Stef_retired]

Deactivated user​, I'm getting an error message when I try to view the image of the course card with the white image. Can you post it differently?

[mcowen]

Fixed. Thanks for pointing that out.

[schachernp]

Nice job and very informative!!!  Thank you for this!!