Do you want to customize your pages and posts built using Thrive Architect and the Thrive Theme Builder? You can do this using custom CSS on specific pages or posts or across the theme on your website.
In this article we’ll see how you can apply custom CSS to specific pages or posts and also globally through the theme.
Adding Custom CSS to a Post or Page Through a Template
To add custom CSS to a page, you’ll first need to open the template applied to it. This can be done by opening your WordPress admin area, navigating to Thrive Dashboard >> Thrive Theme Builder, and clicking on Templates.
On the templates page, hover on the template you want to add the custom CSS to and click Edit.
Clicking Edit will open the template in the template editor.
Let’s say we want to add a custom CSS to change the color or a heading on the page. To be able to add custom CSS, you’ll need the class name of the element.
To find the heading element’s class name, click the Preview button seen at the bottom of the screen.
On the preview page, select the page heading, right click on it and click on Inspect.
In the window panel that appears, open the Styles tab and click on the applied color under the title class. In this example, we see inherit – which means the color was inherited from the theme. So, click on Inherit.
After clicking Inherit, click the color box and select the color you want the heading to appear in.
When you select the color for your post title, select and copy the custom CSS from this section.
To add this copied CSS code, go back to the template editor and click on the Thrive Architect logo in the right panel.
In the Thrive Architect editor, click the gear icon to open Settings.
Under Thrive Architect Settings, extend Advanced Settings.
Under Advanced settings, click to extend the Custom CSS & HTML tab.
When you extend this tab, click on Custom CSS.
Clicking Custom CSS will open a page where you can enter / paste the CSS you copied while on the preview screen. Please ensure the CSS code you entered is correct and you close the curly bracket.
After you enter the custom CSS code, click the checkmark on the top right of this page.
Clicking the checkmark will take you back to the editor where you can click the Save Work button to save all changes.
Adding Custom CSS Globally Through the Theme
Just like a custom CSS code can be added to a page or post, you can add it to the theme globally.
To add the custom CSS code to a theme, open your WordPress admin area, navigate to Appearance >> Customize.
Clicking Customize will take you to the theme customizer that’ll display the website page on the right and the settings on the left. In the left column, click Additional CSS.
Under Additional CSS, you’ll see a field where you can enter the Custom CSS you want to apply across the theme.
Once you finish entering the custom CSS code, ensure you click Publish.
We’ve just seen how you can add custom CSS code to individual pages/posts or globally throughout the theme. You can also watch the video below that’ll take you through the process.
Next, did you know you could add custom CSS code to all landing pages on your website using the Script Manager? Here’s a document that’ll help.