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.
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:
- Customizer > Additional CSS
- Inside the
style.css
file in your theme - 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
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 */ }