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.
This article is for anyone using a Site Builder compatible theme.
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 be saved in order to appear on your live site. You can always test out your changes and view them right is Site Builder before saving them to make sure you are happy with how they look!
Theme Settings are designed to apply globally 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
- Go to Design Your Site
- Select Site Builder
- Select Theme Settings
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 affect your content in any way - simply 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.
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.
Typography
You can customize the fonts and weights for your banners, headings and body text throughout your site.
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
- Go to Design Your Site
- Select Site Builder
- Select Theme Settings
- 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 to see your changes applied!
Looking to upload a logo to your site? Check out: Customize Your Site Header