Customizing CSS

If you’re a beginner/intermediate user of CSS you may look under the hood of Mai Theme and see things look a little stranger than you’re used to when it comes to our CSS.

Mai Theme makes extensive use of “ custom properties”, also known as “CSS variables” to allow much more efficient overrides when customizing your theme, and much less overall code in our themes themselves.

Understanding Custom Properties (CSS Variables)

An easy way to think about custom properties is to think of them as variables you can “intercept” before the element itself is declared. Many of our custom properties are there purely for this reason; they aren’t even used in our code. We offer the property, but just use the default. If you change a setting or intercept the property in your own CSS code, that is what’s used instead.

The CSS doesn’t need to cascade or override because the custom property value itself has been changed before it’s used.

Let’s look at a real example in our themes.

All of our menus have font weight, size, and family custom properties available, though they aren’t used in every theme. See below (don’t copy this snippet):

.menu {
	font-weight: var(--menu-font-weight, inherit);
	font-size: var(--menu-font-size, var(--font-size-md));
	font-family: var(--menu-font-family, inherit);
}

Since these properties are not used, you can just intercept them early on, in the root of the document like this:

:root {
	--menu-font-size: 16px;
	--menu-font-family: var(--heading-font-family);
	--menu-font-weight: var(--heading-font-weight);
}

The above code tells all of our menus to use the heading font family and weight (as selected in the Customizer) and a font size of 16px.

If you want to only apply these changes to a specific menu, you can target that menu only, like this:

.nav-header {
	--menu-font-size: 16px;
	--menu-font-family: var(--heading-font-family);
	--menu-font-weight: var(--heading-font-weight);
}

Code Snippets

The following CSS can be added by any of the following methods:

  1. Customizer > Additional CSS
  2. Inside the style.css file in your theme
  3. In a custom plugin.

Also note, any code on the :root element can be combined. So the following CSS...

:root {
	--menu-font-family: var(--heading-font-family);
	--menu-font-weight: var(--heading-font-weight);
}

:root {
	--button-letter-spacing: 2px;
	--button-text-transform: uppercase;
}

...can be combined into:

:root {
	--menu-font-family:var(--heading-font-family);
	--menu-font-weight:var(--heading-font-weight);
	--button-letter-spacing: 2px;
	--button-text-transform: uppercase;
}

Navigation Menus

Header nav menu custom properties.

.nav-header { 
	--menu-font-size: 16px;
	--menu-font-family: var(--heading-font-family);
	--menu-font-weight: var(--heading-font-weight);
	--menu-letter-spacing: 1px;
	--menu-text-transform: uppercase;
	--menu-item-link-color: var(--color-black);
	--menu-item-link-color-hover: var(--color-primary);
	--menu-item-link-text-decoration: none;
	--menu-item-link-text-decoration-hover: none;
}

After header nav menu custom properties.

.nav-after-header {
	background: var(--color-primary);
	--menu-font-size: 16px;
	--menu-font-family: var(--heading-font-family);
	--menu-font-weight: var(--heading-font-weight);
	--menu-letter-spacing: 1px;
	--menu-text-transform: uppercase;
	--menu-item-link-color: var(--color-white);
	--menu-item-link-color-hover: var(--color-white);
	--menu-item-link-background-hover: var(--color-primary-dark);
	--menu-item-link-text-decoration: none;
	--menu-item-link-text-decoration-hover: none;
}

Sub-menus

:root {
    --sub-menu-background: black;
    --sub-menu-link-color: white;
    --sub-menu-link-color-hover: red;
}

Site Header

Site header when sticky header is stuck.

.has-sticky-header.header-stuck .site-header {
	--site-header-background: var(--color-heading);
	--menu-item-link-color: var(--color-white);
	--menu-item-link-color-hover: var(--color-primary);
}

Footer

If your footer is dark and you want to change the link color for this section, you can use the following CSS. This is also how'd you'd change it for any custom section, just change the class (a custom class on the main Group block makes this easy as well).

.site-footer a {
	--link-color: var(--color-custom-1);
	--link-color-hover: red;
	--link-text-decoration: underline;
	--link-text-decoration-hover: underline;
}

Mobile Menu Toggle Icon

Mobile menu toggle.

.menu-toggle {
	--menu-item-link-color: var(--color-primary);
	--menu-item-link-color-hover: var(--color-primary-dark);
}

Mobile menu toggle when sticky header is stuck.

.has-sticky-header.header-stuck .menu-toggle {
	--menu-item-link-color: var(--color-primary);
	--menu-item-link-color-hover: var(--color-primary-dark);
}

Mobile Menu

Dark mobile menu with white text and menu items

.mobile-menu {
	color: var(--color-white);
	--mobile-menu-background: var(--color-heading);
	--heading-color: var(--color-white);
	--menu-item-link-color: var(--color-white);
	--menu-item-link-color-hover: var(--color-white);
	--menu-item-link-text-decoration: none;
	--menu-item-link-text-decoration-hover: underline;
}

Buttons

Button default styling.

:root {
	--button-font-size: 0.8em;
	--button-font-family: var(--heading-font-family);
	--button-font-weight: var(--heading-font-weight);
	--button-letter-spacing: 2px;
	--button-text-transform: uppercase;
	--button-color: var(--color-white);
	--button-color-hover: var(--color-white);
	--button-background: var(--color-custom-1); /* Custom color 1 set in Customizer > Theme Settings > Colors */
	--button-background-hover: var(--color-custom-2); /* Custom color 2 set in Customizer > Theme Settings > Colors */
}

Secondary button colors.

