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.