Showing results for 
Show  only  | Search instead for 
Did you mean: 
Community Contributor

Custom JavaScript/CSS Changes

Jump to solution

Hello all,

Question. Over the weekend there was a Canvas Production Release. In the notes, it mentions undocumented changes to the CSS/Javascript. It seems that those changes have broken our Resources Tab, specifically the slide out menu. We've tried rewriting the code, and even used the code found here as a basis: canvas-contrib/Branding/JS_and_CSS/react-tray-link at master · kajigga/canvas-contrib · GitHub 

Has anyone else had this issue or have any thoughts/ideas as to what has changed?


56 Replies
Community Champion

Hi  @qnguyen 

I'm really bad at debugging other's code and since I have other nav hacks I kinda just wrote my own to build out the set. Would you be willing to try this one?

ccsd-canvas/global-nav-custom-links at master · robert-carroll/ccsd-canvas · GitHub 

Please let me know how that works.

Community Participant

Thanks Robert,

I used this one by itself and nothing happened. I downloaded this set of code, saved as .JS and upload to Canvas Theme. Sorry I am very new this this too.


const links = [{
      title: 'Test', // the menu item or tray name, what users will see
      icon_svg: 'icon-pin', // can be instructure icon, <svg>, or link to .svg
      href: '',
      target: '' // _blank opens new window/tab, '' opens in the current window/tab
      title: 'Canvas Community',
      icon_svg: 'icon-heart',
      href: '',
      target: '_blank'

Community Participant

Hi Robert,

Yes it worked now. I wonder what I did wrong that it showed a smaller icon in my last try ( last week that I showed you)

Di you use the icon-heart from the same page?

instructure-ui - A design system by Instructure Inc. (6.24.0) 

Community Champion

It's not you. Some of these snippets are so old, and Canvas updates frequently, and without keeping the snippets up to date they slowly fall away from fully functional. For some, who they remain working for, it could be a matter of what other changes they've made or how they adjust their css. I try to frequently review my hacks and make sure they are still doing what they need to. All the code here needs a better home. Smiley Happy

I haven't used icon-heart, except for developing and providing the example. Is it working for you?

Community Member

Hi, I'm having an issue trying to have a custom JS to work on Catalog Homepage sometimes it loads for the first time, then if I reload it doesn't work. Maybe you have some idea as to what could be happening i'm not sure if it's a security issues since I'm trying to load some images from another server. 


Hi Ryan,

Hope your good. I'm having an problem with a custom JS that's not working on Catalog homepage. I'm trying to use append to substitute some icons for the page but it's not working the images are hosted on a separate host I'm not sure this is the problem. 

Here is the code I'm using Jquery maybe you can shed some light into what might be the issue i'm not sure if it's a security issue with append and the images. I tried using window .on (load) to see if it was an issue with it not registering the css elements. Thanks

$(document).ready(function () {
document.cookie = "catalog-branding=new; SameSite=None; Secure";
if(window.location.href == ""){
    var courseIcon = $(".icon-course");
    var programIcon = $(".icon-program");
    var freeFlag = $(".product-flag-free");  

    $(".ProductIcon__LargeCircle--course").append('<img src="externalhost"  width="40rem" />');
    if(programIcon) {
    $(".ProductIcon__LargeCircle--program").append('<img src="externalhost"  width="40rem" />');
    if(freeFlag) {
    $('.jqFlag').append('<img src="externalhost"  width="125px" />');

    $('.jqFlag').attr('style''border-top: 64px solid; margin-left:-7px;');


Tags (1)