Appearance - General Styles – buildsupport

Breadcrumb path: Appearance / General Styles

You can access this page by clicking on Appearance from your main menu and then clicking General Styles from the dropdown menu.

Appearance - General Styles Fundamental

In this section, you will learn to use the Appearance - General Styles module. General Styles enables you to globally configure the settings for all automated content created on your website. All General appearance specifications not covered by individual Static Page settings can be found in General Styles.

Now that you have learned the fundamental idea, this guide will walk you through the General Styles module.

Appearance - General Styles (Main Screen)

This module is split into many different sections initially displayed as titles. You can click on the arrow to the right of the section title to expand and reveal the full General Style settings for that section. This guide will cover each section and explain how the General Style settings work. The General Styles (Main Screen) is broken down into the following sections:

Heading 1-6
Primary and Secondary Button
Filter Reset Button
Shopping Cart Primary Texts
Input
Textarea
Pagination
Shapes Filter
Paragraph 1-6
Hyperlink and Label
Breadcrumb
Slider
Wishlist Icon
Select
Checkbox
Search Box

Now that you have learned about the General Styles (Main Screen) you can continue to the next section, which will cover Headings 1-6.

1) Headings 1-6

This section of the guide will cover the General Styles for Headings 1–6. These are 6 different sizes of Headings that can be used on your website, with Heading 1 being the largest, and Heading 6 being the smallest. Each of the Headings offers the same General Style settings. For this reason, only the settings for Heading 1 will be explained below, as the remaining Heading settings repeat the same fields.

● 1 Heading 1. Click on the blue arrow to the right to reveal the fields below.

Font Family. Tthis field enables you to select the Font Family for Heading 1. Click the arrow to reveal the Font Family options.

Font Size. This field enables you to enter the Font Size for Heading 1.

Font Weight. This field enables you to select the Font Weight for Heading 1.

Font Style [Normal | Italic]. This field enables you to select the Font Style for Heading 1.

Line Height. This field enables you to enter the Line Height for Heading 1. The Line Height is the distance between different Lines of text.

Letter Spacing. This field enables you to enter the Letter Spacing for Heading 1. The Letter Spacing is the distance between Letters of text.

Font Color. This field enables you to select the Font Color for Heading 1.

Example: This area displays an Example of Heading 1 using the settings you have entered above.

Now that you have learned about the Headings 1-6, you can continue to the next section of the guide (Primary and Secondary Button).

2) Primary Button and Secondary Button

This section of the guide will cover the General Styles of Primary Button and Secondary Button. These are two different Buttons that can be used on your website. Each of the Buttons offers the same General Style settings. For this reason, only the settings for the Primary Button will be explained below, as the remaining Secondary Button settings repeat the same fields.

● 2 Primary Button. Click on the blue arrow to the right to reveal the fields below.

Font Family. This field enables you to select the Font Family for the Primary Button.

Font Size. This field enables you to enter the Font Size for the Primary Button.

Font Weight. This field enables you to select the Font Weight for the Primary Button.

Font Style. This field enables you to select the Font Style for the Primary Button.

Line Height. This field enables you to enter the Line Height for the Primary Button.

Font Color. This field enables you to select the Font Color for the Primary Button.

Hover Font Color. This field enables you to select the Hover Font Color for the Primary Button. This allows you to change the Font Color when a user Hovers over the Button.

Background Color. This field enables you to select the Background Color for the Primary Button.

Hover Background Color. This field enables you to select the Hover Background Color for the Primary Button. This is the Background Color to be displayed when a user hovers their cursor over the Button.

Border Size. This field enables you to enter the Border Size for the Primary Button.

Border Radius. This field enables you to enter the Border Radius for the Primary Button.

Border Color. This field enables you to select the Border Color for the Primary Button.

Hover Border Color. This field enables you to select the Hover Border Color for the Primary Button. This is the Border Color to be displayed when a user hovers their cursor over the Button.

