• Skip to main content
  • Skip to header right navigation
  • Skip to site footer
  • Main Site
  • Blog
  • Support
BizBudding Docs

BizBudding Docs

Documentation

  • Mai Theme Docs
    • Mai Themes (v2)
  • Classic Theme Docs
    • Pretty Darn Cute
    • SEO Themes
    • Mai Theme (Classic)
Home » Mai Theme (Classic) » Customizing Colors

Customizing Colors

Custom CSS to change basic colors in Mai Theme

If you’d like to customize colors (and fonts) without using any code, you’ll love our Mai Styles plugin available in the Mai Theme Plugin Pack.

Mai Theme Plugin Pack

The following code can be added directly to the style.css file in your theme. Copy/paste it right in, and adjust the colors as needed.

Updates to the Mai Theme Engine plugin will not overwrite customizations in your theme.

Links

a {
    color: #34cd31;
}

a:focus,
a:hover {
     color: #2aa427;
}

Buttons

If you know a bit of HTML, you can create a few different button styles by adding a few classes.

If you have a link like:

<a href="https://maitheme.com/">Mai Theme</a>

You can turn it into a button by adding the button  class like this:

<a class="button" href="https://maitheme.com/">Mai Theme</a>

There are alternate colors/styles by adding alt , white , or ghost along with the button  class:

<a class="button alt" href="https://maitheme.com/">Mai Theme</a>

Lastly, you can add small  or large class to change the size:

<a class="button large" href="https://maitheme.com/">Mai Theme</a>
/* Main button color */
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.entry-content .button,
.menu-item.highlight a,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button.alt.single_add_to_cart_button,
.woocommerce .button.alt.checkout-button {
	background-color: #34cd31;
	color: #fff;
}

/* Main button color hover */
button:hover,
button:focus,
input:hover[type="button"],
input:focus[type="button"],
input:hover[type="reset"],
input:focus[type="reset"],
input:hover[type="submit"],
input:focus[type="submit"],
.button:hover,
.button:focus,
.entry-content .button:hover,
.entry-content .button:focus,
.menu-item.highlight.current-menu-item > a,
.menu-item.highlight > a:hover,
.menu-item.highlight > a:focus,
.woocommerce a.button:hover,
.woocommerce a.button:focus,
.woocommerce button.button:hover,
.woocommerce button.button:focus,
.woocommerce input.button:hover,
.woocommerce input.button:focus,
.woocommerce .button.alt.single_add_to_cart_button:hover,
.woocommerce .button.alt.single_add_to_cart_button:focus,
.woocommerce .button.alt.checkout-button:hover,
.woocommerce .button.alt.checkout-button:focus {
	background-color: #2fb82c;
	color: #fff;
}

/* Alt button color */
.button.alt,
.comment-reply-link,
.entry-content .button.alt,
.entry-content .more-link,
.footer-widgets .button,
.site-footer .button,
.woocommerce .actions .button,
.woocommerce a.button.alt,
.woocommerce a.button.add_to_cart_button {
	background-color: #e4e4e4;
	color: #515151;
}

/* Alt button color hover */
.button.alt:hover,
.button.alt:focus,
.comment-reply-link:hover,
.comment-reply-link:focus,
.entry-content .button.alt:hover,
.entry-content .button.alt:focus,
.entry-content .more-link:hover,
.entry-content .more-link:focus,
.footer-widgets .button:hover,
.footer-widgets .button:focus,
.site-footer .button:hover,
.site-footer .button:focus,
.woocommerce .actions .button:hover,
.woocommerce .actions .button:focus,
.woocommerce a.button.alt:hover,
.woocommerce a.button.alt:focus,
.woocommerce a.button.add_to_cart_button:hover,
.woocommerce a.button.add_to_cart_button:focus {
	background-color: #d7d7d7;
	color: #515151;
}

Menus

Header Navigation Menus

/* Header navigation link color */
.home .nav-header .current-menu-item > a,
.nav-header .nav-search,
.nav-header .nav-search:focus,
.nav-header a {
	color: #323232;
}

/* Header navigation current/hover link color */
.nav-header a:hover,
.nav-header a:focus,
.nav-header .current-menu-item > a,
.nav-header .current-menu-ancestor > a,
.nav-header .menu-item-has-children:not(.highlight):hover > a,
.nav-header .menu-item-has-children:not(.highlight):focus > a,
.nav-header .nav-search:hover,
.nav-header .nav-search:focus,
.nav-header .sub-menu a:hover,
.nav-header .sub-menu a:focus,
.nav-header .sub-menu .current-menu-item > a,
.nav-header .sub-menu .current-menu-item > a:hover,
.nav-header .sub-menu .current-menu-item > a:focus {
	color: #34cd31;
}

