Overview
VIDIZMO allows users to brand their visitor verification modal to establish a distinguishable identity. Through branding, you get the ability to set font-family, font-size, font-color, modal alignment, text-alignment, etc for visitor verification policy that suits your organization's brand identity, so on and so forth. To learn more about VIDIZMO branding, see: Understanding Branding Settings.
Before you start
- Only technically advanced users, who are familiar with HTML and style sheets, will be able to style UI elements using custom CSS.
- Make sure to log in as an Administrator or Manager to custom-style using 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 play around the design of the application as they see fit. When the SASS code is processed, it takes the variables we defined and outputs normal CSS with our variable values placed in the CSS. After that we need to copy that output CSS and paste it in the Custom CSS text box and press the ‘Update’ button, branding will apply in the overall portal.
Please refer to https://sass-lang.com/ for further detail about SASS.
Click here to view the basic SASS template, against which you can see the CSS that you are required to paste under Custom CSS in Branding settings of your Portal.
Understanding SASS Variables
Following is the list of VIDIZMO-defined SASS variables used in the SASS template for branding visitor verification with their scope in the application. You can use this information to style your visitor verification policy as you wish:
$modal-title-alignment: This variable is defined for Title alignment. You can align the title to left, right, center, etc. Default is Center.
$modal-description-alignment: This variable is defined for Description alignment. You can align the description to left, right, center, etc. Default is Center.
$modal-button-alignment: This variable is defined for Button alignment. You can align the button to left, right, center, etc. Default is Center.
$modal-text-color: This variable is defined for Modal text color. You can define your own desired color. The default is #000000.
$title-font-size: This variable is defined for Title font size. You can define your own desired size. The default is 38px.
$description-font-size: This variable is defined for Description font size. You can define your own desired size. The default is 24px.
$modal-font-family: This variable is defined for the Modal font family. You can change it to different as per your portal font-family. The default is 'open sans'.
Convert SASS to CSS
Now, after making changes to the template here, copy the CSS code compiled against your changes, as shown below. You will also see a brief indication at the top-right of your CSS code reflecting the time it took to compile your changes.
