Modify Your School Theme

Your site theme dictates the look and style of your school. This article shows you how to customize the logo, background, typography, and colors of your school’s theme.

Customize Your Logo and Background

One of the most effective ways you can create a brand for your school is by adding a logo. The logo appears in the top left of all the pages in your school.

To further customize your school’s branding, you can add a homepage background image. This image will display in the homepage hero header block on your school’s homepage.

To add a logo or homepage background image to your school, complete the following steps:

  1. Log in to your Teachable school.
  2. Select Site.
  3. Choose Theme.admin-site-theme.png
  4. Click the Upload Image buttons in the logo & background section to add your own images or select from preset images.

    You can customize the following:

    1. Site Logo - The image that appears in upper left-hand corner of your site's homepage (250 x 60 pixels JPG or PNG).
    2. Favicon - The small icon that displays in your site's browser tab (32 x 32 pixels JPG or PNG).
    3. Homepage Background - The large background image in the highest position on the page (1440 x 780 pixels JPG or PNG).
    4. Homepage Background Dark Overlay - The amount of darkened overlay applied to the homepage background image.
  5. Click Save.

Customize Your Font

You can customize the font that is used across your entire school. Teachable supports the following fonts:

  • Proxima Nova
  • Alegreya Sans
  • Arial
  • Helvetica
  • Lato
  • Lucida Sans
  • Merriweather
  • Opens Sans
  • Palatino
  • Raleway
  • Source Sans Pro

If you wish to use a font that is not supported by Teachable, you may be able to add the font using code snippets and custom CSS.

Customize Your Theme Colors

You can customize the color scheme of your school by selecting from preset color scheme palettes in the Preset Palettes section.

Alternatively, you can create your own custom color palette either by selecting a color from the color picker or by entering a color hex code in the text field. Then, click Save.

TIP: You can preview your site at any time by clicking Preview in the upper right-hand corner. It may take a few minutes for changes to take effect.

Was this article helpful?
326 out of 370 found this helpful
thanks_illustration

Can't find what you're looking for?

Contact us
thanks_illustration