How to configure general setting?

2.1. Typography

In Typography tabs, you can customize config font for site.

Setting

     Configuration Font

• Font Family base: Selects the default font for text, apply to tags.
• Font Size base: Enter the Basic font size for content.
• Scale Font: Enter the scale ratio for element.
• Line Height Scale Base: Enter the scale line height for element.
• BaseLine: Defines the size – the horizontal lines for the text and aligns the elements.

     Configuration Font for Heading

• Font Family Heading base: Selects the default font for Headings, apply to tags (h1, h2, h3, h4, h5, h6).
• Scale linehight Heading Base: Enter the scale line height for element.
• Baseline Heading Base: Defines the size Heading – the horizontal lines for the text and aligns the elements.

     Select theme to save configuration

• Theme select to save data: Select any theme you want to save data configuration.

     Reload data configuration of any theme

• Current theme data: select any theme you want to load data on form.

Notes: Remembering Save Config after each change. And Flush cache after each configuration.

2.2. Color

In Color tabs, you can setting color for Brand, Link, Status…

Setting

• Main Color: Defines the main color variable. Usually applies to Brand color.
• Accent color: Defines the accent color variable. Usually applies to components color that need to be emphasis or in the current state.
• Hover color: Defines the hover color variable. Usually applies to hover status.
• Secondary color: Defines the secondary color variable. Usually applies to Brand color.
• Text color: Defines the text color variable. Usually applies to Normal text.
• Link color: Defines the link color variable. Usually applies to Link element.

Select theme to save configuration

• Theme select to save data: Select any theme you want to save data configuration.

Reload data configuration of any theme

• Current theme data: select any theme you want to load data on form.

Notes: Remembering Save Config after each change. And Flush cache after each configuration.

2.3. Colors Grays

In Colors Grays tabs, you can setting color for text element on light background.

Setting

• Main Color: Defines the basic gray value. Usually applies to text element on light background.
• Theme select to save data: Select any theme you want to save data configuration.
• Current theme data: select any theme you want to load data on form.

 Notes: Remembering Save Config after each change. And Flush cache after each configuration.

2.4. Components

In Components tabs, you can setting component padding, component border radius…

Setting

     Configuration Vertical Padding

• Gutter Layout Base: Defines the distance between vertical columns in the grid system.
• Vertical Padding Small: Defines the small padding top and bottom distance (border to content) for the small element (button, menu item,…)
• Vertical Padding Base: Defines the normal padding top and bottom distance (border to content) for the normal element (button, menu item,…)
• Vertical Padding Large: Defines the large padding top and bottom distance (border to content) for the large element (button, menu item,…)

     Configuration Horizontal Padding

• Horizontal Padding Small: Defines the small padding left and right distance (border to content) for the small element (button, menu item,…)
• Horizontal Padding Base: Defines the base padding left and right distance (border to content) for the small element (button, menu item,…)
• Horizontal Padding Large: Defines the large padding left and right distance (border to content) for the small element (button, menu item,…)

     Configuration Border

• Border Radius Small: Defines the size of border radius small items (button, menu item, box, …)
• Border Radius Base: Defines the size of border radius normal items (button, menu item, box, …)
• Border Radius Large: Defines the size of border radius normal items (button, menu item, box, …)
• Border Width Base: Defines the default border width size for UI components.
• Border Color Base: Defines the default border Color for UI components

     Select theme to save configuration

• Theme select to save data: Select any theme you want to save data configuration.

     Reload data configuration of any theme

• Current theme data: select any theme you want to load data on form.

Notes: Remembering Save Config after each change. And Flush cache after each configuration.

Further reading

• Statista e-commerce research
• Think with Google retail insights