Styling User login and User profile

The user login and the user profile pages are two elements that can be styled when setting up Customers on your website. Naturally, both elements inherit styling from Global Design in order to make their appearance consistent with your design. However, you are able to change the styling of both elements if you prefer.

User login

The User login section found under Customer engagement in the Global Design menu allows you to style the elements for the login form. The options provided to style the User login module include the following:

  • Button alignment
  • Login link
  • Overlay

Below is an example of a User login module.

1__User_login.gif

 Where can I add the User login module?

The User login module can only be placed in the header and/or footer of the website.

 

Button alignment

With button alignment, you can choose to align the user login form to the left, center, or right of the website.

Login link

When styling the login link, you have many options that include customizing ‘Small text’ style that the link inherits from. Options here include:

  • Font weight
  • Color
  • Text decoration
  • Font family
  • Font size
  • Letter spacing
  • Paragraph height
  • Font case

You are also able to style characteristics of the background color and border, including style, color, thickness, and border radius. Lastly, for the login link, you can adjust the spacing using margin and padding to meet your needs.

Overlay

The overlay includes elements such as the title, input fields, forgot password link, request access link, and button. Each of these elements provide you with the ability to customize the styling further and these options include:

  • Font weight
  • Color
  • Text decoration
  • Font family
  • Font size
  • Letter spacing
  • Paragraph height
  • Font case

The button element provides you with a few additional options such as:

  • Button alignment
  • Button float
  • Button width
  • Icon color
  • Icon size
  • Icon spacing

Finally, like all other modules, there are general styling options such as background color, border, and spacing options for the overlay.

User profile page

The user profile page section found under Customer engagement in the Global Design menu allows you to style the elements for the profile page the user will fill out. When selecting this option, you will be taken to a page template where changes you make will be visualized in the Editor’s canvas. The options provided to style on this page include the following:

  • Background
  • Headline
  • Input field labels
  • Checkbox/radio labels
  • Text in fields
  • Save button

Below is an example of a user profile page.

2__User_profile.gif

 

Background

Changing the color of the background will affect the color of the entire page background. You are also able to add a background image and if you choose to do so, you will see more options such as image repeat, size, and positioning giving you ultimate control of your page. You also have options to adjust the margin and padding of the page.

Text and fields

The content making up the user profile page inherits from different elements of Global Design, however you do have options to customize the style of each, such as:

  • Font weight
  • Color
  • Text decoration
  • Font family
  • Font size
  • Letter spacing
  • Paragraph height
  • Font case

The Save button element provides you with a few additional options such as:

  • Button alignment
  • Button float
  • Button width
  • Icon color
  • Icon size
  • Icon spacing
Was this article helpful?
0 out of 0 found this helpful