Log In Styling

1. Log In Box

The Log In Box option allows you to style the rectangle container that holds all the content on the login page. Set a back color or image, add padding or margin, change the border, etc.

#	Option	Function
1	Fill	The fill option allows you to add color to the element’s content or shape. Select a color fill from the color palette.
2	Padding	You can style the padding of an element by controlling the text’s distance from the borders of the element.
3	Margin	Margin allows you to set the size of the outer space of an element. It also allows you to add space between the label and the adjacent element parts.
4	Border	Use the border properties to create an outline of an element. You can change the entire border or each side separately.
5	Shadow	You can style the shadow of an element to complement your brand.
6	User CSS	Cascading Style Sheets (CSS) are a simple mechanism used to add style to elements. You can easily change the element background, font color, or font type using syntax.

2. Title

Title properties allow you to style the main title of the login box.

#	Option	Function
1	Font	The fill option allows you to add color to the element’s content or shape. Select a color fill from the color palette.
2	Fill	The fill option allows you to add color to the content or the shape of the element. Select a color fill from the color palette.
3	Padding	You can style the padding of an element by controlling the text’s distance from the borders of the element.
4	Border	You can style the padding of an element by controlling the text’s distance from the borders of the element.
5	Shadow	You can style the shadow of an element to complement your brand.
6	User CSS	Cascading Style Sheets (CSS) are a simple mechanism used to add style to elements. You can easily change the element background, font color, or font type using syntax.

3. Description

The description properties allow you to control the style of the descriptive text under the title. For example, its font type, font size, and color.

#	Option	Function
1	Font	The font allows you to change the style of the typography, for instance, font family, weight, color, and size.
2	Fill	The fill option allows you to add color to the element’s content or shape. Select a color fill from the color palette.
3	Padding	You can style the padding of an element by controlling the text’s distance from the borders of the element.
4	Margin	Margin allows you to set the size of the outer space of an element. It also allows you to add space between the label and the adjacent element parts.
5	Border	Use the border properties to create an outline of an element. You can change the entire border or each side separately.
6	Shadow	You can style the shadow of an element to complement your brand.
7	User CSS	Cascading Style Sheets (CSS) are a simple mechanism used to add style to elements. You can easily change the element background, font color, or font type using syntax.

4. Button

This option allows you to style the Continue button. You can set different styles for the different button states: Default, Hover and Clicked. Learn more about the tree button states here.

#	Option	Function
1	Font	The font allows you to change the style of the typography, for instance, font family, weight, color, and size.
2	Fill	The fill option allows you to add color to the element’s content or shape. Select a color fill from the color palette.
3	Size	This option allows you to change the width and height of the button.
4	Padding	You can style the padding of an element by controlling the text’s distance from the borders of the element.
5	Margin	Margin allows you to set the size of the outer space of an element. It also allows you to add space between the label and the adjacent element parts.
6	Border	Use the border properties to create an outline of an element. You can change the entire border or each side separately.
7	Shadow	You can style the shadow of an element to complement your brand.
8	User CSS	Cascading Style Sheets (CSS) are a simple mechanism used to add style to elements. You can easily change the element background, font color, or font type using syntax.

5. Progress

This enables you to style the progress bar that appears upon form submission.

#	Option	Function
1	Color	You can change the progress color.
2	Line	You can adjust the thickness of the line.
3	User CSS	Cascading Style Sheets (CSS) are a simple mechanism used to add style to elements. You can easily change the element background, font color, or font type using syntax.

6. Sign Up Label

This property is relevant when you have a registration page included in your SmartV. It allows you to change the style of the descriptive text that precedes the registration link.

#	Option	Function
1	Font	The font allows you to change the style of the typography, for instance, font family, weight, color, and size.
2	Fill	The fill option allows you to add color to the element’s content or shape. Select a color fill from the color palette.
3	Padding	You can style the padding of an element by controlling the text’s distance from the borders of the element.
4	Margin	Margin allows you to set the size of the outer space of an element. It also allows you to add space between the label and the adjacent element parts.
5	Border	Use the border properties to create an outline of an element. You can change the entire border or each side separately.
6	Shadow	You can style the shadow of an element to complement your brand.
7	User CSS	Cascading Style Sheets (CSS) are a simple mechanism used to add style to elements. You can easily change the element background, font color, or font type using syntax.

7. Sign Up Link

This property is relevant when you have a registration page included in your SmartV. It allows you to change the style of the link that leads to the registration page.

#	Option	Function
1	Font	The font allows you to change the style of the typography, for instance, font family, weight, color, and size.
2	Fill	The fill option allows you to add color to the element’s content or shape. Select a color fill from the color palette.
3	Padding	You can style the padding of an element by controlling the text’s distance from the borders of the element.
4	Margin	Margin allows you to set the size of the outer space of an element. It also allows you to add space between the label and the adjacent element parts.
5	Border	Use the border properties to create an outline of an element. You can change the entire border or each side separately.
6	Shadow	You can style the shadow of an element to complement your brand.
7	User CSS	Cascading Style Sheets (CSS) are a simple mechanism used to add style to elements. You can easily change the element background, font color, or font type using syntax.

8. Page

This refers to the entire browser real estate that resides under the login box. It allows you to set a background, padding, border etc.

#	Option	Function
1	Fill	The fill option allows you to add color to the element’s content or shape. Select a color fill from the color palette.
2	Padding	You can style the padding of an element by controlling the text’s distance from the borders of the element.
3	Border	Use the border properties to create an outline of an element. You can change the entire border or each side separately.
4	Shadow	You can style the shadow of an element to complement your brand.
5	User CSS	Cascading Style Sheets (CSS) are a simple mechanism used to add style to elements. You can easily change the element background, font color, or font type using syntax.

9. Input Fields

When you select the input field on the login box, it enables you to set the style for the various inputs’ primary color, labels, etc. It also enables you to set styles for the Date field modal when used in the login box. Use the Input Variant to choose the general look of the input from the five existing variants.

#	Option	Function
1	Input Variant	Configure the TextField Varient and the Size Variant.
2	Primary	The primary properties allow you to change the element’s primary color.