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...
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.
I have gone through several pages and sites, but I still need assistance with adding an image (I presume svg) as my icon.
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.
Solved! Go to Solution.
Thanks to everyone for providing code and instructions for adding custom links/icons. I was able to get it to work but now need to hide one icon from students - has anyone done this and have code they would share? Thanks!
What's the trick to get two custom options to show in the global navigation column? Does code need to be added to both the CSS and JS file?
Hi, Kennith - what's the trick to getting two/multiple custom global options to show? What code needs to be added/adjusted in the CSS and/or JS files?
Hi, @JACOBSEN_C ! I was just whipping up a response to your question below for you!
To add the three items in our menu, we used the following code in the .js file (no CSS):
addMenuItem('Student Quick Guide','https://alamo.instructure.com/courses/293886', 'icon-note-light', '_blank');
addMenuItem('Technical Support','https://alamo.instructure.com/courses/293886/pages/technical-information?module_item_id=2163467', 'icon-settings-2', '_blank');
addMenuItem('College Resources','https://alamo.instructure.com/courses/293886/pages/college-resources-and-contacts', 'icon-collection', '_blank');
These were done on lines 50-52 on this file. Essentially, it's telling the function to:
Kenneth - this is Great! Much appreciated! ... got any idea on how to slip the custom options above the help icon?
Man. That's where you've got me. I like to say that I can read and understand some programming languages, but to write something?! Yeah, that's not happening! (Except HTML and CSS - gotta throw that in there!).
Looking over the .js file I included, when it's building the html portion, it appears to say that it is building what the function will do in lines 37-41 (as I mentioned above), and then it takes the itemHTML and appends it to the menu in line 42. Granted, I could be totally off here, but that's what my brain reads.
I'm going to tag @kenneth_larsen again, because he's the best. If I'm way off base, he'll tell us!
Hopefully this is possible for you!
This will find the last item in the menu and insert the new item before it.