Customising Canvas skin

[de_millington]

Hello all developers,

I wonder if anyone has managed to update their Canvas sites with new, clickable, global icons, and if you would be willing to share how you managed it? I have achieved this with limited success, so I'm looking to take this further. I shall briefly explain what I have accomplished and what I wish to achieve.

I have managed to customise our Canvas website by the addition of non default Canvas icons to the vertical global navigation bar. This was achieved with some custom CSS/JavaScript that we acquired from a Canvas source, then uploaded to the Canvas Themes area. Linking from the icon to a cross-college area within Canvas, or an external site, is easily achieved with some standard html code. Adding more of the same icons is easy by replication, but I am really struggling to add a different icon. Is there anyone else that has experience with this? This is what I have done so far...

I acquired a separate icon from a third party as a jpg, then converted it to an SVG on the freeware site "online-converter.com". I copied the CSS/JavaScript of the old icon into CodePen.  I then added code for the new icon into the space underneath and added some back-colour to make sure both icons display in the browser. I removed the back colour and then copied this code back into the JavaScript file and re-uploaded to Canvas. Both icons, however, fail to display.

For anyone wanting to view my endeavours, I have created an 11 minute video clip showing this, but didn't want to clutter this forum unnecessarily if someone already has a clear solution.

Any advice would be gratefully received?

Thanks

Dave

[themidiman]

Somewhere in these forums is a complete end-to-end example but I can't seem to find it anymore. While I haven't tried it for myself it seems you can do this via LTI

https://community.canvaslms.com/message/125097-install-lti-in-course-navigation-with-icon

Here's one that might be more helpful:

https://community.canvaslms.com/message/106150-question-about-environments-in-lti-configuration

Scroll down to the XML that shows this:

<lticm:options name="global_navigation">
<lticm:property name="text">theMenuItemText</lticm:property>
<lticm:property name="url">theLaunchUrl</lticm:property>
<lticm:property name="icon_url">theIconUrl</lticm:property>
<lticm:property name="visibility">admins</lticm:property>
<lticm:property name="enabled">true</lticm:property>
<lticm:property name="oauth_compliant">true</lticm:property>
</lticm:options>‍‍‍‍‍‍‍‍

Where the property line for icon_url, you should in theory be able to specify an inline SVG element. 

Sorry for rambling but I also dug this one up:

https://community.canvaslms.com/message/108545-re-global-nav-menu-custom-tray?commentID=108545#comme...

I hope that helps. Perhaps that other post where it was a complete end-to-end solution will surface on this thread if these aren't the ones that solve your approach.

Good luck!

[de_millington]

Thanks Jeffrey, I shall give this a go and report back.