Please note that our Legacy Themes have been replaced by new Thrive Theme Builder Themes. While our Legacy Themes are still functional, we are no longer actively developing them. Check out this course to find out how to switch your site to Thrive Theme Builder.

You can also read this article, which explains how to add custom CSS in Thrive Theme Builder.

There are various cases in which someone adds a custom CSS code on a Thrive Theme or on a certain page/post. The reason why someone would proceed this way is due to the fact that certain properties, such as colors, for instance, cannot be modified using the respective theme or plugin's features.

Therefore, if you choose to add custom CSS code to your Thrive Theme, it will be applied to your entire website.

However, if you add custom CSS code on an individual page/post, it will be applied only on that particular page/post, not causing changes to anything else.

Example of How Custom CSS can Affect your Website

We will try and change the color of a Thrive Shortcode progress bar using a custom CSS code. More exactly, the color that we chose for the Thrive Shortcode was orange and we want to change it to red, using a custom CSS code.

Below you can see an image of how the progress bar looked before adding the custom CSS code:

Now, we will add the custom CSS to a Thrive Theme, as seen below:

If we access any page/post of the website that has the same Shortcode element (except Landing Pages) we will notice that the custom CSS changes that we added are being applied.

Therefore, we will access the page on which the Thrive Shortcode is used and acknowledge the fact that the color has changed and you can see this in the screenshot below:

​The next thing we are going to do is add a custom CSS code on this particular page where the Thrive Shortcode is found. We will change the color from red to blue.

In order to change the color from red to blue, the custom CSS has to look like this: .pbf {background: blue !important;}

If we now access the page we will notice that the custom CSS code applied on the theme is no longer being applied on this page, thus the color of the Thrive Shortcode progress bar has changed from red to blue:


​If you have added a custom CSS code "A" on a certain Thrive Theme, and you also want to add a different custom CSS code "B" to an individual page that uses that respective theme, the custom CSS code "A" added to the theme will be canceled entirely on the page where you also added the custom CSS code "B".

What you need to do in this kind of situation is copy the entire CSS code "A" applied on the theme to the individual page first, and only after you've done this you can apply the custom CSS code "B" through which you want to change a particular aspect of that page.

Did this answer your question?