Example: This area displays an Example of your Primary Button using the settings you have entered above.

Now that you have learned about Primary and Secondary Button, you can continue to the next section of the General Style guide (covering Filter Reset Button).

3) Filter Reset Button

This section of the guide will cover the General Styles of Filter Reset Button. This is a button your webpage that Resets the Filter that customers can use to Search for Products.

● 3 Filter Reset Button. Click on the blue arrow to the right to reveal the fields below to modify settings for the Filter Reset Button.

Font Family. This field enables you to select the Font Family for the Filter Reset Button.

Font Size. This field allows you to define the Font Size for the Filter Reset Button.

Font Weight. This field lets you choose the Font Weight for the Filter Reset Button.

Font Style. This field provides the option to set the Font Style for the Filter Reset Button.

Line Height. This field adjusts the Line Height for the Filter Reset Button text.

Font Color. This field allows you to customize the Font Color for the Filter Reset Button text.

Hover Font Color. This field enables you to set the Font Color for the Filter Reset Button when hovered.

Background Color. This field lets you define the Background Color for the Filter Reset Button.

Hover Background Color. This field allows you to set the Background Color for the Filter Reset Button when hovered.

Border Size. This field enables you to specify the Border Size for the Filter Reset Button.

Border Radius. This field lets you define the Border Radius for the Filter Reset Button.

Border Color. This field allows you to customize the Border Color for the Filter Reset Button.

Hover Border Color. This field enables you to set the Border Color for the Filter Reset Button when hovered.

Example. This field provides an example of how the Filter Reset Button will look with the selected settings.

Now that you have finished with Filter Reset Button, you can continue with the next section (Shopping Cart Primary Text and Shopping Cart Payment Policy Text).

4) Shopping Cart Texts

● 4. Shopping Cart Texts. This section enables you to specify settings for two different Shopping Cart Primary Text and Shopping Cart Payment Page Policy Text.

Shopping Cart Primary Text. Click on the blue arrow to reveal the fields below. This section enables you to customize the Text displayed in your Shopping Cart, e.g. the name of items listed in your Cart.

Font Family. This field enables you to select the Font Family for the Shopping Cart Primary Text.

Example. This field displays an Example of Shopping Cart Primary Text using the specified Font Family.

Shopping Cart Payment Page Policy Text. Click on the blue arrow to the right to reveal the fields below. This section enables you to customize the Text displayed in your Shopping Cart Payment Page Policy.

Font Family. This field enables you to select the Font Family for the Shopping Cart Primary Payment Policy Page Text.

Font Size. This field enables you to select the Font Size for the Shopping Cart Primary Payment Policy Page Text.

Font Weight. This field enables you to select the Font Weight for the Shopping Cart Primary Payment Policy Page Text.

Font Style. This field enables you to select the Font Style for the Shopping Cart Primary Payment Policy Page Text.

Line Height. This field enables you to select the Line Height for the Shopping Cart Primary Payment Policy Page Text.

Letter Spacing. This field enables you to select the Letter Spacing for the Shopping Cart Primary Payment Policy Page Text.

Font Color. This field enables you to select the Font Color for the Shopping Cart Primary Payment Policy Page Text.
Example. This field displays an Example of Shopping Cart Primary Payment Policy Page Text using the specified settings.

Now that you have finished with Filter Reset Button, you can continue with the next section (Input).

5) Input

● 5 Input. Click on the blue arrow to reveal the fields below. This section enables you to customize the Input boxes used on your webpage. These refer to Fields where text can be entered.

Design. This field enables you to select the Design for your Input. There are 3 Designs available, and each Design will affect some of the Fields available below.

Font Family. This field enables you to select the Font Family for your Input.

Font Size. This field enables you to select the Font Size for your Input.

Font Weight. This field enables you to select the Font Weight for your Input.

Font Style. This field enables you to select the Font Style for your Input.

