Easily adjust fonts, colors, and more on your Mai Theme powered website. Visit Customizer > Mai Styles and take it from there!
Don’t have the Mai Styles plugin? Discover more details about our custom-built plugins, and get it today.
REQUIRED PARAMETERS
Please have the following ready or already installed.
- Latest version of WordPress installed on your hosting
- Latest version of the Genesis Framework
- Mai Theme (Classic)
- Mai Styles
Mai Styles
Login to your WordPress website. You will first need to install the Genesis Framework if you haven’t already installed it, then install and activate your purchased Mai Theme.
- In the WordPress menu, click on Plugins > Add New > Upload Plugin.
- Click the Choose File button and find the file for Mai Styles on your computer; it will have an ending of “.zip”.
- Click the Install Now button.
- Finally, click the text link Activate.
You will see Mai Styles show up inside your Customizer settings.
Dashboard > Appearance > Customize
GENERAL PARAMETERS
Body
Colors – Here you can choose to change the color of your background, text, links, and links hovered. Here are some examples:
Background Color: ???
Text Color: Here we are using 50% gray – #7f7f7f.
Link Color: In this example we use a preconfigured blue.
Link Hover Color: In this example we use a preconfigured green.
Note: This parameter is only seen when a link is hovered-over.
Font Family – Here you can choose to change your body text font. This parameter includes font size, line height, letter spacing, and the option to download a font-family to server instead of using the Google CDN.
Default Browser Font Family: Muli; font-weight: 400; line height 1.625; letter spacing: 0
Headings and Banner Title
Here you can customize the heading and banner color and font family parameters.
Create a hierarchy by customizing the font sizes for the [h1], [h2], [h3], [h4], [h5], [h6] headings. [h1] is typically the largest, while [h6] the smallest. You can use pixels (px) or (em) for font sizes.
Buttons – Customize the button (primary/secondary) colors and font family parameters.
Buttons (Primary)
Colors – Here you can choose to change the color of your button’s background, text, and hovered-over parameters. Here are some examples:
Background Color: The default background color is dark gray – #323232.
Here we are using a preconfigured blue.
Text Color: The default text color is white.
Background Hover: The default background color is black.
Here we are using a preconfigured green.
Note: This parameter is only seen when a button is hovered-over.
Text Hover: The default text color is white
Here we are using black
Note: This parameter is only seen when a button is hovered-over.
Font Family – Here you can choose to change your button text font. This parameter includes font size, text transformation, letter spacing, and the option to download a font-family to server instead of using the Google CDN.
Default Browser Font Family: Muli; font-weight: 400; letter spacing: 0; transform: none
Buttons (Alternate)
<a class="button alt" href="https://maitheme.com/">Mai Theme</a>
Customize your secondary button’s background, text, and hovered-over parameters.
Default Browser Font Family: Muli; font-weight: 400; letter spacing: 0; transform: none
For further explanations on displaying buttons, see our Customizing Colors article:
Buttons (Border Radius)
Change the radius of your button with this parameter
Customize the roundness using pixels (px)
The default radius: 0px
Here we have a very round button using a 20px radius
HEADER PARAMETERS
Colors – Customize the color of your site headers, title, and menu areas. Here are some examples:
Site Header
Here we are using a preconfigured blue
Header Scroll
Here we are using a preconfigured green
Note
The following parameters are based on the type of menu you have. You can view your menu locations by going to Customize > Menus
See our Menu documentation for further explanation:
Header Menu
*For Header Left or Right menu locations only
These examples use Header Right.
Item Color: The default background color is dark gray – #323232
Here we are using a preconfigured blue.
Item Hover Color: This example uses a preconfigured green.
Note: This parameter is only seen when a menu item is hovered-over.
Current Item Color: Here we are using a preconfigured purple.
Note: This parameter is only seen when you’re currently viewing the specified page.
Header Submenu Color – For Header Left or Right submenu locations only. These examples use Header Right:
Background: Here we are using a preconfigured blue.
Item Color: Here we are using white.
Item Hover Background: Here we are using a preconfigured green – #81d742
Item Hover Color: Here we are using black.
Note: This parameter is only seen when a submenu item is hovered-over.
Current Item Background: Here we are using a preconfigured purple.
Current Item Color: Here we are using white.
Note: This parameter is only seen when you’re currently viewing the specified page.
Header Scroll – For Header Left or Right submenu locations only. These examples use Header Right:
Header Background: This example uses a preconfigured blue.
Item Color: We are using black here.
Note: This parameter is only seen when scrolling. Your menu must have a Shrink style. See Customize > Mai Header & Footer > Header Style > Shrink Header
Header Menu Typography – Customize your submenu’s font. This parameter includes font size, text transformation, letter spacing, and the option to download a font-family to server instead of using the Google CDN.
Default Browser Font Family: Muli; font-weight: 400; letter spacing: 0; transform: none
Primary Menu
*For Primary menu locations only
These examples use the Primary Menu
Background: This example uses a preconfigured blue
Item Color: Here we are using white.
Item Hover Background: This example uses a preconfigured green.
Item Hover Color: Here we are using black.
Note: This parameter is only seen when a menu item is hovered-over.
Current Item Background: Here we are using a preconfigured purple.
Current Item Color: Here we are using white.
Note: This parameter is only seen when you’re currently viewing the specified page.
Primary Submenu Color
Background: Here we are using a preconfigured orange.
Item Color: Here we are using white.
Item Hover Background: Here we are using a preconfigured red.
Item Hover Color: Here we are using white.
Note: This parameter is only seen when a menu item is hovered-over.
Current Item Background: Here we are using a preconfigured purple.
Current Item Color: Here we are using white.
Note: This parameter is only seen when you’re currently viewing the specified page.
Primary Menu Typography – Customize your Primary menu’s font. This parameter includes font size, text transformation, letter spacing, and the option to download a font-family to server instead of using the Google CDN.
Default Browser Font Family: Muli; font-weight: 400; letter spacing: 0; transform: none
Content
Primary Sidebar Widgets: Here we are using a preconfigured blue.
Note: You can change your sidebar widgets in Customize > Widgets > Primary or Secondary
Secondary Sidebar Widgets: Here we are using a preconfigured green.
Footer
Site Footer Background
Background: Here we are using a preconfigured blue.
Text Color: This example uses white text.
Link Hover Color: Here we are using a preconfigured orange.
Note: This parameter is only seen when a link item is hovered-over.
Footer Color – You can change the number of footer areas in Customize > Mai Header & Footer > Footer Widget Areas
Background: We are using a preconfigured green.
Item Color: This example uses black links.
Item Hover Background: Here we are using black.
Item Hover Color: We are using white for the links.
Note: This parameter is only seen when a submenu item is hovered-over.
Current Item Background: Here we are using a preconfigured purple.
Current Item Color: Here we are using white.
Note: This parameter is only seen when you’re currently viewing the specified page.
Footer Typography – Customize your Footer menu’s font. This parameter includes font size, text transformation, letter spacing, and the option to download a font-family to server instead of using the Google CDN.
Default Browser Font Family: Muli; font-weight: 400; letter spacing: 0; transform: none