We use Canvas as our LMS at the University of Houston Continuing and Professional Studies program for our online, blended, and web-enhanced courses. Our program word mark is large, and in the old UI, we had ample room to add it at the top of every Canvas page.
I have been wrestling with how to deal with this in the new UI. The thumbnail branding at the top of the left menu is fine for our campus UH logo, but completely unsuitable for a word mark like ours. The new UI includes a small area in the right column for a "larger" logo, but even that is simply too small to make our word mark recognizable and adequately brand our courses.
I have discussed this on several occasions with my Instructure rep, and I am sad to say he basically dismissed it by saying essentially "everyone else loves the new UI!" I was also told repeatedly that there would be no option for banners in the new UI, and I have seen similar kinds of statements from Instructure about other types of user requests related to the new UI in these posts. This is deeply disappointing.
So lacking ANY support from Instructure on how to deal with this issue, I tackled it myself, and I want to share my solution in the event others may be wrestling on their own with a similar problem.
I accomplished this with a minimal amount of CSS:
#fff url("https://url/of/logo.png") center 12px no-repeat;
I have NOT yet thoroughly tested this, because my request to my rep to enable custom CSS in my test environment is still pending. I may make further tweaks to the size and positioning of the logo. I also have not yet accounted for mobile responsiveness. But overall I think this solution may meet our needs.
I am using the
<body> tag as a selector, rather than a
<div> or a class further down in the DOM, because as far as I can tell, different pages in the new UI have a different overall structure, and there isn't any
<div> I can use as a selector that will show up on every page. I find this very strange. I'm used to working in CMS settings, such as WordPress, where a theme is built up with several containers, such as header, content, sidebar, and footer, and other common containers within those. If there is a consistent structure in the DOM of the new Canvas UI, I couldn't locate it. I couldn't find any comprehensive documentation on the CSS or the DOM for the new UI either. That left me with no other choice but to use the <body> tag as the only consistent selector that would appear on every page in the new UI, which is not optimal from a design perspective.
Overall this has been a pretty lousy customer experience. I'm sure some representative from Instructure will respond to this post or reach out to me directly with an "I'm sorry you've had an unfortunate experience ... but, hey, everybody LOVES the new UI!!!!" I'm tired of the cheerleading emails about how great the new UI will be. I'm beyond caring, because I have become convinced that absolutely no one at Instructure cares about helping me solve this problem. I just want to get on with testing this and rolling it out and be done with it.
So maybe if you're out there struggling on your own to solve a similar problem, I sincerely hope my little bit of CSS will be helpful to you.
Hi! I'm completely new to Canvas and hate to even ask, but where do I access the existing CSS file to edit the information? The only CSS file I can find is in our Theme Editor and it's one line - an imported file from the evaluation kit. Any thoughts? Thank you!
A brand new un-themed instance of Canvas allows for additional CSS overrides with a new .css file. If you have one that you've been working with, you can add to the css code after your EvaluationKit line.
Our institution is also an EK customer so it's very important that you leave the EK line alone and make sure it's the very first line.
We haven't had the need to override anything CSS-wise in our file just yet as the new UI theme editor takes care of most of the boilerplate customization, so our file basically consists of just that one line for EK integration.
Thanks so much! I feel the UI theme editor covers almost everything we're trying to do, but banner branding was on our list and when I saw this post I knew this is what I was looking for, but wasn't positive about how to execute. Again, thank you!
Hi! I'm back! I used the CSS provided and added it to my existing file, but I am unable to see the banner. The CSS is creating the banner space at the top and adjusting padding, etc. so there is a change happening, but my image isn't appearing. Any suggestions? Thank you!
I don't know if you already solved your problem, but one thing to know is that any image you point to in your CSS or JS file needs to be hosted on an https server. Browsers will sometimes block "mixed content" (meaning content from a non secure server when you are loading content from a secure server, in this case the server hosting Canvas). So for the image to appear, place it on a server with https, and ensure the URL in code starts with https://
I hope that helps!
A follow-up on my original post.
I shared my concerns with Instructure through the normal review of my customer success manager. Some weeks later I received a call from a senior manager to discuss the situation. We had a frank discussion about the issue, and I explained that I thought my CSM was doing a good job overall, but that there had been no follow-through or attempts to answer through the UI engineers what seemed to be a very simple question: will this CSS work? I felt satisfied that I had been clearly understood by the senior manager, and that I'd get an answer.
Within an hour he had a response from the UI team: yes, the CSS will work (with the usual understanding that future updates may change things). I then began an implementation plan to move forward with the new UI by early July. I rolled it out Tuesday, and things seem to be working well.
My takeaway is that Instructure is committed to customer satisfaction, though communication (even through a dedicated CSM) can sometimes be inadequate to address an issue. I'm usually reluctant to go over someone's head, but I think if I had done so earlier, this issue would have been addressed earlier. I remain confident in our institution's use of Canvas for our non-credit Continuing Studies programs, and feel more confident that if I hit another snag it will be addressed appropriately.