Font Color. This field enables you to select the Font Color for your Input.

Placeholder Color. This field enables you to select the Placeholder Color for your Input.

Background Color. This field enables you to select the Background Color for your Input.

Hover Background Color. This field enables you to select the Hover Background Color for your Input.

Border Size. This field enables you to select the Border Size for your Input.

Border Radius. This field enables you to select the Border Radius for your Input.

Border Color. This field enables you to select the Border Color for your Input.

Hover Border Color. This field enables you to select the Hover Border Color for your Input.

Example. This field displays an Example of your Input using the above settings.

Now that you have finished with Input, you can continue with the next section (Textarea).

6) Textarea

● 6 Textarea. Click on the blue arrow to reveal the fields below. This section enables you to customize the Textarea spaces used on your webpage.

Design. This field enables you to select the Design for your Textarea. There are 3 Designs available, and each Design will affect some of the Fields available below.

Font Family. This field enables you to select the Font Family for your Textarea.

Font Size. This field enables you to select the Font Size for your Textarea.

Font Weight. This field enables you to select the Font Weight for your Textarea.

Font Style. This field enables you to select the Font Style for your Textarea.

Font Color. This field enables you to select the Font Color for your Textarea.

Background Color. This field enables you to select the Background Color for your Textarea.

Hover Background Color. This field enables you to select the Hover Background Color for your Textarea.

Border Size. This field enables you to select the Border Size for your Textarea.

Border Radius. This field enables you to select the Border Radius for your Textarea.

Border Color. This field enables you to select the Border Color for your Textarea.

Hover Border Color. This field enables you to select the Hover Border Color for your Textarea.

Example. This field displays an Example of your Textarea using the above settings.

Now that you have finished with Textarea, you can continue with the next section (Pagination).

7) Pagination

In this section, you will learn about the Pagination settings of General Style. This allows customization of the Pagination buttons and navigation on your webpage.

● 7 Pagination. Click the blue arrow on the right to reveal the fields below. These fields enable you to customize the appearance of your Pagination.

Font Family. This field enables you to select the Font Family for Pagination.

Font Size. This field enables you to enter the Font Size for Pagination.

Font Weight. This field enables you to select the Font Weight for Pagination.

Font Style. This field enables you to select the Font Style for Pagination.

Line Height. This field enables you to enter the Line Height for Pagination.

Font Color. This field enables you to select the Font Color for Pagination.

Hover Font Color. This field enables you to select the Hover Font Color for Pagination.

Active Font Color. This field enables you to select the Active Font Color for Pagination.

Background Color. This field enables you to select the Background Color for Pagination.

Hover Background Color. This field enables you to select the Hover Background Color for Pagination.

Active Background Color. This field enables you to select the Font Style for Pagination.

Example: This field displays an Example of the Pagination with the settings you have chosen above.

Now that you have learned about the Pagination, you can move to the next section of the guide (Shapes filter).

8) Shapes Filter

In this section, you will learn about the Shapes Filter settings of General Style. This allows customization of the Shapes included in the Filter for Searching Products on your webpage.

● 8 Shapes Filter. Click the blue arrow on the right to reveal the fields below. These fields enable you to customize the appearance of your Shapes Filter.

Shapes Filter Background Color. This field enables you to select the Background Color for your Shapes Filter.

Shapes Filter Font Color. This field enables you to select the Font Color for your Shapes Filter.

Example: This field displays an Example of the Shapes Filter with the settings you have chosen above.

Now that you have learned about the Shapes Filter, you can move to the next section of the guide (Paragraphs).

9) Paragraphs

This section of the guide will cover the General Styles for Paragraphs 1–6. This enables you to configure up to 6 different Paragraphs and distinguish them by number. Each of the Paragraphs offers the same General Style settings. For this reason, only the settings for Paragraph 1 will be explained below, as the remaining Paragraph settings repeat the same fields.

