[ARCHIVED] Cool branding?

[John_Lowe]

Who is doing something cool with branding on their sites?

If you are, what are you doing that's cool and different, and how difficult has it been to keep updated as Canvas updates their own CSS?

[jnuckles]

We have about 12 different themes that change based on the holiday or season. A few of the images and colors swap out based on the current date, so other than the initial setup, it hasn't been a problem for us to maintain. We didn't modify any of the interface elements, like buttons so changes haven't required us to make any updates yet.

[John_Lowe]

This may be a dumb question, but what is that "Resources" drop-down? 

[jnuckles]

We added the Resources menu. It has links to various college resources like the library and tutoring.

[bdoran]

Jeff,

I have always loved and reference your teams evolving branding as a great way to keep Canvas' instances "fresh" and engaging for it's users~

[lbouthillier]

We've done a lot of customization using CSS and JS. 

• added links back to Canvas Home and Student Portal to the header
• added term/week display to header (we have 10-week quarters, and "week numbers" are like a term-clock for students and faculty both)
• background image and color
• Some other stuff - added full course title to breadcrumb bar, unread announcement indicator, etc.

All in all, there's been only one maintenance update that affected our CSS over the ~10 months we've been in production with Canvas, and it was a simple fix.  We do a quick check in the betas when they come out, and it's been trouble-free.  You do need a front-end developer who's tasked with checking on it regularly.

.

[John_Lowe]

Would you be willing to share your global CSS and JS files with us to look at,  @lbouthillier ​?

[clong · Accepted solution]

Hi John,

Great idea starting this thread! I like our branding but it's nothing extravagant. I want to change it seasonally and have some fun themes like jnuckles shared, it seems that there are always other things on my to do list so I haven't gotten to it yet. I'd really like to have our students design these so I need to find the right group of students to work with.

Anyways, here's what our looks like now

Tip: if you Google the institutions name and Canvas you can usually find their login page for Canvas and once you are on that just use Chrome's  Developer Tools (right click on page and choose "Inspect Element")  to bring up the Developer counsel as shown below

From there look on the Sources tab and you want the one that is not hosted on instructure.com in this case it's content.neit.edu -- drill down until you find the file ending in .css from there you can right click on it and bring up the css in a new tab.

Here's the link for New England Tech's CSS posted pictures of above. You should also take a look at their Java Script file because a lot of what he showed depends on modifying this. Great stuff!

https://content.neit.edu/css/global-neit-canvas.css?v=124

https://content.neit.edu/css/global-neit-canvas.js?v=124

 @lbouthillier ​ do you have any public courses or a course template file that you could share. Really like the home page design of that course!

[lbouthillier]

Sorry for the long delay - I'm fine tuning my notifications in this platform and I went from way-too-many to none.

Here's a public course:

Welcome to Online Student Orientation

[Landmark_Coll]

Hi Larry,

I'm particularly interested in adding the current semester week number to our pages as you have done. This will be my first foray into adding custom JS and CSS into Canvas. I do have admin access and also have access to web server space outside of Canvas.  Would you kindly share the steps necessary to accomplish my goal?

Thanks in advance.

[bschneider]

You can find the source on github in this repo (canvas-contrib).

[clong]

Thanks Brent, there's some great stuff over there!

[Chris_Hofer]

 @bschneider ​ (CC  @kenneth_larsen ,  @travis_thurston ) or anyone else reading...

If we use the code for "add_global_nav_links", is it possible in the dropdown menu for some URLs we include to only be seen by users with the "Teacher" role while other links in the same dropdown menu should be seen by users who have either "Teacher" or "Student" roles?

Or, if the menu item name (such as "Resources") with it's sub-menu items can only be shown to specific groups of people (Teachers, Admins, etc.) similar to how "Commons" works (where students cannot see "Commons"), that would be fine, too.

[kenneth_larsen]

 @Chris_Hofer ​, I am not exactly sure what code you are using for your "add_global_nav_links", but if you want to target users with a specific role, you can take advantage of the ENV JavaScript variable that exists in Canvas. Here are some examples:

if ($.inArray('student', ENV.current_user_roles) !== -1) {
    // Run code you want students to see
}
if ($.inArray('teacher', ENV.current_user_roles) !== -1) {
    // Run code you want teachers to see
}
if ($.inArray('admin', ENV.current_user_roles) !== -1) {
    // Run code you want admins to see (or something you just don't want anyone else to see)
}

This variable doesn't include any custom roles at an institution, but it is very helpful for student/teacher/admin situations.

[Chris_Hofer]

Hey there,  @kenneth_larsen ​...

I was looking at the code that  @bschneider ​ had referenced in his link above...specifically this: canvas-contrib/Branding/JavaScript/add_global_nav_links at master · kajigga/canvas-contrib · GitHub   Using this code and your examples you've provided, is this still possible?

[kenneth_larsen]

