How to add footer to Canvas

[morgan_j]

I have been asked to see if it is possible to added some institution related links as a footer to Canvas pages.  Is this possible?  If it is possible I'm hoping someone who has done this would be able to provide some code examples and guidance of exactly how to accomplish this task.  Thank you!

[themidiman · Accepted solution]

When you start messing with the default DOM in Canvas, you should probably realize that CSS ids can exist on multiple views. In our instance we put our support number on the login page and the dashboard. So our JS override file uses the #footer CSS id. If you only want it to appear on every view of Canvas no matter what, you have to identify a <div> that has a unique ID that only is rendered in that view. If you want it on ALL pages you might try something like this:

$('#content-wrapper').append('<div><a href="http://www.example.com">Link 1</a> <a href="http://www.example.com">Link 2</a></div>');‍

[themidiman]

We have a custom support number that we like to add to the bottom of every page in Canvas. Basically it's using jQuery to prepend the other items in our JS override file in the UI Theme editor. Here's the code:

var call_support_msg = "24x7 Toll Free Support Line: 1-888-888-8888";
$("#footer").prepend("<div style='font-color:#fff;margin-right:20px'>" + call_support_msg + "</div>");
‍‍‍‍‍

The number in the code is a fake for demonstrative purposes, but hopefully that gives you some food for thought. Here's what the result looks like:

[morgan_j]

Hi Jeff.  Thank you for your quick reply and code you provided.  I took the code you provided and saved it as a js file and then uploaded into our Canvas test environment theme editor, but I still don't see the footer.  Being that I am not much of a coder, and I missing anything here? Thanks!

[themidiman]

jmorgan,

Any JS Override code that's used in the theme editor should work. The assumption is that the DOM is ready to be accessed by jQuery. Have you tried experimenting with that code in a browser developer console like Google Chrome's console? Here's a brief tutorial: Using the Console  |  Tools for Web Developers  |  Google Developers 

Basically if you can get it to work in the developer console in Chrome it should work in your JS override file. If it's not you may need to work with Canvas support. 

[morgan_j]

JEFHQ12951‌, thanks for the guidance and link to the developer console tutorial.  I will give this a shot.

[James]

JEFHQ12951,

A quick question. I called the 1-888 number you gave, but I got  @Chris_Hofer  instead.

What is font-color? I can't find it defined anywhere in the specs and you're setting it to white, but the text is not white.

font - CSS | MDN : font- supports style, variant, weight, stretch, size, height, and family, but not color

color - CSS | MDN : doesn't have the font- in front of it

background-color - CSS | MDN : for setting the background color, although it can be done through the background CSS property as well.

The closest I could find was <font color=>, but that was deprecated. There was also a fontcolor() method for JavaScript but it has been deprecated as well: String.prototype.fontcolor() - JavaScript | MDN 

[themidiman]

 @James , the inline CSS is actually incorrect as you pointed out, but it doesn't matter anyway as the default font color in the page is black which is how we wanted the text color to appear. Since it's an incorrect rule the browser ignores it. I suppose we could change it to just color.

As you should have seen that 1-888 number isn't meant to be called. 

[James]

Changing it to color would make the text white, which is probably not what you want. 

I didn't actually call the number, that's why I said I got Chris Hofer -- he used the same number you did.

[Chris_Hofer]

Thanks for the laugh, James!  😄

[Chris_Hofer]

Hi jmorgan...

Similar to what JEFHQ12951 has posted, we have this in our global JS file (not the real telephone number):

//Display the Canvas Help Desk technical support phone number to the footer (just to the right of the Facebook and Twitter links).
$('#footer-links').append("<span> | Canvas Help Desk - 888.888.8888</span>");‍‍‍‍

Here is what it looks like at the bottom right corner of the Dashboard screen.  It doesn't show up within courses, however.

[morgan_j]

Hi Chris.  Thank you for your help with this.  I did get this to work, but as you stated it only appears on the log in page.  Do you know how I would get this to work with the pages once a user is logged in?

[Chris_Hofer]

I'm not much of a coder, either, jmorgan.  I had found the code on github, I believe, and so I had added it to our global JS file.  Sorry.  I'm sure someone with more JS experience may have a solution.

[morgan_j]

Thank you  @Chris_Hofer , I appreciate the information you provided.

[themidiman · Accepted solution]

When you start messing with the default DOM in Canvas, you should probably realize that CSS ids can exist on multiple views. In our instance we put our support number on the login page and the dashboard. So our JS override file uses the #footer CSS id. If you only want it to appear on every view of Canvas no matter what, you have to identify a <div> that has a unique ID that only is rendered in that view. If you want it on ALL pages you might try something like this:

$('#content-wrapper').append('<div><a href="http://www.example.com">Link 1</a> <a href="http://www.example.com">Link 2</a></div>');‍

[morgan_j]

JEFHQ12951, thank you so much!  This is exactly what I was looking for!  This provided the links at the bottom of all Canvas pages, which is what was requested of me.  Appreciate you taking the time to help me out with this!!

[stuart_ryan · Accepted solution]

HI jmorgan,

I thought I would check in, have any of the solutions that have been proposed resolved your issues? 

If not, please let us know and we can take another look.

Cheers,

Stuart

[morgan_j]

Hi Stuart, JEFHQ12951 provided me what I was looking for.  Thanks for checking in.

[stuart_ryan]

Hi jmorgan,

No worries at all! Thanks so much for coming back to us, and glad to hear that JEFHQ12951 was able to help you out and get you sorted!

Cheers,

Stuart

[Chris_Hofer]

Is there any way to make the footer (which includes the INSTRUCTURE name, Privacy Policy, Acceptable Use Policy, Facebook, and Twitter links) display on all pages of Canvas?  Further, if we wanted that footer to "stick" so that if a page of content scrolls, the information in the footer is always visible.  Is that possible?

[themidiman]

A sticky footer would need CSS position of fixed with 0 pixels from the bottom. You can do this with your JS override file simply with this expression:

$('#content-wrapper').append('<div style="position:fixed;bottom:0;"><a href="http://www.example.com/link1">Link 1</a> <a href="http://www.example.com/link2">Link 2</a></div>');‍

[Chris_Hofer]

Hi JEFHQ12951...

I tried out your line of code, and I came across this issue:

If there is a lot of content on a page, that content will slide behind any text/links that are a part of the JS code included in the Global JS file.  As you can see here, "Link 2" blocks the start of the sentence, "This is an example..."

[themidiman]

Did you want the content viewable or not? If you don't want the content behind it visible, then you could add an additional CSS rule for background-color to the overlying div. Here's one for straight up white:

$('#content-wrapper').append('<div style="position:fixed;bottom:0;background-color:#fff;"><a href="http://www.example.com/link1">Link 1</a> <a href="http://www.example.com/link2">Link 2</a></div>');‍

If you did want it visible beneath somewhat you can adjust the transparent nature of the footer itself. 

Here's another straight up white with some opacity built in using the CSS rgba color specification. The last number is one you can play around with. It's a floating decimal number between 0 and 1, with 1 being fully opaque and 0 being fully transparent:

$('#content-wrapper').append('<div style="position:fixed;bottom:0;background-color:rgba(255,255,255, 0.3);"><a href="http://www.example.com/link1">Link 1</a> <a href="http://www.example.com/link2">Link 2</a></div>');‍

Note that the div itself is only as wide as the content between the div tags. If you need it to cover the entire horizontal span of the content you would need a width CSS property of 100%. 

If you want to play around with other values for the background-color rule I would encourage you to visit this  w3schools page.

This is just the starting recipe. Add salt to your specific taste/need.