Using CSS Variables

Trellis uses CSS variables to control how font, color, and layout spacing settings are applied to the Trellis Core and Bamboo, Birch, and Wisteria child themes.
Tags:

By using CSS variables in your own child theme, you can make it easy for publishers to update CSS styles in Trellis Settings.

How CSS Variables Work

Trellis’ default CSS stylesheet incorporates all of the settings shown in the table below. If you want to make use of a setting color or font in a different part of your theme, you’ll need to reference a Trellis CSS variable.

The syntax to use a CSS variable is:

var({--trellis-variable-name}, {optional-fallback-value})

For example, if using the Trellis Primary Color as the background for a div element (with a fallback value of white), you would use:

div { background-color: var(--mv-trellis-color-primary, #ffffff); }

List of Trellis CSS Variables

This table represents a full list of CSS variables available in Trellis.

CSS VariableDescriptionDefault Value
--mv-trellis-color-headingApplied to the Site Title text when there’s not a logo.#243746
--mv-trellis-color-linkApplied to:
- Link text default color
- Link icon default fill color
- Button default background color


Uses --mv-trellis-color-primary.		#275f62
--mv-trellis-color-link-hoverApplied to:
- Link text default hover color
- Link icon default hover fill cover
- Button default hover background color

Uses --mv-trellis-color-secondary.		No Default
--mv-trellis-color-primarySets a main color for use in child themes. Trellis defaults to using this color for links, buttons, and other elements in the Trellis Core theme and in Birch, Wisteria, and Bamboo.

Uses Primary Color from Trellis Settings.		No Default
--mv-trellis-color-secondarySets an alternate color for use in child themes. Trellis defaults to using this color for hover effects, alternate buttons, and other secondary elements in the Trellis Core theme and in Birch, Wisteria, and Bamboo.

Uses Secondary Color from Trellis Settings.		No Default
--mv-trellis-color-background-accentSets the background color of some elements like page and post headers in the Trellis Core theme and in Birch and Wisteria.

This setting is not used in the Bamboo child theme.

Theme support parameter:
mv_trellis_background_accent_color		#fafafa
--mv-trellis-font-bodySets the font of the body element. Select a Web Safe font for best performance.System Default (Web Safe)
--mv-trellis-font-headingSets the font for all headings. Select a Web Safe font for best performance.System Default (Web Safe)
--mv-trellis-font-sizeSets the font size for the body element.Medium (18px)
--mv-trellis-font-size-ex-smA font size derived from –mv-trellis-font-size.–mv-trellis-font-size * 0.667
--mv-trellis-font-size-lgA font size derived from –mv-trellis-font-size.–mv-trellis-font-size * 1.125
--mv-trellis-font-size-smA font size derived from –mv-trellis-font-size.–mv-trellis-font-size * 0.875
--mv-trellis-gutterAdjusts the margins between key layout elements like the primary content, sidebar, and widgets. The following defaults are used:

Compact = 10 px
Comfortable = 20 px		Comfortable
--mv-trellis-gutter-doubleA gutter value derived from –mv-trellis-gutter.–mv-trellis-gutter * 2
--mv-trellis-gutter-largeA gutter value derived from –mv-trellis-gutter.–mv-trellis-gutter * 2.5
--mv-trellis-gutter-smallA gutter value derived from –mv-trellis-gutter.floor(–mv-trellis-gutter/2)
--mv-trellis-h1-font-colorSets the color of all H1 headings in the Trellis Core theme and Bamboo, Birch, and Wisteria.

Theme support parameter:
mv_trellis_headings_control		Each theme has its own defaults.
--mv-trellis-h1-font-sizeSets the default size for H1 headings.

Full options include:
- Small: 24px
- Medium: 36px
- Large: 42px
- X-Large: 56px

Theme support parameter:
mv_trellis_headings_control		Each theme has its own defaults.
--mv-trellis-h2-font-sizeAdjusts the size of H2 elements based on the H1 size.

Theme support parameter:
mv_trellis_headings_control

Note: Only output if “Apply H1 Size to All Headings” in Trellis Settings is enabled.		–mv-trellis-h1-font-size * 0.75 (rem)
--mv-trellis-h3-font-sizeAdjusts the size of H3 elements based on the H1 size.

Theme support parameter:
mv_trellis_headings_control

Note: Only output if “Apply H1 Size to All Headings” in Trellis Settings is enabled.		–mv-trellis-h1-font-size * 0.67 (rem)
--mv-trellis-h4-font-sizeAdjusts the size of H4 elements based on the H1 size.

Theme support parameter:
mv_trellis_headings_control

Note: Only output if “Apply H1 Size to All Headings” in Trellis Settings is enabled.		–mv-trellis-h1-font-size * 0.63 (rem)
--mv-trellis-h5-font-sizeAdjusts the size of H5 elements based on the H1 size.

Theme support parameter:
mv_trellis_headings_control

Note: Only output if “Apply H1 Size to All Headings” in Trellis Settings is enabled.		–mv-trellis-h1-font-size * 0.56 (rem)
--mv-trellis-h6-font-sizeAdjusts the size of H6 elements based on the H1 size.

Theme support parameter:
mv_trellis_headings_control

Note: Only output if “Apply H1 Size to All Headings” in Trellis Settings is enabled.		–mv-trellis-h1-font-size * 0.5 (rem)
--mv-trellis-heading-font-colorSets the color of all H2 to H6 elements to match the H1 color setting in the Trellis Core theme and Bamboo, Birch, and Wisteria.

Theme support parameter:
mv_trellis_headings_control		Each theme has its own defaults.
--mv-trellis-max-logo-sizeSets the max logo height value that can be shown in the header.

Full options include:
- Small (50px)
- Medium (75px)
- Large (100px)
- Extra Large (150px)		Medium (75px)

Disabling All Trellis CSS Styling

If you’d like to start from scratch and discard all default Trellis Core CSS styling, add the following code in your functions.php file:

/** Turn Off Trellis Parent Theme CSS **
 * Use add_filter to remove all Trellis parent theme CSS definitions.
*/

 add_filter( 'mv_trellis_enqueue_main_style', '__return_false' );