To configuration theme, you work follow the steps:
Login to admin panel
Move to Netbase menu -> Click on Setting panel
1.1. Header
The Header is divided into 3 parts: The Top Header, The Middle Header and The Bottom Header.
Notes: To setting header type, you have to read 3 parts of header carefully: Elements of header.
Select Header type
There are 10 the type of header to customize setting.
- Elements of the Top Header
- Show Top Header: allow showing the top header or not. The Top Header is divided into 3 parts: Header Top Left (the left of top header), Header Top Center (the center of top header) and Header Top Right (the right of top header).
- Select Layout Type Search: select the search type you want. There are 3 type to select.
- Select Layout Type Cart: select the cart type you want. There are 2 type to select.
- Select Layout Type User: select the user type you want. There are 2 type to select.
- Column Layout Header Top Left: select number of columns to display elements in Header Top Left or select “Do Not Show” if you don’t want to display any elements in Header Top Left.
- Select Elements in Header Top Left: select any elements you want in Header Top Left.
- Column Layout Header Top Center: select number of columns to display elements in Header Top Center or select “Do Not Show” if you don’t want to display any elements in Header Top Center.
- Select Elements in Header Top Center: select any elements you want in Header Top Center.
- Column Layout Header Top Right: select number of columns to display elements in Header Top Right or select “Do Not Show” if you don’t want to display any elements in Header Top Right.
- Select Elements in Header Top Right: select any elements you want in Header Top Right.
Note: In part “Select Element”, you can select a custom Static block and you have to fill the custom static block. Example: you can see image below:
- ID Static Block: fill in identifier of custom static block that you want to display in the top header. To get identifier, you go to Content -> Blocks -> copy identifier of custom block you want.
- Element of the Middle Header
- Show Header Middle: allow showing the middle header or not. The Middle Header is divided into 3 parts: Header Middle Left (the left of middle header), Header Middle Center (the center of middle header) and Header Middle Right (the right of middle header).
- Column Layout Header Middle Left: select number of columns to display elements in Header Middle Left or select “Do Not Show” if you don’t want to display any elements in Header Middle Left.
- Select Elements in Header Middle Left: select any elements you want in Header Middle Left.
- Column Layout Header Middle Center: select number of columns to display elements in Header Middle Center or select “Do Not Show” if you don’t want to display any elements in Header Middle Center.
- Select Elements in Header Middle Center: select any elements you want in Header Middle Center.
- Column Layout Header Middle Right: select number of columns to display elements in Header Middle Right or select “Do Not Show” if you don’t want to display any elements in Header Middle Right.
- Select Elements in Header Middle Right: select any elements you want in Header Middle Right.
Note: In part “Select Element”, you can select a custom static block and you have to fill the custom static block. Example: you can see image below:
- ID Static Block: fill in identifier of custom static block that you want to display in the middle header. To get identifier, you go to Content -> Blocks -> copy identifier of custom block you want.
- Element of the Bottom Header
- Show Header Bottom: allow showing the bottom header or not. The Bottom Header is divided into 3 parts: Header Bottom Left (the left of bottom header), Header Bottom Center (the center of bottom header) and Header Bottom Right (the right of bottom header).
- Column Layout Header Bottom Left: select number of columns to display elements in Header Bottom Left or select “Do Not Show” if you don’t want to display any elements in Header Bottom Left.
- Select Elements in Header Bottom Left: select any elements you want in Header Bottom Left.
- Column Layout Header Bottom Center: select number of columns to display elements in Header Bottom Center or select “Do Not Show” if you don’t want to display any elements in Header Bottom Center.
- Select Elements in Header Bottom Center: select any elements you want in Header Bottom Center.
- Column Layout Header Bottom Right: select number of columns to display elements in Header Bottom Right or select “Do Not Show” if you don’t want to display any elements in Header Bottom Right.
- Select Elements in Header Bottom Right: select any elements you want in Header Bottom Right.
Note: In part “Select Element”, you can select a custom static block and you have to fill the custom static block. Example: you can see image below:
- ID Static Block: fill in identifier of custom static block that you want to display in the bottom header. To get identifier, you go to Content -> Blocks -> copy identifier of custom block you want.
Notes:
1. Remembering to flush cache after importing any header types.
2. Don’t forget save data after each change.
1.2 Footer
The Footer is divided into 5 parts: The Footer Service, The Top Footer, The Middle Footer, The Bottom Footer and The Bottom Footer Payment.
Footer Service
- Show Footer Top: allow showing the top footer or not.
- The top footer divided into 4 columns. You can allow show each column or not. At the same time, you can configure column size for each column.
- Show Footer Top: allow showing the top footer or not.
- The top footer divided into 4 columns. You can allow show each column or not. At the same time, you can configure column size for each column.
Middle Footer Setting
- Show Footer Middle: allow showing the middle footer or not.
- The middle footer divided into 4 columns. You can allow show each column or not. At the same time, you can configure column size for each column.
Note: In “Column 1”, if you show it, you can configure column size and the footer middle logo.
Bottom Footer Setting
- Show Footer Bottom: allow showing the bottom footer or not.
- The bottom footer divided into 4 columns. You can allow show each column or not. At the same time, you can configure column size for each column
Footer Bottom Payment
- Show Footer Bottom Payment: allow showing the bottom payment footer or not.
- Column Payment: select a custom block and fill static block ID.
Notes: Remembering Save Config after each change. And Flush cache after each configuration.
1.3. Home Product Tabs
In Home Product Tabs, you can change product which is displayed on Home pages, such as: Bestseller Product, Deal Product, New Product, Feature Product.
Configuration
- Title: Enter the title you want to display on Home page.
- Select Category: Select category(s) you want to show products.
- Banner Left: Import image you want to use banner left.
Note: Don’t forget save data after each change.
Overview on Front end
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.
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.