You are on page 1of 5

Canvas Guides Canvas Admin Guide How do I brand my Canvas instance?

Like 0 Tw eet 1 13 0 Subscribe to our feed

search Chapters
Accounts and Sub Accounts 13 Admin Tools 4 Analytics 3 API 3 Attendance (Roll Call) 3 Authentication 1 Computer Specifications 8 Courses and Sections 14 External Apps (LTI) 7 Grading Schemes 4 Integrations 5 Languages 3 Outcomes 10 Question Banks 6 Reports and Statistics 2 Rich Content Editor 3 Roles and Permissions 8 Rubrics 5 Settings 8 SIS Imports 4 Terms 6 Users 17 Support Information (Zendesk) 7 Frequently Asked Questions 3

Cant find what youre looking for?


Ask the community Request a Feature File a Ticket

More Resources
Read Release Notes View a Webinar Participate in CanvasLIVE! API Documentation Edu App Center

New to Instructure?
Learn more Sign up for a demo Visit us on facebook Follow us on tw itter

Download Manuals
Updated on 03/01/2014 Getting Started Canvas Student Quickstart Guide Canvas Instructor Quickstart Guide Canvas Student Guide Canvas Observer Guide Canvas Instructor Guide Canvas Designer Guide Canvas Admin Guide Updated on 01/18/2014 Canvas Mobile Tablet Student Guide Canvas Mobile Tablet Instructor Guide Canvas Mobile Tablet Admin Guide Canvas Mobile Phone Student Guide Canvas Mobile Phone Instructor Guide Canvas Mobile Phone Admin Guide

Last Updated
Feb 03, 2014 Dow nload Lesson PDF Dow nload Manual PDF

Other Resources
Getting Started Getting Started Canvas Student Quickstart Guide Canvas Instructor Quickstart Guide Canvas Guides Canvas Student Guide Canvas Observer Guide Canvas Instructor Guide Canvas Designer Guide Canvas Admin Guide Mobile Guides Canvas Mobile Phone Student Guide Canvas Mobile Phone Instructor Guide Canvas Mobile Phone Admin Guide Canvas Mobile Tablet Student Guide Canvas Mobile Tablet Instructor Guide Canvas Mobile Tablet Admin Guide Video Tutorials Canvas Video Guide Canvas Course Collections Collection 1: Audience and Content Collection 2: Features and Tools Collection 3: Designs and Strategies Collection 4: Course Templates

Translate Select Language


Pow ered by

Translate

(Optional) Lesson Feedback


(optional) Prev: How do I change self-enrollment settings for my account? Next : How do I brand my sub-account?

How do I brand my Canvas instance?


You can brand certain elements of your Canvas instance to match your institution's colors and logo. We allow limited customization of colors and schemes, mostly because w e don't w ant to leave anyone out.

guides.instructure.com/s/2204/m/4214/l/41896-how-do-i-brand-my-canvas-instance

1/5

We've spent a lot of time making sure that the user experience for Canvas is easy, simple, and intuitive. In fact, Canvas received the "Gold" certification from the National Federation of the Blind, becoming the fastest LMS ever to do so. Canvas conforms w ith the W3C's Web Accessibility Initiative Web Content Accessibility Guidelines (WAI WCAG) 2.0 AA and Section 508 guidelines. Note : Branding is not available for tw o-w eek trials or Free-For-Teacher accounts. Mobile branding is only applicable to institutions w ith Canvas authentication. Click here to view a video about branding Canvas.

Getting Started
To brand your ow n instance of Canvas, you'll need a few things to get started: Branding files: CSS override file Image files: Canvas color logo, Canvas gray logo, or Canvas w hite logo Know ledge of CSS An admin account on Canvas Personalized branding on your Canvas instance is kind of like an after-market exhaust on your car. The updates to core Canvas might make it so your branding doesn't fit right and w e don't provide support for that. Note: Please remember to check your branding on your institution's beta instance. Also, be sure to host your CSS on a secure site, otherw ise it may break w hen trying to load.

Locate Account

Click the account title link.

Open Settings

Click the Settings link.

Locate Global JavaScript and CSS Includes Section

Locate the Global JavaScript and CSS Includes section heading. Paste your new global CSS URL in the Global CSS URL field to brand your sub-account(s) [1]. Note : To enable sub-account branding, an account admin must select the Let sub-accounts define additional includes [2] checkbox below the global CSS URL in the account settings.

Customize Canvas Account

1. 2. 3. 4.

Zoom Use the follow ing steps to brand your account (dow nload a sample header logo): Use the CSS override file as you create your ow n CSS file for the site. The file is heavily commented and w ill give you some good insights into naming conventions, sizes, etc. When your CSS file is complete, you'll w ant to post it somew here that is accessible to both http and https requests. Build your custom imagery using the provided images as templates for size. From your General Account Management Page, go to Settings and see the Global JavaScript and CSS includes box: GlobalCSS.jpg Paste a global URL directed to the override.css that you have modified in the Global CSS URL field. *Please note that you must use HTTPS for any URL located in the CSS file to avoid view ing brow ser security w arnings. Note: If your instance hosts courses that don't require a login, verify your header appears correctly in your beta environment w hen logged in and logged out.

Update Settings

