cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
morgan_j
Community Participant

How to replace Canvas footers

Jump to solution

We have used a script from the Canvas community to apply some footers to our Canvas instance.  The scripts do not impact the very bottom of the Canvas portal that still shows links to the Instructure, Privacy policy, Acceptable Use Policy, Facebook and Twitter. We would like to be able to replace these links with our own custom institution based links. 

I received some JavaScript from our Customer Success Manager.  I applied this to our Canvas test instance but it doesn't seem to change anything.  Wondering if anyone has a script they can share that works for their institution, or, if anyone can look at the script that I was provided and see why it might not be working?  Here is the script:

var copyrightLink = '<a style="text-decoration:none;white-space:nowrap;">&copy; 2017</a>';

var jcccLink = '<a href="http://www.jccc.edu/" target="_blank">Johnson County Community College</a>';

var tltLink = '<a href="http://tlt.jccc.edu/" target="_blank">Teaching and Learning Technologies</a>';

var jccconlineLink = '<a href="https://online.jccc.edu/" target="_blank">JCCC Online</a>';

var phoneLink = '<a href="#" onclick="return false;">801.581.6112</a>';

var disclaimerLink = '<a href="http://www.jccc.edu/disclaimer/index.html" target="_blank">Disclaimer</a>';

var privacyLink = '<a href="http://www.jccc.edu/privacy/" target="_blank">Privacy</a>';

$('div#footer-links.ic-Login-footer__links').html('<div style="border-top: 1px solid #fff;padding: 12px 0 0 0;"></div>' + copyrightLink + jcccLink + tltLink + '<br/>' + jcccconlineLink + phoneLink + disclaimerLink + privacyLink);

$('div#footer-links.ic-app-footer__links').html(copyrightLink + jcccLink + tltLink + jccconlineLink + phoneLink + disclaimerLink + privacyLink);

init [div#footer-links.ic-app-footer__links, prevObject: init(1), context: document, selector: "div#footer-links.ic-app-footer__links"]

Here are the links I am trying to change:

Canvas Footer

Thanks!

Tags (1)
1 Solution

Accepted Solutions
bneporadny
Community Champion

jmorgan‌,

Give this a try. It still needs to be formatted so that it's easier to read, but it does get the links you wanted added into the the footer. 

268906_pastedImage_1.png

var copyrightLink = '<a style="text-decoration:none;white-space:nowrap;">&copy; 2017</a>';

var jcccLink = '<a href="http://www.jccc.edu/" target="_blank">Johnson County Community College</a>';

var tltLink = '<a href="http://tlt.jccc.edu/" target="_blank">Teaching and Learning Technologies</a>';

var jccconlineLink = '<a href="https://online.jccc.edu/" target="_blank">JCCC Online</a>';

var phoneLink = '<a href="#" onclick="return false;">801.581.6112</a>';

var disclaimerLink = '<a href="http://www.jccc.edu/disclaimer/index.html" target="_blank">Disclaimer</a>';

var privacyLink = '<a href="http://www.jccc.edu/privacy/" target="_blank">Privacy</a>';

document.getElementById('footer').innerHTML=('<div style="border-top: 1px solid #fff;padding: 12px 0 0 0;"></div>' + copyrightLink + jcccLink + tltLink + '<br/>' + jccconlineLink + phoneLink + disclaimerLink + privacyLink);

View solution in original post

5 Replies
bneporadny
Community Champion

jmorgan‌,

I think this discussion might be what you're looking for to help add/replace the #footer in Canvas.

How to add footer to Canvas 

Brian

morgan_j
Community Participant

 @bneporadny ‌, I had actually asked a similar question before, but just regarding adding a footer to all page in Canvas.  I was able to get help from others for this, but I am now looking to change the links at the very bottom of the Dashboard page if possible.  I have yet been able to accomplish this.  Thanks!

bneporadny
Community Champion

jmorgan‌,

Give this a try. It still needs to be formatted so that it's easier to read, but it does get the links you wanted added into the the footer. 

268906_pastedImage_1.png

var copyrightLink = '<a style="text-decoration:none;white-space:nowrap;">&copy; 2017</a>';

var jcccLink = '<a href="http://www.jccc.edu/" target="_blank">Johnson County Community College</a>';

var tltLink = '<a href="http://tlt.jccc.edu/" target="_blank">Teaching and Learning Technologies</a>';

var jccconlineLink = '<a href="https://online.jccc.edu/" target="_blank">JCCC Online</a>';

var phoneLink = '<a href="#" onclick="return false;">801.581.6112</a>';

var disclaimerLink = '<a href="http://www.jccc.edu/disclaimer/index.html" target="_blank">Disclaimer</a>';

var privacyLink = '<a href="http://www.jccc.edu/privacy/" target="_blank">Privacy</a>';

document.getElementById('footer').innerHTML=('<div style="border-top: 1px solid #fff;padding: 12px 0 0 0;"></div>' + copyrightLink + jcccLink + tltLink + '<br/>' + jccconlineLink + phoneLink + disclaimerLink + privacyLink);

morgan_j
Community Participant

 @bneporadny ‌, thank you very much!!  This worked!  I have been trying to get this to work for quite a while now, and now it does!  I am very appreciative of you taking the time to help me with this! Smiley Happy

Boekenoogen
Community Contributor

We just started to replace the footer for instance of Canvas and it looks great. Thanks for the code!