There are two ways in which you can add custom CSS in Thrive Theme Builder, depending on where you want it to be applied.

You can either add custom CSS to an individual page or post, from a Thrive Theme Builder template, or you can add it to the whole theme.

In order to add custom CSS to a certain page, you have to access the template applied to it first. in your Thrive Theme Builder dashboard, go to the "Templates" section from the left sidebar:

Then, hover over the template applied to the page/post that you want to add the custom CSS for, and click on "Edit", in order to access the Thrive Theme Builder editor:

After the template opens in the editor, you need to find the class of the element that you want to add the custom CSS for.

In order to do that, first preview the page by clicking on the "Preview" button from the lower middle part of the editor:

In the preview, select the item that you want to add the custom CSS for. As an example, I will select the title. Then, right-click on it, and a small list of options will appear. From that list, choose "Inspect":

The Developer Tools will open in a new tab.

As an example, I will change the title color.

For this, I will first change the color from the developer tools tab. The way to do that is to make sure that the element is selected (in this case, the title). In the DevTools tab, you will see a section is highlighted.

On the right-hand side of the tab, you can find the class and some options for the selected element:

Firstly, I will change the color of the title. To do that, I will click on the small color box next to the "Color" code:

A color pop-up will open. In order to change the color, you can either pick one using the color picker, or you can enter a HEX code in the dedicated field:

After choosing a color, click anywhere outside the color picker pop-up.

Next, you have to go back to the Thrive Theme Builder editor. Since there is no "Custom CSS" option in this editor, you will have to access the Thrive Architect editor. For that, click on the Thrive Architect symbol from the right sidebar:

This will access the Thrive Architect editor. On the right sidebar of this editor, go to the settings (gear icon):

From the options that open, click on "Advanced Settings":

Then, the list of the advanced options will open. Click on "Custom CSS":

Check out this article if you want to find out more about how to add custom CSS to a Thrive Architect post or page.

The custom CSS layout will pop up on your screen. You can now start typing. For my example, the title color change, I have to enter the class, and then the color. For that, I will go back to the DevTools tab.

I will copy the class and the color and paste it into the custom CSS layout pop up, like so:

Then, in order to save the custom CSS and exit this pop-up, you can click on the green check sign from the top right corner:

When you return to the editor, the modifications should have been applied. In this case, the color of the title turned to the color previously selected from the DevTools tab:

This is how you can apply custom CSS to a page or post from within a Thrive Theme Builder template.

If you want the custom CSS to be added to the entire theme, follow these steps:

In your WordPress Admin Dashboard, on the left sidebar, hover over "Appearance":

From the small menu that opens, choose the "Customize" option:

This will open the customization options. On the right side of the page that opens, you will see a preview of your website, and on the left sidebar, there are some options for the theme.

The last available option here is called "Additional CSS". Click on the arrow next to it in order to expand the option:

Once the "Additional CSS" section expands, you can simply insert your custom CSS into this field:

As an example, I inserted the same CSS as the one in the example above. The color of the title will automatically change:

Note: You can optionally use the "Comment" option of the custom CSS code in the format: (/* Example */), to write down a comment regarding the code, something that might help you in case you are inserting multiple custom CSS codes into this field:

Lastly, don't forget to save your work by clicking on "Save Draft" or "Publish", depending on the action that you want to take:

This is how you can add custom CSS to a single individual page/post through a template, or theme-wide.

If you want to find out more information about various Thrive Theme Builder features, make sure to check out the dedicated knowledge base section.

I hope this article was useful for you. If so, please make sure to rate it with a smile below :)
​