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.
Using Custom CSS, you can customize your Portal's UI. In addition to changing the appearance, some CSS properties enable you to manage visibility or display. Using these properties and the respective CSS classes of the UI elements, you can control the display of specific options in your Portal Settings or Control Panel. You can also implement CAL-specific CSS customization to add another layer to your customization.
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 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.
CSS Customization Scenarios
- Open the navigation menu via the button on the top left.
- Click the ‘Admin’ dropdown.
- Click ‘Portal Settings.’
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 Appearance of Options
- You can emphasize or highlight an option in the Control Panel or Portal Settings using Custom CSS. Let's demonstrate using the CSS selector ‘.vdz-Navigation-Menu-settings'
- Here is a code snippet for modifying the title by changing its font, font size and color .
.vdz-Navigation-Menu-settings {
color: orange;
}3. Here is the result of the modification
Scenario 2: Hiding Portal Management Options
- You can use Custom CSS to hide the Portal management options. Let us see how to hide 'Privacy' from Portal Settings using the ‘.vdz-Privacy-settings' selector.
- Paste the following code snippet in the custom CSS section.
.vdz-Privacy-settings {
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 Settings
Class | Description |
vdz-General-settings | allows modification of general settings option present in Portal settings |
vdz-Title-settings | allows modification of title settings present in Portal settings |
vdz-About-Us-settings | allows modification of about us settings present in Portal settings |
vdz-Help-& | allows modification of help & support settings present in Portal settings |
vdz-Home-Page-settings | allows modification of home page settings present in Portal settings |
vdz-Featured-Media-settings | allows modification of featured media settings present in Portal settings |
vdz-Featured-Categories-settings | allows modification of featured categories settings present in Portal settings |
vdz-Featured-Portals-settings | allows modification of featured portals settings present in Portal settings |
vdz-Branding-settings | allows modification branding settings present in Portal settings |
vdz-Navigation-Menu-settings | allows modification of navigation menu settings present in Portal settings |
vdz-Search-Engine | allows modification of search engine settings present in Portal settings |
vdz-Domains-settings | allows modification of domains settings present in Portal settings |
vdz-Language-settings | allows modification of language settings present in Portal settings |
vdz-Customize-settings | allows modification of customize settings present in Portal settings |
vdz-Customized-Header-settings | allows modification of customize header settings present in Portal settings |
vdz-White-Label-settings | allows modification of white label settings present in Portal settings |
vdz-Thesaurus-settings | allows modification of Thesaurus settings present in Portal settings |
vdz-Player-Template-settings | allows modification of player template settings present in Portal settings |
vdz-Theme-Editor-settings | allows modification of theme editor settings present in Portal settings. |
vdz-Library-settings | allows modification of library settings present in Portal settings |
vdz-Categories-settings | allows modification of categories settings present in Portal settings |
vdz-Tags-settings | allows modification of tags settings present in Portal settings |
vdz-Custom-Attributes-settings | allows modification of custom attribute settings present in Portal settings |
vdz-Default-Publish | allows modification of default publishing settings present in Portal settings |
vdz-Comments-settings | allows modification of comments settings present in Portal settings |
vdz-Upload-Settings-settings | allows modification of upload settings present in Portal settings |
vdz-Media-Sharing-settings | allows modification of media sharing settings present in Portal settings |
vdz-Content-Lifecycle | allows modification of content lifecycle policy settings present in Portal settings |
vdz-Transcription-Templates-settings | allows modification of transcription templates present in Portal settings |
vdz-Certificate-Templates-settings | allows modification of certificate templates present in Portal settings |
vdz-Download-Message-settings | allows modification of download settings present in Portal settings |
vdz-Manage-Private | allows modification of manage private content policy settings in Portal settings |
vdz-ElasticSearch-settings | allows modification of elastic search settings present in Portal settings |
vdz-Privacy-settings | allows modification of Privacy settings present in Portal settings |
vdz-GDPR-Compliance-settings | allows modification of GDPR compliance settings present in Portal settings |
vdz-Terms-of | allows modification of terms of use present in Portal settings. |
vdz-Privacy-Policy-settings | allows modification of privacy policy settings present in Portal settings |
vdz-Anonymous-User | allows modification of anonymous user policy present in Portal settings |
vdz-Apps-settings | allows modification of Apps settings present in Portal settings |
vdz-Single-Sign-On-settings | allows modification of SSO settings present in Portal settings |
vdz-Multi-Factor-Authentication | allows modification of MFA settings present in Portal settings |
vdz-Tracking-settings | allows modification of tracking app settings present in Portal settings |
vdz-Support-settings | allows modification of support settings present in Portal settings |
vdz-Content-Processing-settings | allows modification of content processing settings present in Portal settings |
vdz-Content-Management | allows modification of content managment present in Portal settings |
vdz-Integration-Apps-settings | allows modification of integration app settings present in Portal settings |
vdz-Content-Ingestion-settings | allows modification of content ingestion settings present in Portal settings |
vdz-Account-settings | allows modification of Account settings present in Portal settings |
vdz-Organization-settings | allows modification of organization settings present in Portal settings |
vdz-Consumption-Reports-settings | allows modification of consumption reports settings in Portal settings |
vdz-Consumption-Alerts-settings | allows modification of consumption alerts settings present in Portal settings |
CSS Classes for Control Panel
Class | Description |
vdz-Security-settings | allows modification of security settings present in the Control Panel |
vdz-Security-Policy-settings | allows modification of security policy settings present in the Control Panel |
vdz-Restricted-Extensions-settings | allows modification of restricted extension settings present in the Control Panel |
vdz-Custom-Headers-settings | allows modification of custom header settings present in the Control Panel |
vdz-Login-Settings-settings | allows modification of login settings present in the Control Panel |
vdz-User-Registration | allows modification of user registration settings present in the Control Panel |
vdz-Media-Embedding-settings | allows modification of Media embedding option present in the Control Panel |
vdz-Whitelisted-Email | allows modification of whitelisted email settings present in the Control Panel |
vdz-Location-Restriction-settings | allows modification of location restrictions settings present in the Control Panel |
vdz-Audit-Log-settings | allows modification of audit log settings present in the Control Panel |
vdz-Webhook-Logs-settings | allows modification of webhook log settings present in the Control Panel |
vdz-Storage-Providers-settings | allows modification of Storage provider settings present in the Control Panel |
vdz-Encoding-settings | allows modification of Encoding options present in the Control Panel |
vdz-Encoding-Providers-settings | allows modification of encoding provider settings present in the Control Panel |
vdz-Encoding-Profiles-settings | allows modification of encoding profile settings present in the Control Panel |
vdz-Live-Streaming-settings | allows modification of Live streaming settings present in the Control Panel |
vdz-Publishing-Point-settings | allows modification of publishing point settings present in the Control Panel |
vdz-User's-CALs-settings | allows modification of User CAL settings present in the Control Panel |
vdz-Email-settings | allows modification of Email settings in the Control Panel |
vdz-Email-Templates-settings | allows modification of email template settings present in the Control Panel |
vdz-Email-Settings-settings | allows modification of this email settings option present in the Control Panel |
vdz-Workflows-settings | allows modification of Workflow page viewing button present in the Control Panel |
vdz-ECDN-settings | allows modification of ECDN settings present in the Control Panel |
vdz-ECDN-Nodes-settings | allows modification ECDN node settings present in the Control Panel |
vdz-Locations-settings | allows modification of Location settings in the Control Panel |
vdz-Private-Locations-settings | allows modification of private location settings in the Control Panel |
vdz-Global-Locations-settings | allows modification of global location settings in the Control Panel |
vdz-Setup-Wizard-settings | allows modification of option to go into setup wizard settings in the Control Panel |
Diagnostics
- If the changes are not being reflected, try using !important in your 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.
- Take good care when adding a visibility display CSS property to modify either the 'vdz-branding- class' or 'vdz-Portal-Settings' class. You may have to either navigate to the Portal Settings page URL use your browser’s dev tools to unhide the class to access Customize page.