• Skip to main content
  • Skip to header right navigation
  • Skip to site footer
  • Main Site
  • About Us
  • Services
  • Contact Us
  • Blog
BizBudding Docs

BizBudding Docs

Documentation

  • Mai Theme Docs
    • Mai Themes (v2)
  • Classic Theme Docs
    • Pretty Darn Cute
    • SEO Themes
    • Mai Theme (Classic)
  • Search
Home » MT Docs » Advanced/Developers » Customizing CSS

Customizing CSS

Knowledgebase: Advanced/Developers
Table of Contents[Hide][Show]
  • Understanding Custom Properties (CSS Variables)
  • Code Snippets
  • Navigation Menus
  • Site Header
  • Buttons
  • Font Sizes (Scaling System)
  • Font Sizes
  • Body
  • Headings
  • Subheadings
  • Page Header

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.

CSS custom properties

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 to Customizer > Additional CSS, inside the style.css file in your theme, or 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

.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;   
}
.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;   
}

Site Header

.site-header {
     --site-header-background: #000;
     --menu-item-link-color: var(--color-white);
     --menu-item-link-color-hover: var(--color-primary);
     --menu-item-link-text-decoration: none;
     --menu-item-link-text-decoration-hover: none; /* optionally add underline here */
 }

Buttons

: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 */
}
: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 */
}
.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:

:root {
    --font-size-base: 16px;
    --font-scale: 1.25;
    --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 two or three properties.

–font-base

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

–font-scale

The --font-scale property is 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.

–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.

:root {
    --font-scale: 1.125; /* Major Second */
}

Body

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

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

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.

: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 {
    --h1-font-size: 2.5em;
}

Subheadings

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: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.

.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;
}
Previous Post: « Translating Mai Theme
bizbudding team

Need some help with your theme?

Open a support request by filling out our support form.

Get Support

Sidebar

Knowledgebase

First Steps

Menus

Content Areas

Customizer

Blocks

Shortcodes

Advanced/Developers

Plugins




BizBudding icon

Resources

  • Shop
  • Affiliates
  • Data Protection
  • Privacy Policy
  • Terms & Conditions
  • Contact Us

quick links

  • Main Site
  • About Us
  • Services
  • Contact Us
  • Blog

Contact Details

1001 County Road 517, Suite 1
Hackettstown, NJ 07840

(877) 548-2440

Contact Us


  • Mai Theme Docs
    • Mai Themes (v2)
  • Classic Theme Docs
    • Pretty Darn Cute
    • SEO Themes
    • Mai Theme (Classic)
  • Search

Copyright © 2010–2021 BizBudding Inc. · All Rights Reserved ♥ Work hard and be nice to people.