cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Surveyor

Has anyone been working on scripts for the new Beta UI?

There are some very common branding and UI scripts that a lot of institutions run that will need to be rewritten with the change of UI.  Most of these are pretty basic changes.

One in particular:

   A lot of schools have added extra pull down menus to the top navigation menu.  Our institution added "Library" and "Support" here.  We will need to move these to the left side navigation replacing the with icons.

   I know we got our code from our implementation manager from Instructure... the nice thing about this is that most institutions had similar code.  I wonder if there will be any sample code for this that we could base our implementation on.

Thanks,

Josh

52 Replies
Highlighted

Totally agreed. In fact, in the comments of my feature idea that is now "Under Development," I mentioned that very thing. You may want to head over to and add your feedback there. I had done a mock-up of how it would look to move those items out of the sidebar and into the Admin fly-out panel, but it has disappeared and I haven't redone it.

Highlighted
Surveyor

We rolled out the new UI to our users over the break.  I think the solution we came up with is a pretty good one (though I want to improve our icons...  we simply picked from the built-in Instructure icons for now).

We used to modal window approach like the help menu uses rather than the slide out tray.  There was no good way to get Instructure's slide out tray to work and hacking out our own looked too flaky.

Huge thanks to Cooper Fellows (our web programmer) for solving this!  He agreed to share this with the Canvas Community.  Below is the javascript he created for making it happen.

Here is how our solution looks.  Notice the library link on the left side.  Clicking it pops up the following modal window:

addmenuitem.jpg

The javascript function for adding a menu item.  It is generalized so it can add items with or without the modal window (we pre-pend cc to the title of our JavaScript and CSS for Champlain College...  I recommend changing this if you reuse it)

Also very cool is that you can use an icon from the Canvas style-guide​ or an svg graphic (which is what is done in the example below).

Here is a link to our code on codepen

Highlighted

Just thought I would let anyone interested know that the feature request is now open for voting.

Highlighted

We have made the plunge. I will admit I do not have the same ninja skills as Kenneth Larsen​, but thought this will help.

In our old UI we had a customized button to access our Canvas tutorial courses. This was the last button appended to the identification bar. Interestingly enough, I was able to figure out how to create a psuedo hack, it will show up in this location on every page (sans the dashboard) that has content in the #right-side column.

orientation.png

Here is the (blunt instrument hack) JS override code 😕

//* Orientation Choices #right-side, .ic-sidebar-logo, .ic-sidebar-logo_image (append)

$('#right-side').prepend('<div class="al-dropdown_container"><a class="al-trigger Button Button--block" role="button" href="#" style="background: #0099e0; color: #fff">How to use Canvas <i class="icon-mini-arrow-down"></i></a><ul class="al-options" role="menu" tabindex="0" aria-hidden="true" aria-expanded="false"><li><a href="https://suu.instructure.com/courses/166813" target="_parent" tabindex="-1" role="menuitem">Student Walkthrough</a></li><li><a href="https://suu.instructure.com/courses/151520" target="_parent" tabindex="-1" role="menuitem">Faculty Walkthrough</a></li></ul></div><br />');

Another little hack we have is to have a link to our University calendar on the Calendar page in Canvas. This is what it looks like... (Yes you can also see our above hack here too.)

calendar.png

This is another addition to our JS override script

//* Calendar Customization === This is where a link to the SUU Academic Calendar is located top right on Calendar page.//

$('#calendar-feed').parent().prepend('<i class="icon-calendar-month"></i> <a href="http://www.google.com/calendar/embed?src=suu.edu_tjl05mhr4lldjqhph0lasfmqk8@group.calendar.google.co...google.com/calendar/embed?src=suu.edu_tjl05mhr4lldjqhph0lasfmqk8@group.calendar.google.com&ctz=America/Denver&gsessionid=_lJiWMqvVSpfkVl1KVgY3w/" target="_new">SUU Academic Calendar</a>');

So hopefully these little tricks may give you additional options.

Highlighted

Sorry, I noticed our solution's code wasn't displaying correctly.  I switched the post to link to codepen instead... the built in syntax highlighting in the Canvas Community was tripping me up.

We also added support for svg images.

I think this is now a really complete solution to the need to be able to add menu items!

Josh

Highlighted

Hi Josh,

Thank you so much for sharing this!! I have a question: should I be able to take the supplied code and push it into my Canvas environment and see it working as-is? I know it will be Champlain links, etc. but as a starting point, should I be able to see a working model right away?

Thanks!

Highlighted

Yes Jacci,

You should be able to just cut & paste this into your Global JS file.  Test it on the "test" or "beta" site obviously.

Josh

Highlighted

kenneth.larsen@usu.edu...

Courses.jpgAnother issue we are currently running into with the placement of our "Toolbox" and "MPTC Help" menus (as shown above) in the current UI interface is that when instructors go to "Courses" >> "View All or Customize", their course list aligns to the middle of the screen just under "Courses".  Basically, what is happening is that the white "MPTC Help" menu text is moving to the next line under "Courses" (but you can't see it on a white background).  This makes seeing the course title and term the course is in more difficult to see in "View All or Customize".  It's not moving on the Dashboard screen you see when you first sign in to Canvas or when you navigate to a course...just on the "View All or Customize" screen.  We're not sure how to keep our "MPTC Help" menu with the blue area of Canvas no matter which screen you are on.  We're using custom JS code in our global file.

Highlighted

That sounds like fun. Everybody else wants unreadable links breaking their interface, they are just afraid to admit it.  If you want to share your custom JS code with me, I would be happy to take a look. Also, it looks like you probably have some overrides in your custom CSS to account for a wide logo, if you are willing to share what you have tweaked in your CSS, that would help as well. And one more thing, if you have a publicly visible course that I can look at, it may also be of benefit.

Highlighted

Thanks...I'll PM you.