● 9 Paragraph 1. Click on the blue arrow to reveal the fields below.

Font Family. This field enables you to select the Font Family for Paragraph 1.

Font Size. This field enables you to enter the Font Size for Paragraph 1.

Font Weight. This field enables you to select the Font Weight for Paragraph 1.

Font Style. This field enables you to select the Font Style for Paragraph 1.

Line Height. This field enables you to enter the Line Height for Paragraph 1.

Letter Spacing. This field enables you to enter the Letter Spacing for Paragraph 1.

Font Color. This field enables you to select the Font Color for Paragraph 1.

Example: This field displays an Example of Paragraph 1 with the settings you have entered above.

Now that you have learned about Paragraph 1-6, you can move to the next section of the guide (covering Hyperlink and Label).

10) Hyperlink and Label

This section of the guide will cover Hyperlink and Label areas. These are separate elements of the General Styles on your webpage that have been grouped together in this guide for simplicity.

● 10 Hyperlink. Click on the blue arrow to reveal the fields below. These fields enable you to customize how a Hyperlink displays on your website.

Underline [Yes | No]. This field enables you to select whether or not to Underline a Hyperlink.

Font Color. This field enables you to select the Font Color for Hyperlink.

Hover Font Color. This field enables you to select the Hover Font Color for Hyperlink

Example: This field displays an Example of the Hyperlink settings you have selected above.

● Label. Click on the blue arrow to reveal the fields below. This section enables you to customize how a Label displays on your website.

Font Family. This field enables you to select the Font Family for Label.

Font Size. This field enables you to enter the Font Size for Label.

Font Weight. This field enables you to select the Font Weight for Label.

Font Style. This field enables you to select the Font Style for Label.

Line Height. This field enables you to enter the Line Height for Label.

Letter Spacing. This field enables you to enter the Letter Spacing for Label.

Font Color. This field enables you to select the Font Color for Label.

Example: This field displays an Example of Label with the settings you have entered above.

Now that you have learned about Hyperlink and Label, you can move to the next section of the guide (Breadcrumb).

11) Breadcrumb

● Breadcrumb. Click on the blue arrow to reveal the fields below. These fields enable you to customize how the Breadcrumb path displays on your website.

Font Family. This field enables you to select the Font Family for Breadcrumb.

Font Size. This field enables you to enter the Font Size for Breadcrumb.

Font Weight. This field enables you to select the Font Weight for Breadcrumb.

Font Style. This field enables you to select the Font Style for Breadcrumb.

Line Height. This field enables you to enter the Line Height for Breadcrumb.

Letter Spacing. This field enables you to enter the Letter Spacing for Breadcrumb.

Font Color. This field enables you to select the Font Color for Breadcrumb.

Example: This field displays an Example of your Breadcrumb with the settings you have entered above.

Now that you have learned about Breadcrumb, you can continue to the next section of the guide (Slider).

12) Slider

This section of the guide will cover Slider. This includes settings which enable you to change how your Slider appears across your webpage.

● Slider. Click the blue arrow to the right to reveal the fields below. The following fields enable you to customize the apperance of the Slider.

Price Background Color. This field enables you to select the Price Background Color for the Slider.

Price Font Color. This field enables you to select the Price Font Color for the Slider.

Border Color. This field enables you to select the Border Color for the Slider.

Indentation Color. This field enables you to select the Indentation Color for the Slider.

Slider Gradient Color 1. This field enables you to select the Slider Gradient Color 1. This determines the Color of the top portion of the Slider.

Slider Gradient Color 2. This field enables you to select the Slider Gradient Color 2. This determines the Color of the middle portion of the Slider.

Slider Gradient Color 3. This field enables you to select the Slider Gradient Color 3. This determines the Color of the bottom portion of the Slider.

Button Gradient Color 1. This field enables you to select the Button Gradient Color 1 for the Slider. This determines the Color of the top portion of the Button for the Slider.

