Overview 

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. 


You can customize the UI elements present on the 'All Portals' page using custom CSS. These UI elements have CSS classes that you can utilize to perform your customizations. You can perform modifications, such as hiding the buttons to leave, create, or delete a Portal. You can also use them to customize the look of the 'All Portals' page if you wish. 


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 'New Portal' Button 

  1. In this example, we will use the CSS selector ‘.vdz-newportal-btn' . 
  2. Here is a code snippet for modifying the title by changing its font, font size and color  
.vdz-newportal-btn {
    background-color: gray;
    color: black;
}
         3. Here is the result of the modification.



Scenario 2: Hiding 'Delete Portal' Button 

  1. To hide the delete button we will use the ‘.vdz-deletetenant-btn' selector. 
  2. Paste the following code snippet in the custom CSS section. 
.vdz-deletetenant-btn {
    display: none !important;
}
        3.  Here is the result of your customization. 


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 Portal Cards 

Class 

Description 

vdz-portal-card 

allows modification of Portals' card display on 'All Portals' screen  

vdz-leavetenant-btn 

allows modification of 'Leave Portal' button present on the Portal cards 

vdz-jointenant-btn 

allows modification of 'Join Portal' button present on the Portal cards 

vdz-deletetenant-btn 

allows modification of 'Delete Portal' button present on the Portal cards 

vdz-portal-image 

allows modification of the images on all Portal cards present in 'All Portals' screen 

vdz-defaultportal-checkbox 

allows modification of the 'Default Portal' checkbox on Portal card of the current default Portal 

vdz-portal-title 

allows modification of the Portal titles present on all the Portal cards 

vdz-portal-createddate 

allows modification of the 'Date Created' field present on all the Portal cards 

vdz-portalnotfound-alert 

allows modification of the message shown when a Portal is not found on any tab of 'All Portal' page 


CSS Classes for Portal Management Interface

Class

Description 

vdz-dropdown 

allows modification of the dropdown with filter options for Portals on the 'All Portals' screen 

vdz-user-portals 

allows modification of the Portal count/limit indicated on the 'All Portals' screen 

vdz-portal-message 

allows modification of the message present on the 'All Portals' screen 

vdz-portal-tabs 

allows modification of the bar containing tabs on the 'All Portals' screen 

vdz-myportal-tab 

allows modification of the 'My Portal' tab on the 'All Portals' screen 

vdz-allportal-tab 

allows modification of the 'All Portals' tab on the 'All Portals' screen 

vdz-internalportal-tab 

allows modification of the 'Internal Portals' tab on the 'All Portals' screen 

vdz-restrictedportal-tab 

allows modification of the 'Restricted Portals' tab on the 'All Portals' screen 

vdz-publicportal-tab 

allows modification of the 'Public Portals' tab on the 'All Portals' screen 

vdz-newportal-btn 

allows modification of the 'New Portal' button on the 'All Portals' screen 

 

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.