How to Customize your Portal's Navigation

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

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 Appearance Action Menu Button

1. 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.
2. 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

1. To hide the help button on your Portal button we will use the .vdz-help-btn selector.
2. 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

1. 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.
2. 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.
3. 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  

CSS Classes for Navigation Sidebar

CSS Classes for Footer

CSS Classes for Global Portal Links

CSS Classes for User Profile Sidebar

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.