Updated 3 months 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:
border: 5px solid var(--color-content-border);
After changing colors in Theme Options > Colors you don't need to edit your custom code, all colors will apply automatically.
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.
You can append your custom code via WPBakery Page Builder to a particular page using Raw HTML and Raw JS elements.