*Important Disclaimer Alert* While we are happy to allow for custom CSS, we can't ensure support for any custom CSS you add to your course(s). We'll do our best to help, but know that custom CSS can cause issues if not added properly. Proceed at your own risk!

With Teachery, we've tried to create a simple course platform that takes the headache out of course creation. That being said, simplicity can be limiting, which is why we allow for custom CSS in multiple areas of your online course(s).

Here are just a few examples of the things you can do with custom CSS in Teachery:
 

Customize and Control Your Course Body Font and Heading Fonts

Controlling all your course font in one place can be tricky, but you can do it with custom CSS. 

Add this snippet of code (below) in the Manage Options page of your course in the Head Tag Tracking Code section. Find that page by going to:

  • Click into your course from My Courses dashboard
  • Then in the left sidebar scroll down to the Manage Options link
  • Scroll down to the HEAD TAG TRACKING CODE section
  • Add this code and click the Save button...

<style>
p, ul, li, ol, .questions, .description, .module-meta, .module-transcript, .get-started, .inner { font-size: 17px !important; line-height: 3rem !important; font-family: Roboto !important;}
h1, h2, h3, h4 {font-family: Playfair Display !important; line-height: 150% !important;}
ul, ol {margin-bottom: 40px !important;}
</style>

The first part of this custom CSS (p, ul, li, ol, .questions, .description, .module-meta, .module-transcript, .get-started, .inner) sets the: 

  1. Body font throughout the entire course (to 17px)
  2. The font itself (to Roboto font, one of our supported custom Google fonts*)
  3. Adjusts the line-height to have more spacing (to 3rem)

The second part of this custom CSS (h1, h2, h3, h4) sets the:

  1. Heading 1, Heading 2, Heading 3, and Heading 4 font (to Playfair Display font)
  2. Adjusts the line-height to have more spacing (to 150%)

The last part of this custom CSS (ul, ol) sets the:

  1. Bottom margin of bulleted lists for better readability (to 40px)

All of these items can be adjusted/removed to your liking. We recommend having one browser tab open with your Manage Options page and a second tab open with your course Overview or a course Lesson. As you save changes to the custom CSS in the Manage Options section, you can refresh the Overview/Lesson and see the changes applied (remember: you may need to "hard refresh" the Overview/Lesson pages to see the CSS changes take affect - in Google Chrome [Mac] press shift key + click browser refresh).

*You can see our list of supported Google fonts by going to the Overview lesson of your course and clicking the "Change Course Font" button on the top of that page. We recommend choosing the body font from the Change Course Font dropdown menu to match the custom CSS body font.
 

Changing Header Images to Full Browser Width (Course Pages or Landing Pages)

FOR COURSE PAGES:
You'll want to use a 2000px* width x 500px height image to have this custom CSS work for the header image in your course. 

The first step is to add the header image to your course by navigating to the Overview lesson and uploading the image as you normally would. 

Then you'll want to add this snippet of code to the HEAD TAG TRACKING CODE section (same place as outlined above):

<style>
img.cover-image {max-height: none !important;}
.logo {max-width: 100% !important;}
</style>

Save the Manage Options page after adding the snippet of code and give any lesson of your course a hard refresh. You should see your header go 100% full width now.

*The width of the header image can actually be anywhere between 2000px - 2400px. 

**

FOR LANDING PAGES:
You'll want to use a 2000px* width x 500px height image to have this custom CSS work for the header image in your course. 

The first step is to add the header image to your Landing Page by navigating to the Landing Page and uploading the header image as you normally would. 

Then you'll want to add this snippet of code to the Add Tracking button (top toolbar in the Landing Page), in the HEAD TAG TRACKING CODE section:

<style>
header>a, header>div {width: 100% !important; display:block;margin:auto;max-width:100% !important;}
</style>

Save the Add Tracking box then preview your Landing Page. You should see your header go 100% full width now.

If you have multiple Landing Pages, you'll need to add this code to each individual Landing Page.

*The width of the header image can actually be anywhere between 2000px - 2400px.
 

Adding a Custom Favicon Throughout Your Course

Favicons are an often forgotten part of the website experience. By default your course will inherit the Teachery favicon. To override this, you need one snippet of code added to the HEAD TAG TRACKING CODE section:

<link rel="icon" type="image/png" href="https://d1j8pt39hxlh3d.cloudfront.net/development/emojione/2.0/842/png/7594.png">

You'll want to make sure you update the image URL to whatever favicon you want to use! If you've never made a favicon before, you can use the free Favicon Generator to help you. If you need a place to upload your favicon so you can link to it, we recommend imgur.com for image storage.
 

Adding a Drop Shadow Effect to Your Course (Default Template)

This is a nice effect if you want your course to look like it has some visual depth. Simply add this snippet of code to the HEAD TRACKING CODE in the Manage Options section of your course:

<style>
#lessons-page { margin-bottom:75px; box-shadow: 0px 20px 30px rgba(0,0,0,0.2)}
</style>

You can thank fellow Teachery customer Jacob Wyatt for figuring this one out!

**
 
We'll add more custom CSS tricks as we (and you!) find them... 😎 

Did this answer your question?