Templates, Themes, and All That Jazz!

[mlattke]

Amp up your online learning environment with some fun and functional razzmatazz. Learn to

create a uniquely simple set of templates with custom CSS, Google fonts, and Commons.

Shimmy-shake out the door as you get your jazz hands on this easy-to-use system.

Get a sneak peek: Templates_Themes_and_All_that_Jazz

In this session, we will give you the CSS, images, and directions to take with you.

Presenter: Michelle Lattke​ JENNIFER HART​ - Pasco eSchool, District School Board of Pasco County

  Location Map & Room: BISON 3-5

  Login to "Add a comment" below!

               

[coulter_m]

Michelle,

Can you post the presentation so I can get your "code fix".  I wasn't quick enough to get it the day of your presentation.

Melissa

[mlattke]

Hi Melissa!

Yes!  I spent a bit of time visiting Utah with my family, so I've been delayed on posting the presentation here, but I'm going to post it today with some additional info as well!  

Thanks!

Michelle

[mlattke]

Hi Everyone!

Thanks so much for attending my presentation at InstructureCon!  As promised, here are my slides, along with some additional information.  You are more than welcome to use, change, adapt my code, but I cannot provide any guarantees on it, so please use it at your own risk.

See the Presentation: Templates-prezo.pptx - Google Drive

Preview and Download the Theme Files: https://pasco.instructure.com/courses/79652

What's Inside the Zip File:

CanvasGlobal.css: Add this line of code to your global css file for your Canvas instance

google-fonts.css: The css code for the Google Fonts we used in our themes (add new fonts here)

themes folder: The image files for all the themes (add, remove, or edit theme images here, note the naming convention)

themes.css: The css code for the theme ID styles (add, remove, or edit styles here)

NOTE:  The code in these files has been written assuming that all the files will be placed together in the same directory on your web server as your global css file.  If you locate them elsewhere, please adjust the included links accordingly.

What to Do with the Files in the Zip File:  Add the code from CanvasGlobal.css to your global css file for Canvas, if you have one already, or use the file as your global css file, if you don't have one.  Add the rest of the files to the https server where you host your global css file for your instance of Canvas.

To see how to add a custom css file, access this guide: How do I add custom JavaScript and CSS files to my account?

Watch a Video Showing How to Apply a Theme to Pages: http://screencast.com/t/Jcmdf2FvSZy9

Copy the Code to Place on Pages:

This is the code to paste into blank pages (change the "fill-in-id-name-here" with the CSS ID name):

<div id="fill-in-id-name-here">

<div id="fill-in-id-name-here-inner">

<h2>This is Your Title</h2>

<p> </p>

<p> </p>

<p> </p>

</div></div>

For already made pages, copy this code to the very top:

<div id="fill-in-id-name-here">

<div id="fill-in-id-name-here-inner">

And this code to the very bottom:

</div></div>

Happy designing!  Have a great summer!

Michelle

[CommunityTeam]

The session video is now available at: