cancel
Showing results for 
Show  only  | 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?

65 Replies
nwilson7
Community Champion

@kenneth_larsen Do the pop-out menu options still work?  I pasted in the samples and it does not do anything other than add the icon to the menu.  My end goal is to have a button that pop-out with all the tools students use.  Eventually I would love it to pass the authentication but that is way out of my knowledge base.  We use SAML with Auth0 so it seems possible.  

Thanks!!!

We actually stopped using this feature at USU after Canvas added in the ability to customize the help section so I'm probably not the best one to ask. That being said, In my work with Cidi Labs, I see a lot of institutions JavaScript files and it seems like I have recently seen a custom popout sidebar being used in Canvas. Sadly, I don't remember who it was that was using it. Hopefully, some of the others who have used this script can chime in.

chriscas
Community Champion

We use the menu with popout tray from CCSD/Robert Carrol and have really had no major issues with it in the last couple years.  As always with custom scripting, Instructure could make a change to Canvas at anytime that would break the code, but hopefully those situations will be very rare.  Based on our experience, I'd recommend anyone interested in adding custom menus check it out!

Thanks @kenneth_larsen for your reply.  Also really enjoying CidiLabs, it has added many missing features to course building!

nwilson7
Community Champion

Thanks @chriscas , I will check these out!

zowada-a
Community Participant

Hi all, I've got a question - I've tried a lot of what I've seen in this thread, but I am not getting things to work.

What I am trying to do is add an icon over the linked text in the sidebar.

Here is what I have for the AddMenuItem call:

addMenuItem('Navigate', 'https://uwyo.navigate.eab.com/app/#/authentication/remote/', '<img src="https://uwyo.navigate.eab.com/app/resources/logo/navigate/navigate.svg">','_blank');

However, in my sidebar, there's no picture and it just has "> in front of the word Navigate, so I think it's ignoring my picture entirely.  I tried this with .png and .ico formats too (different location), but nothing.

Any ideas on why this isn't working? I appreciate any ideas.

Thanks!
Sam