David Dumonde

Banner branding in the new UI

Discussion created by David Dumonde on Jan 27, 2016
Latest reply on Jul 7, 2016 by David Dumonde

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.


Screeny Shot Jan 27, 2016, 10.10.19 AM.png


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.


Screeny Shot Jan 27, 2016, 11.01.46 AM.png


I accomplished this with a minimal amount of CSS:


body {

     background: #fff url("https://url/of/logo.png") center 12px no-repeat;

     padding-top: 85px;



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.