Community

cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
jlocke
New Member

Comparing ACUE and my own classes...

Jump to solution

I am simultaneously involved in the ACUE training as well as doing my own Canvas classes - for those who can, look at acue.instructure.com and you will see how the buttons are physically well-designed. I want to do that! I want a Canvas space that will look cleaner, with buttons that I can make attractive. How can this be done?

EDIT: This is a screenshot of what I mean:

297740_pastedImage_1.png

1 Solution

Accepted Solutions
bfelix
Community Member

Hi Jason,

As the designers and builders of this interface, we would be happy to answer. We get this question from a fair amount of our partners.

There is a fair amount of custom stuff going on here. One of the best things about Canvas in our minds is that you can, by and large, customize both the look and feel of any page AS WELL AS ANY BEHAVIOR, by way of the ability to implement a custom CSS and / or a custom JS file. Literally add/remove/change any element on any page (with various exceptions...things like the gradebook can be tough to customize).

Our solution involves custom HTML on the page you pasted above, as well as custom CSS to support it. There is also custom JS powering the page, which itself taps the Canvas API's for information that is additionally fed to the page (like completion status of a module).

Attached is the HTML of the page along with the custom CSS. I'm not including the JS (contact me if you want to discuss further), but you can get the idea of how it all works together if you tinker with the module CSS classes on the home page as described in the CSS.

Hope this helps,

Brad

View solution in original post

8 Replies
chofer
Community Coach
Community Coach

Hello there,  @jlocke ...

The link you posted to ACUE's Canvas login page is about as far as most people would be able to get to because we would need login credentials to that website.  So, we are not able to see the buttons you refer to.  I tried looking on their website (Home - ACUE) to see if I could help find any contact information for you, but I was unable to find anything that may be of help.  If you can, I would recommend that you reach out to someone at ACUE who is a local Canvas administrator to see if they might be able to help you with some ideas on buttons and how they got started.

I hope this will be of help, Jason.

I just added a screen shot to show what I mean. Full disclosure: I am a blackboard partisan. To put it mildly, I absolutely hate this LMS, but am trying to make the best of it. Perhaps if I discover some added elegance and functionality, I might hate it less.

chofer
Community Coach
Community Coach

Hello again,  @jlocke ...

Thank you for updating your question with the screen shot.  I'm sorry to read that you aren't having a good experience with Canvas.  There are a lot of people here in the Community that are more than willing to help you through things that may frustrate you or that you may just have a general question about.  So, we'll try to help wherever we can and get you some answers that will be of benefit.

Getting to the question at hand...  I'm not really able to tell how that particular page was designed in the ACUE course you are taking.  It looks pretty nice though.  I'm not sure if those blocks of text and accompanying images are all separate images that have been added to your course pages.  I'm not sure if there is some special HTML code that's been applied to that page to make it the way it does?  I'm not sure if maybe the page was designed outside of Canvas (using Dreamweaver, for example), and then that page was embedded into a Canvas page (students wouldn't be able to know this just by looking at it).  And, I don't know if that class is maybe using some sort of 3rd-party LTI integration with Canvas that produces that kind of interface.  (For example, do those red check-mark icons and the red "RESUME" icon change as you progress through the course?  If so, that's cool...but nothing I've ever seen in Canvas.)  So, as you can see, there are several options that could be available for the general design of that page.

I know you may not be asking specifically about the design of your "Home" page, but there are several threads here in the Community that can give you some ideas on "Home" page templates:

Also, you might want to check out Canvas Commons when you are designing your own course(s).  Search for templates in there, and you might find something that interests you.  (Note that you'd have to download/import the item from Commons first to a "sandbox" course so that you can preview what the material looks like.  Then, you can incorporate some or all of it into the course you will be teaching.)

Hopefully I've given you a few ideas here, Jason.  Again, please come to the Community site or seek out a local Canvas administrator at your school as you are building your content.  There are some pretty neat things that people are doing in their Canvas courses, and I'm sure others would be willing to share ideas with you, too.  Good luck!

bfelix
Community Member

Hi Jason,

As the designers and builders of this interface, we would be happy to answer. We get this question from a fair amount of our partners.

There is a fair amount of custom stuff going on here. One of the best things about Canvas in our minds is that you can, by and large, customize both the look and feel of any page AS WELL AS ANY BEHAVIOR, by way of the ability to implement a custom CSS and / or a custom JS file. Literally add/remove/change any element on any page (with various exceptions...things like the gradebook can be tough to customize).

Our solution involves custom HTML on the page you pasted above, as well as custom CSS to support it. There is also custom JS powering the page, which itself taps the Canvas API's for information that is additionally fed to the page (like completion status of a module).

Attached is the HTML of the page along with the custom CSS. I'm not including the JS (contact me if you want to discuss further), but you can get the idea of how it all works together if you tinker with the module CSS classes on the home page as described in the CSS.

Hope this helps,

Brad

Hello Brad!!

I've sent you a message but haven't heard back so I thought I'd post here as well! I would like some additional help musing the HTML code you shared for updated my Canvas course! Anything would be appreciated.

bfelix
Community Member

Hi Cindy, thanks for the note...not sure exactly how to help you though without specific issues/questions. Have you worked before with the custom CSS override capabilities in Canvas?

No, I have not! I have done some basic HTML stuff and have made different buttons, etc. I have been using Canvas for a while though, but am certainly not a programmer - I am an English teacher. I don't even know what the "custom CSS override capabilities" means. But, I am trying and I want to make the best, most accessible as possible courses for my students. Especially when all students are forced into an online environment, even those that would prefer a F2F option. What I love about the ACUE layout, organization, and general feel, is that I know students would have a much better chance at success. 

But, once again, no to the "custom CSS override capabilities." I keep looking up all the acronyms and them I look for how to enter the codes into the rich content editor, but nothing really explains that very well.

bfelix
Community Member

Hi Cindy, the CSS override is something specific to Canvas and must be implemented by your Canvas admin(s). I’d suggest working with them to see if they can assist!