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 Branding

Your site logo, A favicon is a small image or icon that displays in your site's browser tab.favicon, and homepage background/thumbnail can all be uploaded in the top section of your Site > Theme menu.

To upload an image, click the Upload Image button and select an image file from your computer. To replace an image with a new image, click Replace Image. To remove an image, click Reset

If your school was created before September 18, 2019, you will be able to upload a Site Logo, Favicon, and Homepage Background.

If your school was created on or after September 18, 2019, you will be able to upload a Site Logo, Favicon, and School Thumbnail.

sidebysideupdated2.jpg

Site Logo:

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. When users click on your logo, they will be brought to your school homepage.

logo.png

The recommended size for your site logo image is 250 x 60 pixels (JPG or PNG).

Favicon: 

Your favicon is the small image that displays in your site’s browser tab.

favicon.png

The recommended size for your favicon image is 32 x 32 pixels (JPG or PNG).

Homepage Background & Homepage Background Dark Overlay:

The homepage background fields are only available to schools created before September 18, 2019. These schools were created with homepages on the Page Editor 1.0.

The homepage background image populates a banner image in the Homepage Hero Header block on your school homepage. It also will control the background image of your blog, if enabled. The recommended size for your homepage background image is 1440 x 780 pixels (JPG or PNG).

The Homepage Background Dark Overlay slide toggle increases or decreases the amount of darkened overlay applied to the homepage background image.

overlaygif.gif

Schools created on or after September 18, 2019 do not have this field, as newer schools were created with homepages on Page Editor 2.0. For these schools, the homepage background can be edited directly on the page editor.

School Thumbnail:

The school thumbnail field is only available for schools created on or after September 18, 2019.

The school thumbnail image is the image used to represent your school in the myTeachable dashboard. It will also control the background image of your blog, if enabled. The recommended size for your school thumbnail image is 1440 x 780 pixels (JPG or PNG).

mytdash.png

For schools created before September 18, 2019, the Homepage Background field will also serve as your school thumbnail. 

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 CSSHowever, please note custom code is not supported by Teachable Customer Care.

Customize Your Theme Colors

The color scheme of your school is customized in the Colors section.

You can select 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 A hex code is a six-digit combination of numbers and letters that represents a specific color. You can find a hex code from any HTML color picker, such as this one.hex code in the text fields for each category.

site-theme-colors.png

Each category controls the colors of different elements across your school.

NOTE: The colors set here can be overridden by colors selected directly within Page Editor 2.0. Each block in Page Editor 2.0 has a Design tab where you can choose color settings on a block-by-block basis.

TIP: If you copy and paste text from other sources into Teachable, it is possible that you will bring over color formatting from your original source. We recommend pasting your content into Teachable without formatting, or typing your content directly into Teachable.

Nav Bar & Footer Background

Sets the background color of the school navigation bar, footer, and email header.
navbar_footerbackground.png

Navigation Bar Links 

Sets the color of links within the school navigation bar. There are two fields available for this category. The first field sets the font color of links when the navigation bar is fixed at the top of the page, and the second field sets the font color of links when the navigation bar is scrolling.

fixedvscrolling.gif

TIP: On each page, you can set your navigation bar to be transparent or solid. This can be set in the Page Settings of each page. (You can learn more about page settings for Page Editor 1.0 here, and Page Editor 2.0 here).

Buttons & Links 

Sets the color of buttons and links across your school. This also sets the color of course prices and progress bars within the course box.

buttonlinkscolors.png

Headings

Sets the color of heading text across your school. This includes course and lecture titles in the student curriculum view and product titles within the course or coaching box.

headingscolors.png

Homepage Heading & Subtitle

Sets the font color of the heading and subtitle text on the homepage hero header block. This field is only applicable to schools with a homepage created on Page Editor 1.0.

Course Page Heading & Subtitle

Sets the font color of the heading and subtitle text on the course hero header block on course sales pages. This field is only applicable to schools with a sales page created on Page Editor 1.0.  

Body Text

Sets the font color of body text across your pages and products. This also sets the color of lecture titles in the course curriculum block, course subtitles within the course box, and checkout page testimonials.

bodytextcolors.png

Video Player

Sets the color of the video player for videos uploaded into course lectures.

Was this article helpful?
582 out of 801 found this helpful
thanks_illustration

Can't find what you're looking for?

Contact us
thanks_illustration