Add custom CSS

Highend gives you three ways to add custom CSS, depending on how broadly you want it applied: the WordPress Customizer, a dedicated field in Highend Options, or a class scoped to a single page or element.

Site-wide, in the CustomizerCopy Anchor Link

WordPress's built-in Additional CSS panel works normally in Highend.

Where to find it: go to AppearanceCustomizeAdditional CSS.

Site-wide, in Highend OptionsCopy Anchor Link

Highend also has its own Custom CSS field, which keeps your CSS with the rest of your theme settings instead of in the Customizer.

Where to find it: go to HighendHighend OptionsGeneral Settings.

Both fields end up in the same generated stylesheet, so which one you use is a matter of preference: use whichever you're more likely to remember to check later.

Scoped to one pageCopy Anchor Link

Every page, post, portfolio item, team member, and FAQ item has a Body Classes field in the Advanced tab of its Highend Settings box. Whatever you enter there is added to that page's <body> tag, so you can write CSS that only applies to it.

/* In Additional CSS, targeting a page with "landing-page" in Body Classes */
body.landing-page #main-nav {
	display: none;
}

Scoped to one elementCopy Anchor Link

Most WPBakery rows, columns, and Highend elements have an Extra class name field in their settings panel (under General for rows and columns, Advanced for most other elements). It works the same way: add a class there, then write CSS against it.

Built-in helper classesCopy Anchor Link

Highend's stylesheet includes a small set of utility classes you can drop into any element's Extra class name field:

RelatedCopy Anchor Link