Overview
VIDIZMO allows users to modify various aspects of your Portal's UI using custom CSS. These UI elements have a predefined CSS class, which you can utilize when writing the CSS code for your customizations. In this article, we will see how you can perform these UI Customizations according to the Client Access License (CAL) assigned to users on your Portal.
In VIDIZMO, a CAL specifies an individual user's rights and permissions. It determines what actions they can perform and what features they can access on a VIDIZMO Portal. Therefore, a VIDIZMO Portal displays the UI elements, features, and other functionalities to the logged-in user based on their CAL.
Like UI elements, these CALs also have corresponding CSS classes that you can use when writing the customization code. These CSS classes allow you to perform UI modifications specific to a CAL's context. You can utilize this functionality to alter or hide specific UI elements for users assigned a particular CAL(s).
Prerequisites
- Ensure that you have Portal Management permissions so you can access the Control Panel and Portal Settings.
- To use Custom CSS, ensure you have access to the Branding feature via group permission or CAL.
Identify Portal CALs
- Open the Navigation Pane via the top left button.
- Click the 'Admin' dropdown.
- Select 'Control Panel.'
4. In the Control Panel, select 'User's CALs.'
5. Use the 'View Features of CAL' dropdown to see all CALs on your Portal and their feature permissions.
CAL Classes
In VIDIZMO, the CSS class of a specific CAL consists of the ‘'cal-’ prefix followed by its title in lowercase (e.g. cal-calname). You can obtain the CSS classes for CALs on your Portal by obtaining their titles via the process detailed in the 'Identify Portal CALs' section and then applying the VIDIZMO class conventions. For instance, if your Portal has a CAL named 'Manager-123DE', then its CSS selector would be 'cal-manager-123de.'
You can also use your browser's developer tools to obtain the CSS Class of the CAL that is logged in, follow the steps for the process:
- Let us log into our Portal as a user assigned the Manager CAL.
2. After logging in, open your browser's developer tools. In this demonstration we are using Google Chrome.
3. Select the Elements tab.
4. In the 'class=' attribute of the <body> tag, you can identify the CAL class indicated by the 'cal-' prefix. In this case, the class is 'cal-manager.' You can repeat the process with other CALs to obtain their CSS classes.
Note: When you log in as a user assigned a specific CAL, you can observe their context and, thus, the context of their CAL. This helps you understand what a particular portal user assigned that CAL can see, access, and use. It provides you with greater insight to make modifications effectively.
CAL Based Customization
You can use CSS Nesting to perform the UI modifications according to CALs. See the code snippet below to see how you can modify the colors for the navigation bar (vdz-nav-bar) for the contributor CAL (cal-contributor) using their respective CSS classes.
/* Customizing for Contributor CAL */
.cal-contributor {
/* Class for navigation bar selected */
.vdz-nav-bar {
/* Your styling goes here */
background-color: purple !important;
}
} Copy the code snippet and follow the steps to see how you can apply the CAL specific customizations on your Portal:
- Click Portal Settings on the Navigation Pane
2. Click Branding
3. Select Customize
4. Paste the code snippet in the Custom CSS section
5. Click the 'Update' to apply the customizations. It is recommended that you refresh your browser pages to see results on your Portal.
6. Here is how the navigation bar will be modified for users with the Contributor CAL.
Diagnostics
- If the changes are not being reflected, try using !important in you CSS declarations.
- 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 classes via browser’s developer tools.