Canvas UI and Theme Editor Examples

[chrisw]

Hi Awesome Canvas people,

With many people moving to the new Canvas UI and utilising the Canvas Theme Editor, I was wondering what cool things people have done with it and how they are leveraging CSS/JS with the new look and feel. I had an admin John.Prokos​, who is interested in seeing what others have done in this group.

1. Customized UI/ branding examples – Does anyone have any examples of branding done to serve as a reference?
2. Customized Modules look and feel – does anyone's school have customized the UI for modules through CSS/JS?

I look forward to seeing your awesome ideas!

[canvas_admin · Accepted solution]

Chris,

Here are some screenshots of what we're working on as far as the login page goes.   I haven't had the time but I would love to figure out a way to have the images rotate so that a different image loads each time somebody goes to the login page (although 1 concern I have is that the different image might throw students off initially)

Here's a screenhot of how we've branded the new UI (which we will be turning on in January) as well as how we're going to be using Kennethware to customize our course home pages.  Our content pages within modules will also be branded to match.

[f000f2p]

what is the aspect ratio of the logo/icon image or pixel? We have a hard time to get the size fit precisely via the Theme Editor. thank you!

[canvas_admin]

The login page size I changed via CSS and it is 465x665 pixels.   Is that what you were asking?

[f000f2p]

Sorry I didn't make it clear. I was asking about the size of icon/logo image shows up on the left upper corner once users logged into their Canvas instance. It shows as the RTS with a shield beneath on the branding screenshot image you shared. 

[canvas_admin]

Gotcha.   That is 58x55 pixels.  I have some CSS to move its position down so that there's a sliver of the maroon above the image.  It looked odd have the white image bump up against the white edge.

[f000f2p]

great, is it possible for you to share the CSS code you wrote to brand the account or sub-account? Thank you!

[canvas_admin]

f000f2p​, do you have an e-mail where I can send you the code rather than posting a long message here in the community?

[f000f2p]

My email is jing.qi@dartmouth.edu. Thank you!

[xcotto]

Hi Mark,

Can I also have a copy to that CSS or Java Script. We would love to move the login field  as well.

This is my email: xcotto@edukgroup.com

Best regards,

[canvas_admin]

Sure thing,  @xcotto ​ You should have the e-mail now.  If not, then I probably have a typo in the e-mail address and will try again.

[xcotto]

Received Thanks again

[julielkz]

Hi Mark,

Can I have a copy for your code? my email is julielkz@umd.edu

thanks

li

[canvas_admin]

HI Li,

I just e-mailed the code to you.  If you don't see the e-mail, please let me know and I'll re-send.

[brandonhazzard]

Hi Mark,

Can I have the code you used?  This way I can give it to my developer?  brandonhazzard@thefirstacademy.org  Thanks!

[canvas_admin]

Sure thing.  I just e-mailed it to you.

[canvas_admin]

I've now made my code accessible as a document here: Some CSS related to the New UI

Happy Sharing everybody!

[mjohnson3]

We just moved to the new UI over winter break, so we are going with simplicity. May get more complex this summer when there is time to play around.

This is our current log in:

And from a course:

[brad_hinson]

In the School of Education @CUDenver we began creating collage-style image grids on course start pages.  Each box in a grid links to a module start-page, thus the grid supplements the Modules list.

The first two examples below run a php script on an external server so that the grid boxes highlight/change from week to week - giving students a sense of 'you are here' - a type of gauge on course progress.  We hope to create some cinemagraph grids soon.

This collage begins clear and full-color, and as weeks pass the boxes darken - indicating they should be complete.

--------------------------------

This collage begins blurred, and becomes focused as weeks pass.

====================

Basic grid

====================

Our newest grid uses the same code as the Canvas dashboard to create a landing page grid. This is nice for faculty who may now edit the titles "Module XX" in the editor.  They can change the images too, but it's a bit tricky.

[Stef_retired]

 @brad_hinson ​, this is fantastic! Would you be willing to post a more detailed description of how you established the link between the php script on the external server and your Canvas course home page in the Creating an inviting course home page​ blog?

[brad_hinson]

Happy too.  These take a bit of work and I'm happy to share the details. 

[xcotto]

wow this is super awesome.  @brad_hinson ​

Great Stuff  @jmunoz1 ​

[jmunoz1]

I love it!!!!

[jmunoz1]

Hi Brad! First of all, this looks awesome! Now, have you done any testings in mobile devices? Will this work in the apps? Thanks!

[brad_hinson]

No, unfortunately they dynamic grids are not mobile friendly.  This was a proof-of-concept - v.2 should use responsive design, but we haven't revisited as of yet.  The bootstrap grid uses Canvas code and is responsive. 

[jmunoz1]

Thanks!

[efalconer]

So beautiful....and thank you for SHARING!

[efalconer]

We just moved to the new UI in January - used a photo I took of the school for the landing page.

[bwestnedge]

I noticed that RTS and Brenau have a white background to the text-entry fields of the login screen, but ours shows up more yellow (like RTC above). Is this something changed in the theme editor, or is it done through CSS? Or am I missing something obvious?

[canvas_admin]

I do not have any specific CSS targeting those fields.   In Safari and Chrome, those text-entry fields appear the same yellowish as yours.   In Firefox, they are white (which is from where my screenshots came).

[bwestnedge]

Thanks Mark! That's really helpful - now that I know it is browser specific, I see that IE is white as well.