Frontend Options
By clicking on the Global Settings menu, you will redirect to the “Frontend Options” under the Flare Theme Builder configuration. From here you can configure the appearance of the Web Store.
You will get the following settings under Frontend Options: Theme Color, Button Color & Style, Form Inputs, Theme Font, Links, Ratings, Catalog Section.
Theme Color Settings
Theme Primary Color
You can set the Primary color for Theme by choosing a color from the Color Picker tool.
Button Settings
You can set the different color effects for the Primary & Secondary buttons and Button style.
Button Color:
Primary Button:
Set the Color effects for the Primary level button.
– Font Color: Select the font color of the button text caption.
– Background: Select the Background color of the button.
– Border Color: Select the Border color of the button.
– Hover Font Color: Select the Font color by moving the cursor on the button. (Hover effects).
– Hover Background Color: Select the Background color by moving the cursor on the button. (Hover effects).
– Hover Border Color: Select the Border color when the cursor moved on the button. (Hover effects).
– Button Active Font Color: Select the Font color when the button is active.
– Button Active Background Color: Select the background color when the button is active.
– Button Active Border Color: Select the Border color when the button is active.
Secondary Button:
Similar to the Primary Button, you can set the Color effects for the Secondary Button.
Button Style:
There are three types of button styles. The style of all the Buttons will appear based on the selection here.
Form Inputs
Form Inputs [input-text|select|textarea|input-radio|input-checkbox]
– Input Background: Select the background for the mentioned elements. Leave blank for default white.
– Input Border Color: Select the border color for the mentioned elements.
– Input Border Thickness: Set border width. Ex.: 1px.
– Input Border Radius: Set border radius. Ex.: 1px.
– Input Height: Set Input height. Ex.: 32px
– Input Placeholder Color: Select the color of the Input placeholder.
Theme Font Settings
Select the Fonts and customize them by selecting size and effects.
– Text Color: Set the text color for default paragraphs from the Color picker tool.
– Enable Google Fonts: Select the Google Font which will be loaded on the site. Set the font family for default paragraphs.
– Enable Fonts Weights: Select the Fonts Weights. These values range from lightest (100) to boldest (900).
Here is a rough guide to match the numerical scale with the most common weight terms:
100: Thin, Hairline, Ultra-light, Extra-light
200: Light
300: Book
400: Regular, Normal, Plain, Roman, Standard
500: Medium
600: Semi-bold, Demi-bold
700: Bold
800: Heavy, Black, Extra-bold
900: Ultra-black, Extra-black, Ultra-bold, Heavy-black, Fat, Poster
Note: Please check this link for more details for Google Fonts & Fonts Weight.
– Font Weight: Set the font size for default paragraphs. If the left blank, the default font size is set to 14px.
– Letter Spacing: Increase or decrease the space between characters in the text. Range: -5.0 … 50.0, the value in pixels. Ex.: 0.7.
– Line Height: Set line-height for default paragraphs.
Insert the Font details for Header 1 to 6 and insert the Theme Font Settings for Font Title Home Page.
Links
– Link Color: Set link text color.
– Link Hover Color: Set the color when the cursor moved on the link. (Hover effects).
Ratings
– Rating Active Color: Set the color for applied rating.
– Rating Inactive Color: Set the color for non selected.
Catalog Section
– Product Image Background Color: Set the Image background color for the Product image.
After configuring all the details click on the Save Config button and the Website appearance will be displayed as per the configuration here.