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