Step 3: Adjusting the appearance of your Age Verification widget

The power of color in design is undeniable. While we often focus on functionality and user experience, this aspect should definitely not be overlooked. In this article, we are going to show you how you can use the Appearance tab of your Age Verification widget to make it more attention-grabbing.

Adjusting the colors

The first thing you may want to change is Overlay Background:

Depending on your preferences, you can either choose it to be a certain Color, Gradient, Image, or Video:

Once it's decided, you can move on to changing the Popup Background Color (1), Text Color (2), and Submit Button Color (3):

To set a certain custom color, click on the Custom Color icon:

And then use the top slider to select the color and the bottom one to set the transparency:

Changing the appearance of text elements

The next step is to adjust your text elements. Here you can select your preferred Font (1), customize the font weight and font size of Message (2), main Text (3), Additional Text, and choose Text Align (5):

Choosing Popup Shape

On the Popup Shape tab, you can either choose between one of the predefined options, or set your own Radius by clicking on “...”:

Using Custom CSS / Custom JS options

The Custom CSS and Custom JS features may come in handy when the present styling options are not enough:

For instance, you can use the following CSS code to change the widget's font when the desired font is not available within the widget's settings:

.global-styles,[class^='RootLayout__Component'] {
  font-family: Brighton Spring;
}

The Custom JS feature can be used for more advanced customization. Reach out to our Support Team and we will be happy to assist you with that!