Skip to main content
Version: V12

How to Customize User Profile

Branding is essential to your VIDIZMO Portal as it significantly impacts your users' experience and strongly emphasizes your brand voice, theme, or tone. VIDIZMO provides the tools to customize various aspects of your Portal, such as your Portal thumbnail or header.

In addition, you can customize various aspects of your Portal's user interface (UI) using custom CSS. The UI elements each have a predefined CSS class that you can utilize when writing your CSS code for customizations.

Using Custom CSS, you can customize the appearance of your users' profile pages on your Portal. This includes customizing the labels and fields that show information about the users, such as which groups they belong to, their assigned CAL, and even their profile picture. Additionally, if you have the required permissions to edit user details, you can modify the fields where the user details are entered using their respective CSS classes.

Note: Please note that the class availability depends on the type of VIDIZMO product you are using, whether you have the required permissions, and whether a certain feature is available in your product.

Prerequisites​

  • Ensure that you have Portal Management permission to access Portal settings.
  • To use Custom CSS, ensure you have access to the Branding feature via group permission or CAL.

CSS Customization Scenarios​

  1. Open the navigation menu via the button on the top left.
  2. Click the 'Admin' dropdown.
  3. Click 'Portal Settings.'
  4. Click Branding.
  5. Select Customize.
  6. Enter the code for your customizations in the Custom CSS section.
  7. Click the 'Update' button to apply the modifications. We recommend refreshing your browser to see the changes on your Portal.

Note: To obtain the CSS class of a specific UI element, right-click and inspect it using your browser's developer tools. A CSS class is indicated by the 'vdz-' prefix.

Scenario 1: Customizing User Information Fields​

  1. In this example, we will use the CSS selector .vdz-profile-firstname to modify the first name field.
  2. Here is a code snippet for modifying the field by changing its background color and text color.
.vdz-profile-firstname {
background-color: darkgray;
color: black;
}
  1. Keep in mind that these modifications are also reflected on the Edit profile page accessed by Edit profile button.

Scenario 2: Hiding the Edit Profile Button​

  1. To hide the 'Edit Profile' button we will use the .vdz-editprofile-button selector.
  2. Paste the following code snippet in the custom CSS section.
.vdz-editprofile-button {
display: none !important;
}

Note: In addition to customizing UI elements using their CSS classes, you can write code to make these customizations specific to CAL on your VIDIZMO Portal. Learn more here: How to Perform CAL Specific CSS Customizations

CSS Classes for User Profile​

ClassDescription
vdz-profile-firstnameallows modification of the 'First name' field on the user profile view
vdz-profile-lastnameallows modification of the 'Last name' field on the user profile view
vdz-profile-countryallows modification of the 'Country' field on the user profile view
vdz-profile-stateallows modification of the 'State' field on the user profile view
vdz-profile-emailallows modification of the 'email' field on the user profile view
vdz-profile-cityallows modification of the 'City' field on the user profile view
vdz-profile-languageallows modification of the 'Languages' field on the user profile view
vdz-profile-roleallows modification of the 'CAL' field on the user profile view
vdz-profile-groupsallows modification of the 'Groups' field on the user profile view
vdz-viewing-accessallows modification of the 'Viewing access' field on the user profile view
vdz-profile-addonsallows modification of the 'Addons' field on the user profile view
vdz-editprofile-buttonallows modification of the 'Edit Profile' button on the user profile view

Diagnostics​

  • At times you might want to use !important if the changes are not being reflected.
  • Another reason that changes might not be affected is if the UI element has multiple or Nested CSS classes on it. You can check the CSS class of a certain element by checking from your browser's developer tools.
Did you find this article helpful?