How do I brand my Canvas instance?

Click the account title link.

Click the Settings link.

Within the settings, locate the section on the Global JavaScript and CSS Includes page. 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.

We've spent a lot of time making sure that the user experience for Canvas is easy, simple, and intuitive, and we don't want to leave anyone out. In fact, Canvas received the "Gold" certification from the National Federation of the Blind, becoming the fastest LMS ever to do so. For this reason, we allow limited customization of colors and schemes.

Canvas conforms with the W3C's Web Accessibility Initiative Web Content Accessibility Guidelines (WAI WCAG) 2.0 AA and Section 508 guidelines.

The branding process is pretty straightforward:

1. Use the CSS in the next step to guide you as you create your own CSS file for the site. The file is heavily commented and will give you some good insights into naming conventions, sizes, etc. When your CSS file is complete, you'll want to post it somewhere that is accessible to both http and https requests.
2. Build your custom imagery using the images in the zip file as templates for size.
3. From your General Account Management Page, go to Settings and you will see the Global JavaScript and CSS includes box: GlobalCSS.jpg
4. Paste a global URL directed to the override.css that you have modified in the Global CSS URL field.
5. Your branding should be visible.

*Please note that you may need to use HTTPS for any URL located in the CSS file if you receive security warnings when viewing your branded Canvas instance in Internet Explorer.

Note: If you have courses that don't require a login, then you'll have to make sure that your header looks okay logged in and logged out.

Click here to download the CSS file.

Click on the links for other logo files: Canvas color logo, Canvas gray logo, and Canvas white logo.

Click here to download a sample header logo.

/* Replace the gray background with something that matches your colors. You can use .pngs with alpha transparency. If you don't use an image, you need to remove ours*/

#header {

background: url("noisy_blue.png?v1") repeat-x scroll center transparent;

/* OR background-image: none;

background-color: #EBF5FA;*/

}

/*replace the canvas logo with your logo*/

#header-logo, #header.no-user #header-logo {

background: url("header_logo.png?v1") no-repeat scroll 0 0 transparent;

bottom: 0px;

height: 70px;

left: 15px;

width: 191px;

}

/*if you replace the left canvas logo, move a smaller one to the right side of the header--I made the image gray first*/

#header-logo-secondary {

background: url("header_canvas_logo2.png?v1") no-repeat scroll 0 0 transparent;

bottom: 11px;

height: 26;

position: absolute;

right: 26px;

width: 135px;

display: block;

}

/*if your logo is bigger, you can make room like this*/

#menu { margin-left: 200px; }

/*change the identity bar (the area that says "Hilary Scharton Inbox Settings Logout Help)*/

#identity {

background-image: none;

background-color: #A1C42E;

}

/*change the color of the identity text*/

#identity a { color: black; }

/*change the color of the circle around the number of unread inbox messages*/

#identity .inbox a .unread-messages-count { background-color: #F2F0DD; }

#identity #identity-help-container a { color: black; }

/*change the color of the menu items (courses & groups etc.). If the text looks fuzzy, remove the text shadow.*/

.menu-item .menu-item-title, .menu-item .menu-item-no-drop {

color: #FAFBF4;

text-shadow: none;

}

Don't forget to click the Update Settings button at the bottom of the page to update the CSS of your instance.

You can also customize the login page graphic as well. Click here to download a sample login box image.

Note: In the CSS file, this step: #modal-box { background: url("Slide1.jpg?v1") no-repeat !important } should read: #modal-box { background: url("login-bg.jpg?v1") no-repeat !important }.

The following are the steps to create a custom login page.

• Save the original 'login-bg.jpg' image from your site.
• Modify the original image to look like you want. Since you can't modify the HTML on the login page without global Javascript, it is easier to add information to the image direct. For example, if you want to add your institution's help desk number or some other form of contact.
• Add the following CSS to your overrides.css file (the pieces you'd like):

/*login box*/

#modal-box.login-box { background: url("Slide1.jpg?v1") no-repeat !important }

/*this will remove the extra canvas logo*/

body.modal #modal-box.login-box h1 {

background: none;

height: 235px;

}

/*resize the login box to fit my image and change the color of 'stay signed in'*/

body.modal #modal-box.login-box {

height: 435px;

width: 610px;

color: #2784A0;

}

/*change the color of 'don't know your password'*/

body.modal #modal-box.login-box a { color: #2784A0 !important; }

/*change the color of the login button*/

body.modal #modal-box .button, body.modal #login-box .button {

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;

}

Click here to return to the Accounts and Sub-Accounts chapter.