How to configure design?

To configuration theme, you work follow the steps:

Login to admin panel

Move to Netbase menu -> Click on Design config

3.1. Typography

In Typography tabs, you can configuration font, font size and font color for each

Setting

• Font Family Design: Select Font family for content tags (p, li, a,..)

Notes: If you select Custom font, you can select font family for Font Family P, Font Family Li, Font Family A.

• Text Color Design: Select Color using for text on UI

 Notes: If you select Custom color, you can select color for Color Body, Color P.

• Font Family Heading Design: Select Font family for heading tags

 Notes: If you select Custom font, you can select font family for heading tags(h1,h2,h3,h4,h5,h6)

• Font Size Heading Design: Select Font size for Heading tags

 Notes: If you select Custom font size, you can select font size for Heading tags(h1,h2,h3,h4,h5,h6)

• Line Height Heading Design: Select line Height for Heading tags

 Notes: If you select Custom line height, you can select line Height for Heading tags (h1,h2,h3,h4,h5,h6)

     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.

3.2. Link

In Link tabs, you can configuration color link, Hover Link Color, Active Link Color, Visited Link Color.

 Setting

• Custom Link Color Design: Select color for Link element.

 Notes: If you select Custom color, you can select color for Link element.

• Custom Hover Link Color Design: Select hover color for Link element

 Notes: If you select Custom color, you can select hover color for Link element.

• Custom Active Link Color Design: Select active color for Link element

 Notes: If you select Custom color, you can select active link color for Link element.

• Custom Visited Link Color Design: Select visited color for Link element

 Notes: If you select Custom color, you can select visited link color for 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.

3.3. Button

In Button tabs, you can configuration Button color, Text Button and customize Border button.

Setting

      Configuration Font Family For Button

• Select Font Family Button: Select Font Family for Normal Buttons.

 Notes: If you select Custom font, you can select Custom Font Family for Normal Buttons.

• Color Text Button: Select color text for Normal Buttons.

 Notes: If you select Custom color, you can custom text color for Normal Buttons.

• Hover Color Text Button: Select color of text hover for Normal Buttons.

 Notes: If you select Custom color, you can custom color text hover for Normal Buttons.

• Active Color Text Button: Select color of text when button is activated.

 Notes: If you select Custom color, you can custom color text when button is activated.

     Configuration Button Color

• Background Color Button: Select Background Color for Normal Buttons.

 Notes: If you select Custom color, you can custom color for Normal buttons.

• Background Color Hover Button: Select hover background color for Normal Buttons.

 Notes: If you select Custom color, you can custom  hover color text for Normal buttons.

• Background Color Active Button: Select active background color for Normal Buttons.

 Notes: If you select Custom color, you can custom color when button is activated.

     Configuration Button Border

• Border Width Button: Select custom Border Width for Normal Buttons.

 Notes: If you select Custom width, you can custom border width for Normal Buttons.

• Border Color Button: Select custom Border Color for Normal Buttons.

 Notes: If you select Custom color, you can custom border color for Normal Buttons.

• Border Hover Color Button: Select custom hover border color for Normal Buttons.

 Notes: If you select Custom color, you can custom hover border color for Normal Buttons.

• Border Active Color Button: Select border color when button is activated.

 Notes: If you select Custom color, you can custom border color when button is activated.

• Vertical Padding: Select vertical padding type for Normal Buttons.

 Notes: If you select Custom type, you can custom vertical padding size for Normal Buttons.

• Horizontal Padding: Select horizontal padding type for Normal Buttons.

 Notes: If you select Custom type, you can custom horizontal padding size for Normal Buttons.

• Border Radius Button: Select border radius type for Normal Buttons.

 Notes: If you select Custom type, you can custom border radius size for Normal Buttons.

     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.

3.4. Button CTA

In Button CTA (Control To Action) tabs, you can configuration

Setting

     Select class to config

• Class List: Enter class-name want to config

     Configuration Font Family For Button CTA

• Select Font Family Button CTA: Select Font Family for Button CTA.

Notes: If you select Custom font, you can select Custom Font Family for Button CTA

• Color Text Button CTA: Select color text for Button CTA.

Notes: If you select Custom color, you can custom text color for Button CTA

• Hover Color Text Button CTA: Select color of text hover for Button CTA.

Notes: If you select Custom color, you can custom color text hover for Button CTA.

• Active Color Text Button CTA: Select color of text when button is activated.

Notes: If you select Custom color, you can custom color text when button is activated.

     Configuration Button CTA Color

• Background Color Button CTA: Select Background Color for Button CTA.

Notes: If you select Custom color, you can custom color for Button CTA.

• Background Color Hover Button CTA: Select hover background color for Button CTA.

Notes: If you select Custom color, you can custom hover color text for Button CTA.

• Background Color Active Button CTA: Select active background color for Button CTA.

Notes: If you select Custom color, you can custom color when button is activated.

     Configuration Button CTA Border

• Border Width Button CTA: Select custom Border Width for Button CTA.

Notes: If you select Custom width, you can custom border width for Button CTA.

• Border Color Button CTA: Select custom Border Color for Button CTA.

Notes: If you select Custom color, you can custom border color for Button CTA.

• Border Hover Color Button: Select custom hover border color for Normal Buttons.

Notes: If you select Custom color, you can custom hover border color for Normal Buttons.

• Border Active Color Button CTA: Select border color when button is activated.

Notes: If you select Custom color, you can custom border color when button is activated.

• Vertical Padding: Select vertical padding type for Button CTA.

Notes: If you select Custom type, you can custom vertical padding size for Button CTA.

• Horizontal Padding: Select horizontal padding type for Button CTA.

Notes: If you select Custom type, you can custom horizontal padding size for Button CTA.

Border Radius Button CTA: Select border radius type for Button CTA.

Notes: If you select Custom type, you can custom border radius size for Button CTA.

     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