:root {
	--button-secondary-color: var(--color-white);
	--button-secondary-color-hover: var(--color-white);
	--button-secondary-background: var(--color-custom-1); /* Custom color 1 set in Customizer > Theme Settings > Colors */
	--button-secondary-background-hover: var(--color-custom-2);
	/* Custom color 2 set in Customizer > Theme Settings > Colors */
}

Read more button colors.

.entry-more-link {
	--button-color: #515151;
	--button-color-hover: #515151;
	--button-background: #ebe9eb;
	--button-background-hover: #dad8da;
}

Font Sizes (Scaling System)

Mai Theme is built on a scaling system for font sizes and spacing. Instead of thinking about specific heading levels and sizes, it’s better to think of the scale itself.

Font Sizes

The default font sizing system is as follows, though some themes may modify the font base and scale:

:root { 
	--font-size-base: 16px;
	--font-scale-mobile: 1.125;  /* Major second. */
	--font-scale-tablet: 1.2; /* Minor third. */
	--font-scale-desktop: 1.25;  /* Major third. */
	--font-scale-responsive: 0.15vw;
	--font-size-xs: calc(var(--font-size-sm) / var(--font-scale));
	--font-size-sm: calc(var(--font-size-md) / var(--font-scale));
	--font-size-md: calc(var(--font-size-base) + var(--font-scale-responsive));
	--font-size-lg: calc(var(--font-size-md) * var(--font-scale));
	--font-size-xl: calc(var(--font-size-lg) * var(--font-scale));
	--font-size-xxl: calc(var(--font-size-xl) * var(--font-scale));
	--font-size-xxxl: calc(var(--font-size-xxl) * var(--font-scale));
	--font-size-xxxxl: calc(var(--font-size-xxxl) * var(--font-scale));
}

The only thing you should need to change are the first 1-4 properties.

-–font-size-base

This is the base font size used before adding the scales.

-–font-scale-{screen}

The --font-scale-{screen} properties are the ratio at which heading sizes are scaled up from, according to the base font size. A couple of great visual examples of this are the Type Scale and Module Scale websites. If you change the base, or the scale, you can see the font sizes adjust accordingly. These ratios are scaled up from mobile to desktop at breakpoints in order to provide a seamless responsive typography system.

-–font-scale-responsive

The --font-scale-responsive property is also used to help the overall sizes to scale slightly smaller/larger on mobile devices vs larger desktop monitors.

Body

To customize the body font size without altering the scale for headings, you can use the following:

Body font size

:root {
	--body-font-size: 18px;
}

Body line-height

:root {
	--body-line-height: 1.625;
}

Headings

If you want to set a specific font size for a specific heading level, this is very easily done by intercepting the heading level custom properties.

Heading level font sizes

:root {
	--h1-font-size: 2em;
	--h2-font-size: 1.75em;
}

Or, override a specific heading, like the page header title, like so:

Page header title font size

.page-header-title {
	--h1-font-size: 2.5em;
}

Or adjust the line-height for all headings:

Page header title font size

:root {
	--heading-line-height: 1.32;
}

Subheadings

Subheading default styles.

.is-style-subheading {
	--heading-font-size:var(--font-size-lg);
	--heading-text-transform: uppercase;
	--heading-letter-spacing: 1px;
}

Mai Theme also provides a “Subheading” block style for the Heading and Paragraph blocks. You can easily add some custom styling by adjusting our custom properties. The default values in Mai Engine are as follows.

Page Header

Mai Themes like Mai Delight have custom boxed styling on the Page Header inner container. The code below is an example of what you see in Mai Delight.

Page header inner styling

.page-header-inner:not(:empty) {
	--page-header-inner-background: rgba(255, 255, 255, 0.9);
	--page-header-inner-padding: var(--spacing-xl)var(--spacing-xl);
	--page-header-inner-border-radius: var(--border-radius);
	--page-header-inner-box-shadow: var(--box-shadow);
}

If you want to change the Page Header inner styling, you can modify the code above. If you want to completely remove the inner styling you can use the following code.

Remove page header inner styling

.page-header-inner {
	--page-header-inner-background: none;
	--page-header-inner-padding: 0;
	--page-header-inner-border-radius: 0;
	--page-header-inner-box-shadow: 0;
}

Media Queries

Putting your CSS code into media queries allows it to only run at specific screen sizes. Though the main breakpoint(s) could be changed via the config.php file (the smaller ones are calculated from the largest), most people stick with the defaults. Below are the different types of media queries you can use in your custom CSS.

Mobile First

These media queries run the CSS at the breakpoint size and larger.

@media only screen and (min-width: 400px) {

    /* Your CSS here. */
}

@media only screen and (min-width: 600px) {

    /* Your CSS here. */
}

@media only screen and (min-width: 800px) {

    /* Your CSS here. */
}

@media only screen and (min-width: 1000px) {

    /* Your CSS here. */
}

Desktop First (Mobile Second)

These media queries run the CSS at the breakpoint size and larger.

@media only screen and (max-width: 599px) {

    /* Your CSS here. */
}

@media only screen and (max-width: 799px) {

    /* Your CSS here. */
}

@media only screen and (max-width: 999px) {

    /* Your CSS here. */
}

@media only screen and (max-width: 1199px) {

    /* Your CSS here. */
}

Exact Sizes

These media queries set a min and max size so the CSS will only run if the screen is between these values.

@media only screen and (min-width: 400px) and (max-width: 599px) {

    /* Your CSS here */
}

@media only screen and (min-width: 600px) and (max-width: 799px) {

    /* Your CSS here */
}

@media only screen and (min-width: 800px) and (max-width: 999px) {

    /* Your CSS here */
}
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us