What are Theme Colors & How to Use Them
When using Thrive Theme Builder, you should know that each theme that you purchase will come with its own branding. Of course, everything can be customized as you wish.
What are Theme Colors? Where Can I Find Them?
Each Thrive Theme Builder Theme comes with its own “Theme Colors”. This means that, when the theme was built, we established a range of colors that go with each other, so that the theme will be esthetically pleasing.
When editing a template in the Thrive Theme Builder Editor, each element or section that you want to customize and you can choose a color for, will have the "Theme Colors" section in the color pop-up, so that you can use the "Theme Colors" for every element/section.
As you know, the “Background Style” option allows you to change the background of a section or element. If you choose either of those (in this case, I will choose the “Content” section), and go to the “Background Style” option from the left sidebar, I can add a new layer:
If I choose, for example, a “Solid Color” as a layer, the color pop-up will open:
Here is where you can see that the color pop-up will also include the “Theme Colors” section:
This section will be available in all the color pop-ups from the template, no matter what section or element you are opening it from.
How Can I Use the Theme Colors?
There are two ways in which you can modify and add theme colors.
The first one is from the Thrive Theme Builder Dashboard, and the other one is from the Thrive Theme Builder Editor.
Theme Colors in the Thrive Theme Builder Dashboard
First of all, start by accessing Thrive Theme Builder. In your WordPress Admin Dashboard, hover over “Thrive Dashboard”:
A small sub menu will open on the right side. Click on "Thrive Theme Builder":
You will then be taken to the Thrive Theme Builder Dashboard. Here, on the left sidebar, you will notice some sections. Go to the “Branding” section:
After you go to the "Branding" section, on the left side of the page that opens, you will notice three options: Theme Colors, Logo and Favicon. On the right side of the page, you will be able to see a live preview of your website.
Click on the “Theme Colors” section in order to expand it:
You can edit the theme colors from here, if you want to change them:
Here is how to do that. To begin with, click on the first field, to choose which theme color you want to edit:
This will open a sub-menu, where you are able to find the theme default and main colors. Depending on the theme that you have activated, the number of colors will vary:
Select the color that you want to edit by clicking on it:
Then, in order to modify the color, click on the box with the respective color, as shown in the image below:
This will open the color pop-up, where you can change the actual color from. Remember that, when you modify a color, the changes will be applied to all the theme templates. This is why the pop-up contains a warning message, letting you know that you are editing a global color. To find out more about global colors and how to use them, check out this article.
In order to choose a color, you can use the color picker and manually select it, or you can enter a HEX/RGB code in the dedicated field:
Besides the color, you can also modify the opacity, by entering a value from 1 to 100 in the “Opacity” field:
When you’re done choosing a new color, click on “Apply”:
You will be shown a success message, and the color will be changed automatically on all the templates:
Note: The theme color you define/choose to use in the "Branding" section will be automatically matched with the color of the various elements from the editor. This means that:
- whenever you will edit a Theme Template and add an element (such as a "Button" or a "Toggle" element") to it, the color of the element will match the theme color you have defined;
- when you will load/switch the template of particular elements that have this option (for e.g. "Toggle" element, "Button" element, "Tabs" element), the color on the template will also match the Theme Color;
- every time you will use a "Content Block" element, its main colors will also automatically be the same as the Theme Color.
This is all part of the Smart Color Technology built into Thrive Theme Builder and it will make your theme building experience much easier and better!
Reset the palette
If you want to bring the palette to its original colors, you can do that, as well. Simply click on he "Reset" icon:
If you do that, a message will appear on the top, to confirm that you want to reset the palette. Click on "Ok" to confirm:
This is how easily you can change the theme colors from the Thrive Theme Builder Dashboard.
As mentioned in the beginning of the article, the colors can also be changed from the Thrive Theme Builder Editor.
Theme Colors in the Thrive Theme Builder Editor
In order to access the editor, click on the “Templates” section of the left sidebar of the Thrive Theme Builder Dashboard:
This will open the page with all your templates. Hover over one of the templates, and click on “Edit”:
Then, Thrive Theme Builder Editor will open in a new tab. On the right sidebar, in the editor, there is the Central Style Panel. This is where you can change the theme colors from:
When you click on it, the “Style Editor” will open:
You will find the same colors as the ones from the “Theme Colors” section of the Thrive Theme Builder Dashboard. We do have a separate article that goes through all of the steps that you need to go through in order to change the colors from here. Check out this article if you want to change the colors from here.
Note: Remember that, when you change a theme color, whether you do that from the Thrive Theme Builder Dashboard, or from the editor, the color will automatically change on every template where it was used.
Add a New Global Theme Color
As you might have noticed, when you expand the "Theme Colors" option in the Thrive Theme Builder Dashboard, there is a "My Saved Theme Colors" section:
This means that you can save a color and use it globally, on more templates. Here is how you can do that:
In the Thrive Theme Builder Editor, open an item for which you can change the color. As an example, I will select a "Text" element, and choose the “Color” option from the left sidebar:
The color pop-up will open. First, I will unlink the theme color, by clicking on the “Unlink” icon:
This will give you access to the color picker. Here, choose the color that you want to save as a global theme color. You can either pick the color manually, or you can enter a HEX / RGB code:
Then, right under the “My Colors” section there is a plus sign. Click on it:
You then have to choose if you want to save the color as a global one, or as a favorite. Click on “Global”:
After this, the color will be added to the “My Colors” section, like so:
If you want, you can rename the color as you wish, edit it, or unlink it, using the options next to it.
When you’re done customizing the global theme color, click on “Apply”:
Note: After creating a global color, you will not be able to find it in the “My Saved Theme Colors” section, unless you use it somewhere on your template.
After applying the color to the “Text” element, if I go back to the Thrive Theme Builder Dashboard, I will be able to see the color inside the “My Saved Theme Colors” section:
These were the ways in which you can use the "Theme Colors". If you need more information about various Thrive Theme Builder features or elements, make sure to check out the knowledge base articles we have created.
I hope this article was helpful. If so, don't forget to rate it with a smile below:)