Theme Settings allow you to have full control over the look and feel of your site pages. This is the perfect place to apply branding and accent colors, styles, and typography across every element of your site, making it truly your own.
About This Feature
Your Theme Settings apply to all of your external facing landing pages like your home page and course landing pages. Here you can apply color and font changes that will modify the look of all your pages at once.
Any changes that are applied to your Theme Settings must be saved in order to appear on your live site. You can always test out your changes and view them right in Site Builder before saving them to make sure you are happy with how they look!
Theme Settings are designed to apply to your entire Thinkific website, to make sure your site has a consistent feel across the board. Colors and fonts cannot currently be customized per page.
How to Access Your Theme Settings
- Select Channels, then Website from your Admin Dashboard
- Select a page to edit in Site Builder
- Click the Theme Settings tab on the left-hand menu to access the settings for your theme
Styles
Applying a new style will drastically change the look and feel of your theme. Most Thinkific themes feature several styles, ranging from bold to light. When applied, colors and typography will be overridden to create a different mood for your theme. For instance, in the example below, Empire has 4 style options:
- Halo
- Jet
- Spark
- Edge
Changing from one style to another won’t change your content — it will only adjust the colors, typography, and stock images.
Try them out! If you’d like to override any of the settings that your Style has set, or if you want to go a completely different direction from the Style, you can adjust each element individually through the following settings.
Colors
Adjusting landing page colors is the quickest way to apply your own branding and aesthetic to your site, and Site Builder gives you granular control over every color element of your page with the following settings. Note that the amount of customization available within this section will vary depending on the theme you have chosen.
Background
-
Page - This setting controls the color associated with your entire page background. We recommend selecting a color that contrasts nicely with your text color. For example, if you’re using dark text, we’d recommend using a light color, like white, that your text can stand out against.
-
Box - Controls the color associated with various boxes found on your landing page, including the course card, course categories, and countdown box.
-
Hover - Controls the hover state (accent color) associated with the boxes listed above.
Text
-
Headings - This setting controls the text color associated with your headings and subheadings.
-
Body - Controls the text color associated with your body text, or paragraph text.
Buttons and Links
-
Button - Select a color for your CTA buttons.
-
Button text - This setting controls the text features on your CTA buttons.
-
Secondary button - Controls the secondary button color, if any are specified.
-
Secondary button text - Controls secondary button color text, if any are specified.
-
Link - Controls the link (redirect) color.
Accent
-
Primary - Select a primary accent color.
- Styled Background - Select a background color to compliment your primary accent color
Typography
You can customize the fonts and weights for your banners, headings, and body text throughout your site. On the following theme versions, you are able to configure desktop and mobile typography separately:
- Vogue theme version 1.23.4 and above,
- Vision theme version 1.28.0 and above,
- Empire theme version 1.29.1 and above.
Not sure what theme version you're on? Check out this article: Which Theme version am I on?
Favicon
The favicon is the small image that appears in your browser tab when loading your site.
Recommended Image Specifications:
- Use a 1:1 ratio image
- Dimensions: 128px by 128px or 256px x 256px
- File type: .png (do not upload .ico or .svg or .jpg)
If you need to update the size or file type of your image, we recommend using a graphic editor or uploading your logo to https://realfavicongenerator.net.
How to Upload Your Favicon Image
- Select Channels, then Websites from your Admin Dashboard
- Select a page to edit in Site Builder
- Click the Theme Settings tab on the left-hand menu to access the settings for your theme
- Select Favicon
- Click Upload Image
- Select or Drag & Drop image file
- Click Upload
- Click Save to apply changes
To test this what it looks like, open your site in a new browser tab. You might need to refresh your browser cache to see your changes applied!
Looking to upload a logo to your site? Check out: Customize Your Site Header