cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
billkessler3
Community Member

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

Jump to solution

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.Canvas Custom HomePage Sidebar.png

 

0 Kudos
1 Solution

Accepted Solutions

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:

themidiman_0-1607741954116.png

 

View solution in original post

3 Replies
themidiman
Community Champion

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
Community Member

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.

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:

themidiman_0-1607741954116.png

 

View solution in original post