cancel
Showing results for 
Search instead for 
Did you mean: 
kenneth_rogers
Community Champion

Help With Custom Menu Icons and Script

Jump to solution


Hello, community. I am hoping you can provide me with some assistance as I pose these series of questions. Thanks so much!

First, a little background...

course_menu.jpg

We utilize some code (I believe generously borrowed from  @kenneth_larsen ​) to add a few menu items to our menu in Canvas. Because we support a district of five individual colleges in our instance, these items need to remain in our menu and cannot be moved to the updated Help Menu. Also, we previously decided to not include any icons with these items (see graphic to the right).

With the update to the course menu and it now being collapsible (see https://community.canvaslms.com/docs/DOC-8403#jive_content_id_Global_Navigation​ within Canvas Production Release Notes (2016-10-29)), we have now realized that the text is removed (makes sense), so we must have icons present.

Here's probably the biggest problem - I can read through javascript, steal some people's code (thanks, guys!), and basically understand what's going on - but sometimes you just need to wave the white flag and ask for help!

I have gone through several pages and sites, but I still need assistance with adding an image (I presume svg) as my icon.

I have modified our current javascript file to add an icon from the style sheet - this works, but the icon is removed with the text when you collapse the menu.

I found  @jblumberg ​'s post on Has anyone been working on scripts for the new Beta UI? (his code can be found here) - and while this utilizes a svg image, but it creates a popup window. Although, in reading his notes, it says it is generalized so it can create items with or without the modal window.

So - the questions - does someone have a javascript fix (or js and css fix even) to add custom menu items, including an icon, that won't vanish when the menu collapses? Or is there a way to add svg icons with  @kenneth_larsen ​'s code? What about modifying  @jblumberg ​'s code to add three individual items instead of one item and a popup window?

Help?

64 Replies

So, just to clarify, is the core issue that you are trying to solve the missing icon (square) above Catalog and Certificates?

If so, that is a result of the update Canvas made to their icons on January 9th (or there about). To fix this, you need to change the content value in the CSS that goes along with the slide out panel. The original GitHub CSS had:

.icon-resources:before {

  content: "\f13c";

}

Based on your screenshot, you were using an icon that doesn't have a match in the new icon set. The following is the closest I could find.

.icon-resources:before {

  content: "\EA2F";

}

If that is not what you are trying to solve, we can go back to fixing your code.

Hi  @ndragisic ​,

Based on our conversation outside of the Canvas Community, I have made some adjustments to your JavaScript file so that the slide out panel matches the styling of the other panels in Canvas.

For any others interested, the icon content code was updated in the CSS file as described above and I modified the following lines that come from  @tfullwood ​'s code from:

    var trayHtml = '<div style="position:absolute;background:#fff;" class="ReactTray__Content ReactTray__Content--after-open " tabindex="-1" data-reactid=".' +

  reactId + '.0"><div class="ReactTray__layout" data-reactid=".' +

  reactId + '.0.0"><div class="ReactTray__primary-content" data-reactid=".' +

  reactId + '.0.0.0"><div class="ReactTray__header" data-reactid=".' +

  reactId + '.0.0.0.0"><h1 class="ReactTray__headline" data-reactid=".' +

  reactId + '.0.0.0.0.0">' +

  slide_out_title + '</h1><button class="Button Button--icon-action ReactTray__closeBtn" type="button" data-reactid=".' +

  reactId + '.0.0.0.0.1"><i class="icon-x" data-reactid=".' +

  reactId + '.0.0.0.0.1.0"></i><span class="screenreader-only" data-reactid=".' +

  reactId + '.0.0.0.0.1.1">Close</span></button></div><ul class="ReactTray__link-list" data-reactid=".' +

  reactId + '.0.0.0.1">' +

  displayVals + '</ul></div><div class="ReactTray__secondary-content" data-reactid=".' +

  reactId + '.0.0.1"><div class="ReactTray__info-box" data-reactid=".' +

  reactId + '.0.0.1.0">' +

  footerContent + '</div></div></div></div>' +

  '<script>$(\'.Button.Button--icon-action.ReactTray__closeBtn, .Button.Button--icon-action.ReactTray__closeBtn .icon-x\').click(function () {$(\'.ReactTrayPortal div\').removeAttr(\'style\');$(\'.ReactTrayPortal div\').removeAttr(\'class\');$(\'.ReactTrayPortal div\').html("");$(\'#menu, .menu-item.ic-app-header__menu-list-item a\').removeClass(\'ui-state-disabled\').removeAttr(\'disabled\');$(\'#customTrayOverlay\').hide();$(\'#custom_nav\').css(\'background-color\', \'\');$(\'.icon-resources\').css(\'color\', \'#fff\');});</script>';

To:

    var trayHtml = '<div style="position:absolute;background:#fff;" class="ReactTray__Content ReactTray__Content--after-open " tabindex="-1" data-reactid=".' +

  reactId + '.0"><div class="ic-NavMenu__layout" data-reactid=".' +

  reactId + '.0.0"><div class="ic-NavMenu__primary-content" data-reactid=".' +

  reactId + '.0.0.0"><div class="ic-NavMenu__header" data-reactid=".' +

  reactId + '.0.0.0.0"><h1 class="ic-NavMenu__headline" data-reactid=".' +

  reactId + '.0.0.0.0.0">' +

  slide_out_title + '</h1><button class="Button Button--icon-action ic-NavMenu__closeBtn" type="button" data-reactid=".' +

  reactId + '.0.0.0.0.1"><i class="icon-x" data-reactid=".' +

  reactId + '.0.0.0.0.1.0"></i><span class="screenreader-only" data-reactid=".' +

  reactId + '.0.0.0.0.1.1">Close</span></button></div><ul class="ic-NavMenu__link-list" data-reactid=".' +

  reactId + '.0.0.0.1">' +

  displayVals + '</ul></div><div class="ic-NavMenu__secondary-content" data-reactid=".' +

  reactId + '.0.0.1"><div class="ic-NavMenu__info-box" data-reactid=".' +

  reactId + '.0.0.1.0">' +

  footerContent + '</div></div></div></div>' +

  '<script>$(\'.Button.Button--icon-action.ic-NavMenu__closeBtn, .Button.Button--icon-action.ic-NavMenu__closeBtn .icon-x\').click(function () {$(\'.ReactTrayPortal div\').removeAttr(\'style\');$(\'.ReactTrayPortal div\').removeAttr(\'class\');$(\'.ReactTrayPortal div\').html("");$(\'#menu, .menu-item.ic-app-header__menu-list-item a\').removeClass(\'ui-state-disabled\').removeAttr(\'disabled\');$(\'#customTrayOverlay\').hide();$(\'#custom_nav\').css(\'background-color\', \'\');$(\'.icon-resources\').css(\'color\', \'#fff\');});</script>';

in order to take advantage of the Canvas panel styles. Which, in essence, was replacing all but the first 'ReactTray__' identifier with 'ic-NavMenu__'.

Let me know if that resolves the rest of your concerns.

You are so amazing and wonderful. Thank you. This worked beautifully.

mzucal
Community Participant

 @kenneth_larsen ‌

Can you tell me where I can find the code for the icons? I'm looking for "\EA2F";  whcih corresponds to the different icons available in the style guide.

The following is the closest I could find.

  1. .icon-resources:before {  
  2.   content"\EA2F";  
  3. }  
JACOBSEN_C
Community Contributor

You bet.  Though... the actual icon that shows is usually + or - 1 or 2 to what's on this page; I dont yet know why - but also haven't asked.

http://instructure.github.io/instructure-icons/#demos/fonts/InstructureIcons-Line.html 

 @JACOBSEN_C is right, the icons are off.  I was actually able to figured out (at least part of) why the icons are off. Some of the icons they list don't actually exist.

For example, the image below suggests that there is a move-left and move-right icon. However, they do not exist in the code so move-up-top is actually EA7B and everything afterwards is thrown off by two. This happens multiple times so the further down the list you go, the more some of the icons are off.

Example icons from Canvas

I usually will put in what is listed then make adjustments based on which icon was actually returned. Not an exact science but it works for now. The danger is if Canvas actually puts in the missing icons and everything is thrown off again. 

The best route is to actually use the Canvas class whenever possible (icon-move-up-top) rather than setting it in CSS using the content code (EA7B). That way, when canvas updates the code, your icon gets updated as well.

As slight modification to  @JACOBSEN_C 's link, you will want to look at the solid variations of the icons rather than the line icons http://instructure.github.io/instructure-icons/#demos/fonts/InstructureIcons-Solid.html 

Good luck! But more importantly, have fun along the way.

estradak
Community Participant

Where would I load our script?  My new CMS is not wanting to help and I am hoping to get an attendance icon loaded to make my life a little easier.

Morning,  @estradak ‌! I'm trying to find a guide for you, but you load it in the themes area of the admin portion. In the theme you are using, you have an area to upload either a CSS or a java file, and you would upload this as a .js file.

Excellent! Thanks for doing the legwork, stefaniesanders‌!!