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.
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 the styles {…}
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
Font Size
Choose up to a 20px font size.
Heading font
This font will be applied to your headings, including your banner heading.
Subheading font
This font will be applied to your Subheadings.
Body font
Your Body font selection will affect sections such as your buttons, your course description, checklist and more.
Favicon
The favicon is the image at the beginning the browser tab. We recommend using a 1:1 ratio image, recommended dimensions: 128px by 128px or 256px x 256px in .png (not .ico or .svg or .jpg)
Feel free to use a graphic editor or uploading your logo to https://realfavicongenerator.net.
Sign into Thinkific then click Design Your Site > Site Builder > Theme Settings tab > Favicon > Upload New > Save. A window should open allowing you to upload an image. If it doesn't, then try a different browser. Upload a .png file 256x256, and it must be square. The uploaded file will be converted to a small favicon. Do NOT upload a .ico or .svg or .jpg file.
To test this is working, open your site in a new tab and see the new favicon in the browser. If the favicon doesn't show, then refresh the page or click Save in Thinkific. If your favicon doesn't appear to be the same size as favicons in other tabs, then the file you uploaded to Thinkific was the wrong size.
Happy customizing!