Using CSS in the Canvas Mobile app

[rseilham]

Description

Let's take a quick look at using the mobile stylesheet in the Canvas Mobile App. This is a quick demo to give you a starting point. This session is intended for people all people, regardless knowledge with CSS. I'll save the more complicated JQuery/JS stuff for a later event.

Here's a preview of what you will learn:

Objectives

Participants who attend the session will learn...

• How to implement CSS in the Canvas Mobile app
• How to get started with with CSS in the Canvas mobile app
• Examples of simple styles that can be added to the pages in the Canvas app

Additional Resources

• Presentation Slides​

[mtuten]

Will a recording of this event be made available? The Office Mix/Sway Canvas Integration presentation/demo takes place during this time too.

[rseilham]

If there is a date conflict, especially because I want to see the cLIVE session, I might consider moving this to another day. Stay tuned...

[rseilham]

Hey everyone! I have moved this back 1 week at the same time because it conflicts with another great CanvasLIVE session by snufer​ - Integrating Office Mix and Microsoft Sway into Canvas​

I hope you can still join me on the 15th! Thanks. 

[teraulbert]

Will there be a link to the BlueJeans room? Thank you! 🙂

[DrNufer]

I'm planning on attending your event as well.  :smileygrin:

[rseilham]

This link will be available before the presentation (it's being created by Instructure), so bookmark this page and check back! Thanks.

[biray]

Link to the session (bluejeans) has been added.

[bcfraedrich]

We are having issues with our Mobile Browser login page, whether Safari or Chrome.  The Theme editor has our mobile login page set to the custom image but it isn't taking affect.  That is a change from last year.  Last year it worked the way the theme editor was set, now Mobile Browser login pages are defaulting to the blue background with the canvas logo.  Any advice or has anyone else seen this?  Thanks.

[mtuten]

Links posted/discussed during presentation:

• Learn HTML & CSS
  • http://www.w3schools.com
  • https://ilovecoding.org/courses/learn-html-css-in-14-days
  • https://www.codeschool.com
  • https://www.codeacademy.com
  • https://teamtreehouse.com
• Google fonts (experimental)
  • https://fonts.google.com
• Mobile Group
  • http://community.canvaslms.com/groups/cmug

[GideonWilliams]

Awesome Ryan many thanks. Am currently testing the beta app for iOS with some additional features. Exciting times..

[rseilham]

The presentation is now available here:

Mobile CSS - CanvasLIVE - Google Slides

[biray]

The recorded archive of this session is now available:

This video is currently being processed. Please try again in a few minutes.

[applem]

Also testing the beta canvas app.

[applem]

Thank you for posting the links.

[rseilham]

Awesome! Are you going to this tomorrow? Canvas Mobile Open Discussion

[rseilham]

Hey bcfraedrich​ - Here is a reply from  @KristinL ​

Not sure if this is right...but I'll give it a go.

At one point, our institution had a custom mobile log-in screen also. (It just hasn't been replaced/updated recently.) The log-in screen should be customizable with CSS. Here's an example: GitHub

There is currently a feature idea open for voting that's related to customizing the mobile log-in, and making it more admin-friendly: Include mobile login in Theming options

[biray]

Special thanks to  @rseilham ​ for leading this event. The host of this event has received a "host" badge + 50pts for setting up and facilitating this great session today! Check out all of the CanvasLIVE rewards: CanvasLIVE Badges.

Please be sure to fill out the CanvasLIVE Survey and share your feedback for this event. Your insights help us continue to support events like these!

For more on how YOU can host a CanvasLIVE event, check out How do I set up a CanvasLIVE event?

[jfountain]

@rseilham Hi, Ryan - is there a recorded presentation for your session mentioned on this thread?  The video link didn't work for me.  I can see the Google slides.  We want to learn more about making our Canvas Student mobile view of a course look more like the Web course view.