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).

*Important Disclaimer #1* 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!

*Important Disclaimer #2* When you add custom CSS to your course, most often it will NOT impact what you see when you are editing the course ("editor pages"). Please preview your course pages and you should see your custom CSS working. Our editor uses different CSS styles.

⭐️ UPDATE: We added the ability to change your header images to full-width using a simple toggle button! No need for fancy CSS any longer for this.

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 Course Settings > Manage Options > Head Tag Code Injection section. Find that page by going to:

  • Click into your course from Courses dashboard

  • Then in the left sidebar scroll down to the Course Settings

  • Click Manage Options and you'll find the Head Tag Code Injection area

  • Add this code and click the Save button...

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;}

1️⃣ Changing the BODY font and size throughout your entire course

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)

2️⃣ Changing the HEADING font and size throughout your entire course

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%)

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 in preview mode (the preview icon [↗️] is always at the top right of any page you are editing in Teachery 🤗 ).

As you save changes to the custom CSS in the Manage Options section, you can refresh the Overview/Lesson page you are previewing and see the changes applied (also, you may need to "hard refresh" the Overview/Lesson pages to see the CSS changes take effect - 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.

Customize the Button Color and Text Color on Your Login and Password Reset Pages

The course login and password reset pages can accept custom CSS either added on the page or by adding CSS to the HEAD TAG in Manage Options (recommended).

Here's the snippet of CSS to add:

.editor-button:first-child {background-color:#dea9a2 !important;}.editor-button:first-child:hover {background-color:#4a252f !important;}.editor-button.editor-button-clear {color:#4a252f !important;}.editor-button.editor-button-clear:hover {color:#a3907c !important;}

Just update the colors in the CSS to match your branding and you're good to go! The buttons and text on these pages can now match your branding! 🙌

Adding a Background Image to Your Course

If you want to spice up your course design and add a background texture or image, you can absolutely make that happen! Here's the code to add to the Head Tag Code Injection section:

#course-background {background: url('http://image.jpg') no-repeat bottom center !important; background-size: contain !important;}

📌 Don't forget to update the http://image.jpg to your own image name/URL!


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 Code Injection 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 in the code snippet above to whatever favicon you want to use!

💡 NOTE: If you use a JPG or PNG and the favicon is not displaying, you can convert the image to a .ico (icon) file using CloudConvert. Then upload the .ico file and use the URL for your favicon.

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:

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

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?