Button Gradient Color 2. This field enables you to select the Button Gradient Color 2 for the Slider. This determines the Color of the middle portion of the Button for the Slider.

Button Gradient Color 3. This field enables you to select the Button Gradient Color 3 for the Slider. This determines the Color of the bottom portion of the Button for the Slider.

Example: This field displays an Example of the Slider with the settings you have chosen above.

Now that you have learned about the Slider, you can move to the next section of the guide (Wishlist Icon)

13) Wishlist Icon

● Wishlist Icon. Click on the blue arrow to reveal the fields below. This section enables you to customize the Icon which allows you to add an item to your Wishlist.

Fill Color. This field enables you to select the Fill Color for your Wishlist Icon.

Stroke Width. This field enables you to enter the Stroke Width for your Wishlist Icon.

Stroke Color. This field enables you to select the Stroke Color for your Wishlist Icon.

Example: This field displays an Example of your Wishlist Icon with the settings you have entered above.

Now that you have learned about the Wishlist Icon, you can move to the next section of the guide (Select).

14) Select

Select. Click on the blue arrow to reveal the fields below. This section enables you to customize the Select dropdowns used on your webpage.

Design. This field enables you to select the Design for your Select dropdown. There are 3 Designs available, and each Design will affect some of the Fields available below.

Font Family. This field enables you to select the Font Family for your Select dropdown.

Font Size. This field enables you to select the Font Size for your Select dropdown.

Font Weight. This field enables you to select the Font Weight for your Select dropdown.

Font Style. This field enables you to select the Font Style for your Select dropdown.

Font Color. This field enables you to select the Font Color for your Select dropdown.

Border Size. This field enables you to select the Border Size for your Select dropdown.

Border Radius. This field enables you to select the Border Radius for your Select dropdown.

Border Color. This field enables you to select the Border Color for your Select dropdown.

Hover Border Color. This field enables you to select the Hover Border Color for your Select dropdown.

Example. This field displays an Example of your Select dropdown using the above settings.

Now that you have finished with Select, you can continue with the next section (Checkbox).

15) Checkbox

Checkbox. Click on the blue arrow to reveal the fields below. This section enables you to customize the Checkbox which can be used in different places throughout your webpage.

Background Color. This field enables you to select the Background Color for your Checkbox.

Example: This field displays an Example of your Checkbox with the settings you have entered above.

Now that you have learned about Checkbox, you can continue to the final section of the guide (Search Box).

16) Search Box

In this section, you will learn about the Search Box settings of General Style. This allows customization of the Search Box on your webpage.

● Search Box. Click the blue arrow to the right to reveal the fields below.

Font Family. This field enables you to select the Font Family for the Search Box.

Font Size. This field enables you to enter the Font Size for the Search Box.

Font Weight. This field enables you to select the Font Weight for the Search Box.

Font Style. This field enables you to select the Font Style for the Search Box.

Font Color. This field enables you to select the Font Color for the Search Box.

Placeholder Color. This field enables you to select the Placeholder Color for the Search Box.

Icon Color. This field enables you to select the Icon Color for the Search Box.

Hover Icon Color. This field enables you to select the Hover Icon Color for the Search Box.

Button Color. This field enables you to select the Button Color for the Search Box.

Button Hover Color. This field enables you to select the Button Hover Color for the Search Box.

Background Color. This field enables you to select the Background Color for the Search Box.

Hover Background Color. This field enables you to select the Hover Background Color for the Search Box.

Border Size. This field enables you to enter the Border Size for the Search Box.

Border Radius. This field enables you to enter the Border Radius for the Search Box.

Border Color. This field enables you to select the Border Color for the Search Box.

Hover Border Color. This field enables you to select the Hover Border Color for the Search Box.

Example. This field displays an Example of the Search Box with the settings you have chosen above.

Now that you have learned about the Search Box, this concludes the user manual article covering Appearance - General Styles.