how do i brand my canvas instance
Post on 16-Oct-2015
24 Views
Preview:
DESCRIPTION
TRANSCRIPT
-
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
-
2/5guides.instructure.com/s/2204/m/4214/l/41896-how-do-i-brand-my-canvas-instance
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
-
3/5guides.instructure.com/s/2204/m/4214/l/41896-how-do-i-brand-my-canvas-instance
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
-
4/5guides.instructure.com/s/2204/m/4214/l/41896-how-do-i-brand-my-canvas-instance
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 support@instructure.com. Thank you.
Name*
Email*
0LikeLike
-
5/5guides.instructure.com/s/2204/m/4214/l/41896-how-do-i-brand-my-canvas-instance
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
top related