how do i brand my canvas instance

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

TweetTweet 1 0 13

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

Subscribe to our feed

search

ChaptersAccounts and Sub Accounts 13

Admin Tools 4

Analytics 3

API 3

Attendance (Roll Call) 3

Authentication 1

Computer Specif ications 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 ResourcesRead 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 ManualsUpdated 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 UpdatedFeb 03, 2014

Dow nload Lesson PDF

Dow nload Manual PDF

Other ResourcesGetting 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.

0LikeLike


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" certif ication 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 StartedTo brand your ow n instance of Canvas, you'll need a few things to get started:

Branding f iles: CSS override f ile

Image f iles: 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 f it 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

Zoom

Use the follow ing steps to brand your account (dow nload a sample header logo):

1. Use the CSS override f ile as you create your ow n CSS file for the site. The f ile 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.

2. Build your custom imagery using the provided images as templates for size.

3. From your General Account Management Page, go to Settings and see the Global JavaScript and CSS includes box: GlobalCSS.jpg

4. Paste a global URL directed to the override.css that you have modif ied 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


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:

1. Modify the Desktop CSS code below to adapt to your institution.

2. Make any changes to your JS code if you w ant to change the login label.

3. Add your modif ied code to your overrides.css f ile.

4. 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 image]

/*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


TweetTweet 1 0 13

If your institution is using Canvas authentication or LDAP, you can create a new set of mobile Javascript/CSS rules specif ically 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:

1. Modify the Mobile CSS code below to adapt to your institution.

2. Make any changes to your JS code if you w ant to change the login label.

3. Add your modif ied code to your overrides.css f ile.

4. 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 f ields*/

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;

}

.f lip-to-back, .f lip-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 */

f ilter: 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.

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 [email protected]. Thank you.

Name*

Email*

0LikeLike


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?

Submit

Privacy & Terms

Type the text

how do i brand my canvas instance

Documents