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. 


You can customize the UI elements displayed on your Portal's home page to alter or modify its appearance. The home page is the default page of your EVCM Portal and showcases your most popular or active media. You can customize the carousels that display trending Media and the banner that displays featured Media. VIDIZMO also provides CSS classes to customize additional UI elements on the home page, such as the featured category carousel, tag cloud, and featured Portals display. 

 

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 Featured Portal Heading 

  1. You can make your homepage more appealing by customizing the headings on it. In this example, we will use the CSS selector ‘.vdz-featuredportal-heading' to modify the 'Featured Portals' heading.
  2. Here is a code snippet for modifying the title by changing its font, font size and color 
.vdz-featuredportal-heading {
    font-size: 10px;
    font-family: "Times New Roman", Times, serif;
    color: purple;
}

       3. Here is the result of the modification 

 

 

Scenario 2: Hiding Banner Arrow Buttons 

  1. To lock or restrict your Portal banner to one view, you can hide the banner arrow buttons using  the ‘.vdz-bannerarrow-left' and ‘.vdz-bannerarrow-left'  CSS selectors. 
  2. Paste the following code snippet in the custom CSS section. 
.vdz-bannerarrow-left {
    display: none !important;
}

.vdz-bannerarrow-right {
    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 Featured Portals Section 


Class

Description 

vdz-featuredportal-heading 

this will change featured portal heading on portal page 

vdz-portal-stats 

allows modification of portal stats of Portals marked as featured on the home page. 


CSS Classes for Media Carousels


ClassDescription

vdz-MashupsMostMostRecent-heading

allows modification of the 'Most Recent Media' heading present on the Portal home page

vdz-MashupsMostMostPopular-heading

allows modification of the 'Most Popular Media' heading present on the Portal home page

vdz-MashupsMostMostViewed-heading

allows modification of the 'Most Viewed Media' heading present on the Portal home page

vdz-homepage-mashup

allows modification of the mashup cards of mashup/Media present under headings on Portal home page

vdz-mashuptype-icon

allows modification of the icon present  in replacement of a thumbnail

vdz-live-icon

allows modification of the live icon present on the Live mashup format

vdz-mashup-progress

allows modification of the progress bar shown on the mashup thumbnails/mashup cards

vdz-mashup-updateddate

allows modification of the last updated date status of the mashup present on the Portal homepage

vdz-carousel-next

allows modification of the next buttons on homepage carousel sections

vdz-carousel-prev

allows modification of the previous buttons on homepage carousel sections


CSS Classes for Featured Media Banner 


Class

Description 

vdz-featured-carousel 

allows modification of the featured media carousel on the Portal homepage 

vdz-featuredvideo-thumbnail 

allows modification of thumbnails of featured media  

vdz-featurevideo-title 

allows modification of title of featured media  

vdz-bannerarrow-left 

allows modification of the left arrow on carousel that has featured media  

vdz-bannerarrow-right 

allows modification of the right arrow on carousel that has featured media 


CSS Classes for Tag Cloud 


Class

Description 

vdz-tag-btn 

allows modification of the tags shown on the Portal homepage under 'Tag Cloud' 

vdz-tags-heading 

allows modification of the 'Tag Cloud' heading present on the Portal's homepage 

 

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.