In this article

Overview

Concept

Before you start

Branding using SASS Template

Understanding SASS Variables

Convert SASS to CSS

Read Next


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 veriifcaalong with their scope in the application. You can use this information to style your visitor verification policy as you wish:

  1. $modal-title-alignmentThis variable is defined for Title alignmentYou can align the title to left, right, center, etc. Default is Center.



 



  1. $modal-description-alignment: This variable is defined for Description alignmentYou can align the description to left, right, center, etc. Default is Center. 

 


  1. $modal-button-alignment: This variable is defined for Button alignmentYou can align the button to left, right, center, etc. Default is Center. 


 



$modal-text-color: This variable is defined for Modal text colorYou can define your own desired color. The default is #000000.


 



$title-font-size: This variable is defined for Title font sizeYou can define your own desired size. The default is 38px.


 



$description-font-size: This variable is defined for Description font sizeYou can define your own desired size. The default is 24px.


 



$modal-font-family: This variable is defined for the Modal font familyYou 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.