Create a custom option in the homepage sidebar to link to an external form.

[billkessler3]

hi everyone, I'm trying to figure out the CSS code I need to create a custom homepage sidebar option that will link to a form on an external URL for a Sub-Account or courses within my institution. I'm a novice developer looking for solutions as requested by my faculty.  I have a staff member that is familiar with putting in CSS script and they can help if I have a possible script.  I'm happy to try to write it myself if someone can put me on the right track.

Please see the screen shot below that describes what I'm trying to do.  Any and all advice is welcome.

[themidiman]

This would be done via JavaScript override code. You would need to add in a new node with the following HTML code:

<a class="btn button-sidebar-wide" href="YOUR_URL">
       Button Label
</a>

Are you familiar enough with jQuery to traverse the DOM to insert the HTML node?

[billkessler3]

Thank you!  the HTML code is easy enough to understand, butI'm not familiar with jQuery to traverse the DOM.  that being said, someone on our IT team has edited Canvas with som custom CSS and he might understand this as well.  I'm sorry about my developer ignorance, but I'm learning quick and I will be diving into the terms you mentioned this weekend.  Thank you again.

[themidiman · Accepted solution]

Try the following:

$('<a class="btn button-sidebar-wide" href="http://www.example.com" target="_blank">Button Label</a>').insertAfter("#course_show_secondary a.btn.button-sidebar-wide:last");

If you want an icon to go before the label you would do this:

$('<a class="btn button-sidebar-wide" style="border:1px solid #C6CDD1;" href="http://www.example.com" target="_blank"><i class="icon-star"></i>&nbsp;Button Label</a>').insertAfter("#course_show_secondary a.btn.button-sidebar-wide:last");

The list of possible icon classes can be seen here: https://canvas.instructure.com/courses/787387 

Make sure there is at least some white space or a non breaking space entity for the icon to look like it belongs with the other buttons with icons above it. Here's a screenshot of the result: