How to Customize your Portal's Library and Mashup Cards

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 to customize the appearance of your Portal content and the locations or pages where you can manage them. These locations are your 'Portal's library,' 'Media or Evidence Manager,' and a Portal user's 'My Library.'

Using Custom CSS, you can make detailed customizations to the display of the Portal content, including their cards, details, and thumbnails, by utilizing the respective CSS classes for these elements. This level of customization also allows you to cater to different use cases. For instance, you can use custom CSS to either highlight or hide certain aspects of your content, such as their upload date or views. In addition, you can customize the display of your content according to the different view modes of your Portal's libraries.

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 Title Text for your Portal Content

1. In this example, we will use the CSS selector .vdz-mashup-title to modify the title for your Portal content. This change is reflected across the Portal, meaning you will see it on the Homepage, Portal Library, Evidence or Media Manager and your Library.
2. Here is a code snippet for modifying the title by changing its font and color  

.vdz-mashup-title {
color: red;
font-family: Arial, Helvetica, sans-serif
}

3. Here are the results

Scenario 2: Removing View Count from Portal Content

1. You can also use CSS to hide metadata from the cards of your Portal content. In this example, we will hide the views using the .vdz-mashup-views CSS selector.
2. Paste the following code snippet in the custom CSS section.

.vdz-mashup-views {
display: none !important;
}

3. Here are the results.

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 Filter Component

CSS Classes for Portal Content Cards

CSS Classes for List View

Note: The information you see on the cards of your Portal content differ in List View and Thumb View.

CSS Classes for Bulk Action Menu

CSS Classes for Media/Evidence Manager Tabs

CSS Classes for Search and Filter Options

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.