Skip to main content

Customization

General Configuration​

You can customize several things directly on the Web Builder.

First for that, you will have to connect to the voila website with your organization credentials. Once connected go to your program, you can click on Website customization menu and define global setup.

  • Color Palette: create your own Drak or light Color palette
  • Emojis Set: upload your own emojis for the Voilà Player
  • Advanced: Define your timezone display (GMT, CET, etc...)

Note For now, Navigation Bar and Typography are reserved only for Voilà Attendee website.

Overwrite CSS​

Directly in the web builder, you can override all Voilà CSS. Go to the More menu > Advanced Features > CSS Overrides

img Configuration

In this example, we override the border-radius of button and the color of the session date.

Custom CSS variables​

You can override directly css variables to change all properties:

.voila-container {
  --voila-light: #10101a;
  --voila-dark: #fff;
  --voila-background-light: #fff;
  --voila-background-dark: #18181a;
  --voila-card-session-padding: 16px;
  --voila-card-session-border-radius: 8px;
  --voila-color-coming: #38843b;
  --voila-color-live: #de0237;
  --voila-color-replay: #005fe5;
  --voila-accent-text-color: #fff;
  --voila-accent-text-color-hover: #fff;
  --voila-accent-background-color: #366cff;
  --voila-accent-background-color-hover: #3364e8;
}