Making CSS Edits

Although Total includes tons of built-in options for customizing the theme, many people may want to make additional edits or more advanced edits via CSS. Below are the 2 methods you should be using for your tweaks.

Important: The number 1 rule when working with a WordPress theme is to NEVER edit the style.css file manually. If you do this you will lose all your edits when you update your theme and updating your theme is crucial. And remember… you have purchased a “Theme” not endless access to a free web designer. Customizations are outside the scope of support. Of course if you want some help with something very small and simple let us know and we will assist you.

Method 1: Using The Custom CSS Panel

Total comes with an advanced Custom CSS panel with a built-in CSS editor so you can easily make tweaks to your site and the code will be added directly into the header tag of your site via the wp_head filter.

total-custom-css

Method 2: Using WordPress Additional CSS Customizer Setting

WordPress added a new built-in CSS field to the Customizer in version 4.7. So if you go to Appearance > Customizer you will find another field you can use to add your custom CSS which will display on the site live as you add it.

Method 3: Using A Child theme

A child theme is best when making a lot of changes or when you need to make template/filter/function tweaks besides the CSS (or simply because you prefer using child themes). You can download a sample child right from our github page, see link below:

Sample Total Child Theme

Important: If you didn’t start with a child theme and are switching to a child theme now, please read the important message at the top of the following page.

Method 4: Using the Visual Composer (Add CSS for a specific page only)

If you want to apply custom CSS for a specific page only you can do so via the Visual Composer page builder. See the screenshot below:

visual-composer-custom-css