Skip to main content
Version: V12

How to Brand Visitor Verification Policy

VIDIZMO allows users to brand their visitor verification modal to establish a distinguishable identity. Through branding, you can set font-family, font-size, font-color, modal alignment, text-alignment, and more for the visitor verification policy to match your organization's brand identity. To learn more about VIDIZMO branding, see Understanding Branding Settings.

Prerequisites​

  • Users must belong to a group with the Portal Management permission enabled.
  • Only users familiar with HTML and CSS/SASS can style UI elements using custom CSS.

Branding Using SASS Template​

VIDIZMO has defined a basic template for branding CSS using the SASS framework, making it easier for users to modify values and customize the design of the application. When the SASS code is processed, it takes the variables defined and outputs normal CSS with the variable values placed in the CSS.

For more information about SASS, see sass-lang.com.

View the basic SASS template at SassMeister.

Understanding SASS Variables​

The following VIDIZMO-defined SASS variables are used in the template for branding visitor verification:

  1. $modal-title-alignment - Defines title alignment. Values: left, right, center, etc. Default: center.

  1. $modal-description-alignment - Defines description alignment. Values: left, right, center, etc. Default: center.

  1. $modal-button-alignment - Defines button alignment. Values: left, right, center, etc. Default: center.

  1. $modal-text-color - Defines modal text color. Default: #000000.

  1. $title-font-size - Defines title font size. Default: 38px.

  1. $description-font-size - Defines description font size. Default: 24px.

  1. $modal-font-family - Defines the modal font family. Default: 'open sans'.

Apply Custom CSS​

  1. Open the SASS template and modify the variables as needed.
  2. Copy the compiled CSS code from the right panel.
  3. In VIDIZMO, select the Navigation Menu.
  4. Go to Admin > Portal Settings.
  5. Expand the Branding section.
  6. Select Custom CSS.
  7. Paste the compiled CSS code into the text box.
  8. Select Update.

The branding is applied to the visitor verification modal across the portal.

Did you find this article helpful?