/* Header navigation sub-menu background/color */
.nav-header .sub-menu a {
	background-color: #fff;
	color: #323232;
}

/* Header navigation sub-menu hover background/color */
.nav-header .sub-menu a:hover,
.nav-header .sub-menu a:focus,
.nav-header .sub-menu .current-menu-item > a,
.nav-header .sub-menu .current-menu-item > a:hover,
.nav-header .sub-menu .current-menu-item > a:focus {
	background-color: #f4f4f4;
	color: #323232;
}

Primary Navigation Menu

/* Primary navigation background color */
.home .nav-primary .current-menu-item > a,
.nav-primary {
	background-color: #323232;
}

/* Primary navigation link color */
.home .nav-primary .current-menu-item > a,
.nav-primary .nav-search,
.nav-primary .nav-search:focus,
.nav-primary a {
	color: #e4e4e4;
}

/* Primary navigation current/hover link color */
.nav-primary a:hover,
.nav-primary a:focus,
.nav-primary .current-menu-item > a,
.nav-primary .current-menu-ancestor > a,
.nav-primary .menu-item-has-children:hover > a,
.nav-primary .menu-item-has-children:focus > a,
.nav-primary .nav-search:hover,
.nav-primary .nav-search:focus {
	background-color: #252525;
	color: #fff;
}

/* Primary navigation sub-menu background/color */
.nav-primary .sub-menu a {
	background-color: #323232;
	color: #e4e4e4;
}

/* Primary navigation sub-menu hover background/color */
.nav-primary .sub-menu a:hover,
.nav-primary .sub-menu a:focus,
.nav-primary .sub-menu .current-menu-item > a,
.nav-primary .sub-menu .current-menu-item > a:hover,
.nav-primary .sub-menu .current-menu-item > a:focus {
	background-color: #252525;
	color: #fff;
}

Secondary Navigation Menu

/* Secondary navigation background color */
.home .nav-secondary .current-menu-item > a,
.nav-secondary {
	background-color: #323232;
}

/* Secondary navigation link color */
.home .nav-secondary .current-menu-item > a,
.nav-secondary .nav-search,
.nav-secondary .nav-search:focus,
.nav-secondary a {
	color: #e4e4e4;
}

/* Secondary navigation current/hover link color */
.nav-secondary a:hover,
.nav-secondary a:focus,
.nav-secondary .current-menu-item > a,
.nav-secondary .current-menu-ancestor > a,
.nav-secondary .menu-item-has-children:hover > a,
.nav-secondary .menu-item-has-children:focus > a,
.nav-secondary .nav-search:hover,
.nav-secondary .nav-search:focus {
	background-color: #252525;
	color: #fff;
}

/* Secondary navigation sub-menu background/color */
.nav-secondary .sub-menu a {
	background-color: #323232;
	color: #e4e4e4;
}

/* Secondary navigation sub-menu hover background/color */
.nav-secondary .sub-menu a:hover,
.nav-secondary .sub-menu a:focus,
.nav-secondary .sub-menu .current-menu-item > a,
.nav-secondary .sub-menu .current-menu-item > a:hover,
.nav-secondary .sub-menu .current-menu-item > a:focus {
	background-color: #252525;
	color: #fff;
}

Mobile Navigation Menu

.mobile-menu a {
	color: #323232;
}

.mobile-menu .sub-menu {
	background-color: rgba(0,0,0,0.01);
}

.mobile-menu .sub-menu a {
	background-color: rgba(0,0,0,0.01);
}

.mobile-menu .sub-menu a:hover,
.mobile-menu .sub-menu a:focus,
.mobile-menu .sub-menu a:active {
	color: #067CCC;
}

.mobile-menu .current-page-ancestor > a,
.mobile-menu .current-menu-item > a {
    color: #067CCC;
}
Knowledgebase (Classic): CustomizationMai Theme (Classic): Mai Lifestyle Theme, Mai Law Theme, Mai Business Theme, Mai News Theme

Sidebar

Knowledgebase (Classic)

Start Here

Customization

Shortcodes

General

Plugins




BizBudding icon

Resources

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

quick links

  • Main Site
  • Blog
  • Support

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)

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