SmartV Profile Screen Styling

You can style the SmartV Profile screen to complement your brand and business needs.

Visit the SmartV Profile page for more information on configuring the SmartV Profile screen.

The Profile page has two major element:

  • the main screen; and
  • the modal that opens when a user wants to change the profile image.

Main screen

Styling options - Main screen
Styling options – Main screen

The SmartV Profile’s main screen has several different aspects that you can style in numerous ways, for instance, changing the font (family, color, or size), adding borders, or changing colors and margins.

Below is an example of some of the changed options for the profile page:

Example of changed styles
Example of changed styles

1. Profile Box

Change the styling of the Profile Box. This is the entire registration screen excluding the Page setting (number 8 on the images).

2. Title

Change the styling of the Title, for instance, “Profile.”

3. Description

Change the styling of the Description, for instance, “Profile description.”

4. Profile Image

Change the styling of the Profile Image that you added.

5. Profile Text

Change the styling of the Profile Text that that the user will see when they hover on the profile image.

6. Button

Change the styling of the Buttons (Default, Hover, and Clicked), for instance, “Continue.” You can set different styling to default, hover, and clicked buttons. The options are the same under Default, Hover, and Clicked.

7. Page

Change the styling of the Page. This is the page background behind the Registration Box.

Styling options - Modal
Styling options – Modal

The SmartV Profile’s modal has several different aspects that you can style in numerous ways, for instance, changing the font (family, color, or size), adding borders, or changing colors and margins.

Below is an example of some of the changed options for the modal on the profile page:

Example of changed styles
Example of changed styles

Change the styling of the modal’s Title, for instance, “Update profile image.”

2. Modal Close Icon

Change the styling of the modal’s close icon “X.”

3. Modal Content

Change the styling of the modal’s Content.

4. Modal DropZone

Change the styling of the modal’s DropZone. This is the box where the user can click to drop or upload an image.

5. Modal DropZone Text

Change the styling of the modal’s DropZone Text, for instance, “Drag and drop a file here or click.”

6. Modal DropZone Icon

Change the styling of the modal’s DropZone Icon.

7. Modal DropZone Files

Change the styling of the modal’s DropZone Files message, for instance, “No files.”

Change the styling of the modal’s Footer, for instance, “Use a picture up to 200×200 px.”

9. Modal Message

Change the styling of the modal’s Message, for instance, “Profile image updated.”

Change the styling of the modal’s Buttons, for instance, “Update” and “Cancel.”

Note:

Use the Captions option to change the wording of the following:

  • Title
  • Description
  • Modal Title
  • ModalDropZoneText
  • ModalDropZoneFiles
  • Modal Message

Hidden Title

Need more help?