Click the Update Settings button at the bottom of the page to update the new code in your account.

Customize Desktop Login Page

guides.instructure.com/s/2204/m/4214/l/41896-how-do-i-brand-my-canvas-instance

2/5

1. 2. 3. 4.

You can create a custom desktop brow ser login page for your institution. Remember you can't modify the HTML on the login page w ithout global Javascript, such as if you w ant to add your institution's help desk number or some other form of contact. Note : We recommend that you do not use a background image as it w ill conflict w ith other areas of your instance, such as adding apps and plugins. To create a custom desktop brow ser login page: Modify the Desktop CSS code below to adapt to your institution. Make any changes to your JS code if you w ant to change the login label. Add your modified code to your overrides.css file. Test your code in your institution's beta environment. DESKTOP CSS CODE [Code for login background color] /*change the background color and the color of 'stay signed in'*/ #modal-box.login-box { background-color: #000000 !important color: #2784A0; } /*this w ill remove the extra canvas logo*/ body.modal #modal-box.login-box h1 { background: none; height: 235px; } [If you are not using a background color, use this code for login background im age] /*change location of image and resize to match image height and w idth*/ #modal-box-inner { background: url(https://s3.amazonaw s.com/account/myimage.png?v1) no-repeat; height: 400px; w idth: 680px; /*adjust to move image to left and top*/ margin-left: -15px; margin-top: -15px; color: #000066 !important; } /*change the color of 'don't know your passw ord'*/ body.modal #modal-box.login-box a { color: #2784A0 !important; } /*change the color of the login button*/ body.modal #modal-box .btn, body.modal #login-box .btn { background-color: #EBF5FA !important; background-image: none !important; border-color: #668F78; } #login_form .btn-primary, #login_form .btn-primary:hover { background-color: #ae5321; background-image: none; border: none !important; }

Customize Mobile App Login Page

guides.instructure.com/s/2204/m/4214/l/41896-how-do-i-brand-my-canvas-instance

3/5

1. 2. 3. 4.

If your institution is using Canvas authentication or LDAP, you can create a new set of mobile Javascript/CSS rules specifically for the mobile login page. Note : If your institution is using a type of authentication that does not display the Canvas authentication, the mobile app w ill continue to redirect to the authentication's page, w hich is not a part of Canvas so the code w ill not apply. To brand a mobile app login page for a Canvas or LDAP authentication institution: Modify the Mobile CSS code below to adapt to your institution. Make any changes to your JS code if you w ant to change the login label. Add your modified code to your overrides.css file. Test your code in your institution's beta environment. MOBILE CSS CODE /*change location of image the image URL*/ body{ background: url(https://hilary.instructure.com/images/blue/bg.jpg?1358195888); } /*update the background URL*/ #f1_container{ background: url(https://s3.amazonaw s.com/SSL_Assets/hilary/header_logok-12.png) no-repeat center top; } /*update the image URL*/ .face{ background: url(https://s3.amazonaw s.com/SSL_Assets/hilary/noisy_blue.png?v1); /*resize the border or shadow of the login page*/ border-radius: 0.3em; box-shadow : 0px 4px 10px #999; } /*resize the border or font w eight of the login fields*/ input{ background: #f3f3f3; border-radius: 5px; font-w eight: normal; } /*adjust the border, color, or shadow of the login button*/ button[type=submit]{ border: none; color: #fff; text-shadow : 0 -1px 0 #36629b; } .flip-to-back, .flip-to-front{ text-shadow : 0 1px 0 #fff; border: none; border-radius: 6px; background: #dddddd; /* Old brow sers */ background: -moz-linear-gradient(top, #dddddd 0%, #f3f3f3 50%); /* FF3.6+ */ background: -w ebkit-gradient(linear, left top, left bottom, color-stop(0%,#dddddd), color-stop(50%,#f3f3f3)); /* Chrome,Safari4+ */ background: -w ebkit-linear-gradient(top, #dddddd 0%,#f3f3f3 50%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #dddddd 0%,#f3f3f3 50%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #dddddd 0%,#f3f3f3 50%); /* IE10+ */ background: linear-gradient(to bottom, #dddddd 0%,#f3f3f3 50%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#f3f3f3',GradientType=0 ); /* IE6-9 */ color: #888; } Click here to return to the Accounts and Sub-Accounts chapter. Like 0 Tw eet 1 13 0 Prev: How do I change self-enrollment settings for my account? Next : How do I brand my sub-account?

(Optional) Lesson Feedback (0)


Please let us know if any information in this lesson appears to be incorrect in terms of Canvas functionality only (please do not submit feature requests here). This is not a help site, and responses will not be answered. If your Canvas course/account is having trouble completing any of the tasks outlined in this lesson, please contact Canvas Support by submitting a HELP TICKET via the Help Link within Canvas or emailing support@instructure.com. Thank you.
Name* Email*

guides.instructure.com/s/2204/m/4214/l/41896-how-do-i-brand-my-canvas-instance

4/5

How can w e improve this lesson to help you learn how to use Canvas?* Subscribe E-Mail me if a reply is posted Are you human?

Type the text


Privacy & Terms

Submit

guides.instructure.com/s/2204/m/4214/l/41896-how-do-i-brand-my-canvas-instance

5/5

You might also like