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.
A VIDIZMO Portal utilizes menus, buttons, and collapsible elements to help users navigate to different pages within the application, enabling them to access its features and perform various configurations. These navigational UI elements can also be customized 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
- 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 Action Menu Button
- In this example, we will use the CSS selector ‘.vdz-action-menu' to modify the action menu button to highlight or make it more apparent to the user.
- Here is a code snippet for modifying the title by changing its font, font size and color.
.vdz-action-menu {
background-color: purple;
}3. Here is the result
Scenario 2: Hiding Help Button
- To hide the help button on your Portal button we will use the ‘.vdz-help-btn' selector.
- Paste the following code snippet in the custom CSS section.
.vdz-help-btn {
display: none !important;
}3. Here are the results
Scenario 3: Customizing Upload Media Button Using CSS Nesting
- To perform modifications to some UI elements, you would need to use CSS nesting as these are made up of multiple classes. For instance, if you want to modify the upload button’s colors, you need to apply this.
- One for the circle, and one for the plus. Both of which are nested and part of the upload button. You can view these two classes by inspecting it via your browser's developer tools.
- So here is the snippet for modifying both elements, we will turn the circle purple and the button yellow. And we will nest both of these classes inside the upload button class to ensure that this CSS is not applied to circles or plus icons anywhere else on your Portal.
.vdz-upload-btn .fa-circle {
color: purple;
}
.vdz-upload-btn .fa-plus {
color: purple;
}4. Here is the result.
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 Navigation Bar
| Class | Description |
| vdz-action-menu | allows modification of Portal's action menu |
| vdz-leftpanel-btn | allows modification of button on Portal's action menu |
| vdz-search-bar | allows modification of Portal's search bar |
| vdz-advsearch-btn | allows modification of the Advanced Search button next to search bar |
| vdz-search-btn | allows modification of Portal's search button next to search bar |
| vdz-workflow-btn | allows modification of Portal's button to see workflow pane (top right) |
| vdz-joinportal-btn | allows modification of the Join Portal button (visible when logged out) |
| vdz-userprofile-btn | allows modification of User's profile button (active when logged in) |
| vdz-change-language | allows modification of the option to change language of Portal that is shown when user is logged out |
CSS Classes for Navigation Sidebar
Class | Description |
vdz-portal-image | allows modification of the Portal icon, may not affect the thumbnail/favicon |
vdz-portal-title | allows modification of Portal title |
vdz-home-btn | allows modification of the 'Home' button present on the side navigation bar |
vdz-assetlibrary-btn | DEMS homepage button |
vdz-portals-collapsable | allows modification of the 'Portals' collapsable menu present on the side navigation bar |
vdz-adminoptions-collapsable | allows modification of the 'Admin' collapsable menu present on the side navigation bar |
vdz-mediamanager-btn | allows modification of the 'Media Manager' button present on the side navigation bar |
vdz-userandgroups-btn | allows modification of the 'User and Groups' button present on the side navigation bar |
vdz-portalsettings-btn | allows modification of the 'Portal Settings' button present on the side navigation bar |
vdz-controlpanel-btn | allows modification of the 'Control Panel' button present on the side navigation bar |
vdz-reports-btn | allows modification of the 'Reports Dashboard' button present on the side navigation bar |
vdz-about-btn | allows modification of the 'About Us' button present on the side navigation bar |
vdz-contactus-btn | allows modification of the 'Contact Us' button present on the side navigation bar |
vdz-privacypolicy-btn | allows modification of the 'Privacy Policy' button present on the side navigation bar |
vdz-desktopapp-btn | allows modification of the 'Desktop App' download button present on the side navigation bar |
CSS Classes for Footer
Class | Description |
vdz-footer | allows modification of footer of your Portal |
vdz-vidizmo-copyright | allows modification of the copyright light of your Portal |
CSS Classes for Global Portal Links
Class | Description |
vdz-link | allows modification of the links present across the portal such as applications in portal settings etc |
vdz-upload-btn | allows modification of upload button present on an EVCM Portal |
vdz-help-btn | allows modification of the help button present on your Portals |
CSS Classes for User Profile Sidebar
| Class | Description |
vdz-userprofile-image | allows modification of the user's image on the profile pane |
vdz-username-text | allows modification of the user information text on the profile pane |
vdz-emailaddress-text | allows modification of only the user's email section on the profile pane |
vdz-manageprofile-btn | allows modification of the 'Manage Profile' button on the profile pane |
vdz-mylibrary-heading | allows modification of 'My Library' heading on the profile pane |
vdz-learningplan-link | allows modification of 'Learning Plan' link on the profile pane |
vdz-sharedwithme-link | allows modification of 'Shared With Me' link on the profile pane |
vdz-favorites-link | allows modification of 'Favorites' link on the profile pane |
vdz-myuploads-link | allows modification of 'My Uploads' link on the profile pane |
vdz-mytracking-link | allows modification of 'My Tracking' link on the profile pane |
vdz-offlinedownloads-link | allows modification of 'Offline Downloads' link on the profile pane |
vdz-myprofile-heading | allows modification of 'My Profile' heading on the profile pane |
vdz-changelanguage-collapsable | allows modification of 'Change Language' link on profile pane |
vdz-notificationsetting-link | allows modification of 'Notification Setting' link on profile pane |
vdz-changepassword-link | allows modification of 'Change Profile' link on profile pane |
vdz-help-collapsable | allows modification of 'Help' link on profile pane |
vdz-submitticket-link | allows modification of 'Submit Ticket' link present under 'Help' on profile pane |
vdz-helpsite-link | allows modification of 'Help Site' link present under 'Help' on profile pane |
vdz-signout-link | allows modification of 'Sign Out' link on user profile pane |
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.