Applying Custom CSS, HTML and JavaScript

Updated 1 year ago

Global Custom CSS #

To customize theme CSS you can use "Custom CSS" field located on Zephyr > Theme Options > Custom Code > Custom CSS page. Code from this field will be added to the Theme Options generated styles after all other theme CSS rules.

Using Variables in Custom CSS #

Zephyr version 7.14 contains some global values as CSS variables. Mostly the colors from a Theme Options > Colors admin page.

You can see all global CSS vars in DevTools of any browser, e.g. in Chrome with your site opened press F12 and scroll the right panel to see the ":root"

So you can use these variables in your custom CSS code:

.my-element {
    background: var(--color-content-primary-grad);
    border: 5px solid var(--color-content-border);
    color: var(--color-header-middle-bg);
}

After changing colors in Theme Options > Colors you don't need to edit your custom code, all colors will apply automatically.

Global Custom HTML and JavaScript #

When you want to add some script or some additional element to all pages of your site, you can use the "Custom HTML" field located on Zephyr > Theme Options > Custom Code > Custom HTML.

Code from these fields will be added to the head or footer section of your site. You can use JavaScript code with <script></script> tags. Also, you can add Google Analytics or other tracking code into these fields.

Custom HTML and JavaScript for Particular Page #

You can append your custom code via WPBakery Page Builder to a particular page using Raw HTML and Raw JS elements.