Custom Color Themes

You have the possibility to change the style and color theme of your program inside Heights Platform. To do that, you can choose to use our built-in color themes or customize your own.

Built-in color themes

To access the built-in color themes, from your creator dashboard, go to "Account Settings" (located on the vertical menu on the left side of the page, all the way to the bottom).

Click on " Edit Account Settings" and wait for the page to load. 

Then scroll down until you see " Color Theme". To change your platform theme, simply select one of the colored boxes and click on "Update Account Settings" at the bottom of the page, in order to save your changes.

Custom Color Themes

Our built-in color themes offer a variety of color options to choose from, but many creators want to further customize their Heights Platform program to match their exact brand colors. When editing your Account Settings you can create a custom theme by clicking the button "Create Custom Theme" underneath the list of built-in themes.

The custom color theme editor allows you to easily build a custom color scheme for your program interface and pages by pasting in the hex color codes you want to use or using our simple color pickers to design and preview your theme in real-time. 

When you configure the colors of your choice, Heights will automatically create a custom theme for your program, adjusting the brightness of your chosen colors where necessary, providing styling for hover effects, and more, without the need for you to spend time messing around with HTML or CSS. 

Understanding Color Options

When building a color theme, you can adjust 3 colors, and a navigation text shade. Here's where each of these colors will be used: 

1. Main Color - This color is used on links and as subtle shading throughout areas of your program. This color is used over both dark and light backgrounds. We'll automatically adjust brightness in certain areas to help provide better contrast, but in general, a color with a medium brightness/shade works best. 

2. Top Navigation Bar Color - In many of the built-in color themes, this is the same color as the main color, and it works great that way, but if you want to add a bit more variation to your program styling, you can set the top navigation bar color independently of the main color. 

3. Accent Color - This color is used primarily on button links that save or submit content. The complete lesson button, purchase button, save buttons, and notification bubbles use the accent color. It is best to have this color contrast with the top navigation and main color. 

4. Top Navigation Text Shade - This slider allows you to adjust the text color in the top navigation bar black, white, or a shade in between to ensure the text is clearly visible with your chosen top navigation bar color. Usually, you'll choose completely white or black for this color, but there are cases where a lighter or darker grey looks great too. 

If you'd like more granular control of a specific area in the interface, you can add custom CSS in the Custom Code section of your account settings. If you change back to a built-in theme from your custom theme, you can always reactivate your custom theme by navigating to the custom theme edit page and clicking the "Apply Custom Theme" button at the bottom of the page. 

Sidebar Color Settings

You can change the appearance of the sidebar from the Account Settings. The sidebar is located on the left-hand side of the screen and it contains a list of all your courses, modules, and lessons for your students to see and understand their progression.

You can choose to set the color of the sidebar between:

• Dark
• Bright
• Transparent

The picture above shows how the different styles of sidebars look.

To change the sidebar style, head to Account Settings. Under "Color Theme" you will see the option to change the sidebar color under "Sidebar Style". Here you can change the sidebar setting by selecting between Dark, Bright and Transparent, as shown below.

You can also change the sidebar style from the "Custom Color Theme" page.

Remember to click the "Update Account Settings" button at the end of the page in order to save your changes. 

If you are using a custom color theme, we recommend choosing a bolder or more vivid color tone for the "Main Color", especially if you choose a Bright or Transparent sidebar setting. Using a pale color tone may affect readability in the account settings menu and sidebar.

Text Color Settings

You can change the text color for certain areas of your lessons with either embedded HTML, or by using the custom code section in your account settings if you wish to have colors that apply to all lessons. The lesson editor does not offer a built-in text color picker at this time.

For example, when you click on the "embed" button in the editor toolbar you can enter HTML with inline CSS to change the color of your text. For example:

<p style="color: red;">My Text is Red.</p>

You can change the font size with custom code as well. You can learn more here: Custom Code.