The code that you referenced is geared toward the old UI. There has been some discussion about links for the new UI at Links new Canvas UI​ and at Has anyone been working on scripts for the new Beta UI?. There is some code there that I put together to add a single link to the navigation in the new UI but not a dropdown menu. I would love to figure out how to add a popout nav as well but I haven't had time to figure it out.

[Chris_Hofer]

ok.  Yup, understood about the current (old) UI vs. the new UI.  We've not made the transition to the new UI yet (and probably will not for quite a while), so having a drop-down right now would work well for us.

[harker]

As always, Kenneth you ROCK! and now with Kware, your famous.

[229780]

I am no longer at this institution but this is the branding I developed. I am currently working on branding for my new institution:

[harker]

These are all great ideas. Here is our minimalistic approach to our Canvas instance:

We wanted something simple with our design. We have gone as far as to custom the identity bar by removing the settings text link (we thought the link confusing and redundant as the user's name takes them to the profile settings too.), adding a user icon, making the help link look like a tab, and include a tab for first time users (student orientation & faculty orientation) link.

The QuickLinks is a custom dd menu. We will be discontinuing it this summer.

[bschneider]

Looks like the UI presentation layer is going to go through a major design change here shortly.

Announced in the release notes below and I've seen some mentions from Instructure Con.

InstructureCon Release Notes (2015-06-17)

[canvas_admin]

Here's what our current login page looks like without the new UI turned on:

Here's a sample of something we are testing for the new login with the new UI turned on (which we plan on turning on January 2016):

We're also going to be doing an instructional design overhaul within our courses with the use of kennethware​ that is going to look like this:

[fosterl]

I'd like to revive this thread now the the new UI is in use (or will be soon) almost everywhere. We plan to turn on the new UI on 6/15/16 and are testing things now. One possibly dumb question I have is: if we have more than one JS file we need to use, do I just concatenate them? We have the ReadSpeaker integration, which uses a JS file, and I want to do some branding stuff, specifically adding the Resources drawer for extras like Library links, or maybe the "add hide help links for new UI".

Any clues to how to proceed would be great!

[clong]

Hi Lindy, in the new UI you use the theme editor to upload custom CSS and Javascript to a global file. So just like you can have multiple entries in your CSS file you can do the same for your JS file. Your Global JS file should have all the customized JS you'd like to use in your Canvas instance.

[kenneth_larsen]

 @fosterl ​, you can combine all of the JavaScript into one file, just be aware that errors in your JavaScript will prevent anything after that error from running. If you have a secure server where you can store files, you can also use jQuery to load additional files using getScript().

$.getScript( "https://url/file.js""> );

You can use this to load multiple files without the need of combining everything into one.

[fosterl]

Thanks Kenneth, that answers my last question. I will give the jQuery solution a try when I have time as well!

[matt5834]

Hi-

This thread is great!

I've done a fair amount of customization of the login page but I am having difficulty resizing the logo area so that it will display my logo larger. Does anyone know the CSS class I should be targeting?

Thank you!
Matt

[ryan_hobbs]

Have any of you relabeled your Canvas instance with a different name, other than Canvas?  If so, would you be willing to share what you call your "Canvas" platform?  What or how did you modify the labeling of the mobile apps?

This is something we are exploring, as we are looking to create a closer connection to the platform with our user community.  The current Canvas label is known, but not well understood.

Ryan

[nr2522]

Hi, Ryan.

I work at Columbia Business School. We have our own Canvas instance separate from the University. The University calls their Canvas instance "CourseWorks2". (The original CourseWorks was built in Sakai.) At the Business School, we just call it Canvas.

[tdelillo]

I know you've probably considered this, but do you use Canvas support, or use the default Help links to the Canvas Community/Guides? I ask because I have seen questions in the "Answers" section of the Community that say the person is having trouble with [insert unfamiliar name], and it's always a head-scratcher as to whether they're referring to some external tool, and if their institution refers to Canvas in general as [unfamiliar name]. Which leads to confusion for both the person asking the question and the people trying to answer the question.

[kmeeusen]

I may be an old stuffed shirt, but unless a school is using the open source Canvas, and hosting on their own servers, renaming the product seems to me like trying to claim ownership where ownership is not due.

Canvas is a great product, and we are proud to fly its flag.

As at least one other person has noted, sometimes calling a rose by a different name can only lead to some serious confusion when seeking support. We have had several instances in the Community of students seeking help with Canvas, but they named it by their school's branding; and many, including myself, thought they were asking about some third party integration.

Just my $0.02 worth!

KLM

[jnuckles]

When you change LMS's 3 times in 10 years, using a consistent name and branding makes a big difference in transitioning. Our help desk system is Zendesk but we don't tell people that it's Zendesk, in fact very few companies keep the brandname on the tools that they use to support customers. Customer's shouldn't have to know the names of products that we use to provide them with the services. Unfortunately, the inability to rebrand the Instructure apps resulted in pretty low usage for us initially. We've done some advertising with QR codes and have turned that around over the last year though.