Registration Styling
Customize a unique registration screen to complement your brand and business needs. Visit the SmartV Registration page for more information on configuring the Registration screen. This element can be edited on both the Project Style Level and Element Style Level.
| # | Option | Function |
|---|---|---|
| 1 | Registration Box | The Registration Box allows you to style the sign-up screen. You can style a unique registration screen using your brand colors. |
| 2 | Title | Title properties allow you to style the name of the element. For example, its font type, font size, and color. |
| 3 | Description | The description properties allow you to control the style of the descriptive text or a short instruction. For example, its font type, font size, and color. |
| 4 | Button | This option allows you to style the navigation button. You can set different styles to display by Default, upon Hovering or Clicking on an element. The options are the same under Default, Hover, and Clicked. |
| 5 | Progress | Style the progress error or success line upon form completion or when the user has entered an identifying parameter and clicked the button. |
| 6 | Sign Up Label | The Sign Up Label allows you to control the style of the descriptive text above the input. For example, its font size, color, and type. |
| 7 | Sign Up Link | The Sign Up Link allows you to style the link that the user must select to open the Registration screen. |
| 8 | Page | Use the page properties to style the page background behind the Log In Box. |
| 9 | Input Fields | This option allows you to choose the general look of the input from the five existing variants: Standard, Filled, Outlined, Fixed, and Classic. Set a specific height and width and change the element’s main/key color. |
1. Registration Box
Customize a unique registration screen to complement your brand and business needs.
| # | 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 registration 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 or a short instruction. 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
Style the progress error or success line upon form completion.
| # | Option | Function |
|---|---|---|
| 1 | Color | You can change the progress color. |
| 2 | Line | You can adjust the line size. |
| 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
The Sign Up Label allows you to control the style of the descriptive text above the input. For example, its font size, color, and type.
| # | 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 registration 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. |
Note:
Use the Captions option to change the wording of the following:
- Title
- Description
Hidden Title
Was this information helpful?
Let us know so we can improve!
Need more help?
Book Demo