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. 


VIDIZMO provides CSS classes that can be used to customize your Portal's sign-in page. These classes allow you to modify certain UI elements on this page, such as the fields or buttons used for signing in to your Portal. You can perform modifications like changing colors, adjusting sizes, altering fonts, and even hiding some UI elements. 

 

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: Modifying Appearance of Sign In Title 

  1. In this example, we will use the CSS selector ‘.vdz-signin-title' to modify the text on the sign in page. 
  2. Here is a code snippet for modifying the title by changing its font, font size and color 
.vdz-signin-title {
    color: purple;
    font-family: Broadway, Britannic, 'Courier New', monospace;
    font-size: 200%;
}


        3. Here is the result of the modification 


 


Scenario 2: Hiding Sign In Elements 

You can hide login buttons if you dont want the users to tamper with the button. They can login by writing their credentials and then pressing the enter key instead. Or if you have only SSO available on your Portal, then you can choose to hide the login and password fields. To make only the SSO sign buttons and text available.  

  1. To hide the login button we will use the ‘.vdz-sign-btn' selector. 
  2. Paste the following code snippet in the custom CSS section 
.vdz-signin-btn {
    visibility: hidden !important;
}
        3. Here is the result of you 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   


List of CSS Classes Sign-In Page  

Class

Description 

vdz-change-language 

allows modification of the option to change language of Portal that is shown when user is logged out 

vdz-leftpanel-btn 

allows modification of button on Portal's action menu 

vdz-joinportal-btn 

allows modification of the Join Portal button (visible when logged out) 

vdz-footer 

allows modification of footer of your Portal 

vdz-vidizmo-copyright 

allows modification of the copyright light of your Portal 

vdz-signin-image 

allows modification of the image section present on the Portal's sign-in page 

vdz-signin-title 

allows modification of the title present on the Portal's sign-in page 

vdz-signin-email 

allows modification of the 'Email' field on the Portal's sign-in page 

vdz-signin-password 

allows modification of the 'Password' field on the Portal's sign-in page 

vdz-forgotpassword-link 

allows modification of the 'Forgot Password' link on the Portal's sign-in page 

vdz-joinportal-link 

allows modification of the 'Join Portal' link on the Portal's sign-in page 

vdz-signin-btn 

allows modification of the 'Sign In' button present on the Portal's sign-in page 

vdz-GoogleSSO-btn 

allows modification of the 'Google SSO' button on Portal's sign-in page 

vdz-MicrosoftAccountSSO-btn 

allows modification of the 'Microsoft Account SSO' button on Portal's sign-in page 

vdz-FacebookSSO-btn 

allows modification of the 'Facebook SSO' button on Portal's sign-in page 


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.