This is an old guide to customize CSS for meeting rooms and booking pages. We don't recommend using this old css guide to set up basic brand colors. Use the brand color field on the customization page. Only for advanced color usage you can still use this way. The business plan and a custom domain are required! 

In this help article we shortly explain how to update the colors of meeting rooms and booking pages by adding custom HTML and CSS to the Custom HTML head block on the customization page.

In this help article

• Meeting room customization
  • General meeting room customization
  • Customization of specific buttons in the meeting room
  • Add functionality with Javascript
• Booking pages customization

Meeting room customization

General meeting room customization

Meeting room customization enables you to easily hide elements or change the global styling of the meeting room.

Example: You can change the main colors

<style>
  :root {
    --brand-color: #d32f2f;
    --brand-color-hover: #dc5959;
    --brand-color-active: #c22828;
  }
</style>

This results in the following meeting room and invitation screen

Customization of specific buttons in the meeting room

It's also possible to customize specific buttons in your meeting rooms. Below you can find all the possible elements that can be changed for desktop and phone layout.

Desktop layout:

Content elements
- "meeting__whiteboard"
- "meeting__upload"
- "meeting__share"
- "meeting__cobrowse"

Footer elements
- "meeting__cam"
- "meeting__mic"
- "meeting__leave"
- "meeting__separator-left"
- "meeting__settings"
- "meeting__recordings"
- "meeting__invite"
- "meeting__separator-right"
- "meeting__chat"
- "meeting__privatenotes"

Header elements
- "meeting__fullscreen"
- "meeting__profile"
- "meeting__presenter-mode"

Phone layout:

Footer elements
- "meeting__cam-phone"
- "meeting__mic-phone"
- "meeting__leave-phone"
- "meeting__settings-phone"
- "meeting__chat-phone"

Header elements
- "meeting__knockers-phone"
- "meeting__profile-phone"

All these elements can be customized. For most of the above elements, it's possible to customize the icon and label separately, like in this example below:

<style>
#meeting__recordings > .btn {
  color: #ffbe09;
  background-color:#2199b8;
}

#meeting__recordings > .btn > .btn__icon {
  display: none;
}

#meeting__recordings > .btn > .btn__label {
  text-decoration: underline;
}
</style>

This will result in

You can also add different colors for Hover, Active and Focus for an improved experience. For example, add a light color when hovering over the button.

<style>
#meeting__recordings > .btn {
  color: #ffbe09;
  background-color:#2199b8;
}

 #meeting__recordings > .btn:hover {
    color: #ffbe09;
    background-color:#2199b824;
}

#meeting__recordings > .btn > .btn__icon {
  display: none;
}

#meeting__recordings > .btn > .btn__label {
  text-decoration: underline;
}
</style>

When hovering the button, this will result in

 Important notes and exceptions!

• The Vectera team recommends not to change the Background colors of the Cam and Mic buttons, so the activation status remains clear

• If you'd like to give an Icon* a different color, you will have to use the following declaration { Fill: <color>; }

• To customize the chat button you'll have to use the" Element Element" descendant selector instead of the "Element > Element" child selector:

#meeting__chat .btn {
display: none;
}

instead of

#meeting__chat > .btn {
display: none;
}

Example

I would like to give the Chat icon a color so I will add the following CSS in the Custom HTML head block:

<style>
#meeting__chat  .btn {
  fill: #ffbe09;
  }
</style>

This will result in

Add functionality with Javascript

Javascript can be added as well. These Javascript elements can bring additional functionality to the meeting rooms. For instance, you can add a support bubble from your organization to assist users in the meetings.

More info can be found in the main article about the custom HTML block.

Booking pages customization

When embedding the booking pages - having a customized experience is of great importance. The entire styling of the booking pages can be changed: Button colors, line thickness, background, etc.

Example: you can change the colors of appointment types on your booking page

<style>
  a {
    color: #138468; 
  }
  a:hover, a:focus, a:active {
    color: #650048; 
  }
  .scheduler .btn-block {
    box-shadow: none;
    border: solid 1px #138468; 
  }
  .scheduler .btn-block:hover, 
  .scheduler .btn-block:focus, 
  .scheduler .btn-block:active {
    background-color: #13846836 !important; 
  }
  .scheduler #appointments .appointment .appointment-header .details img {
    filter: grayscale(100%); 
  }
  .scheduler #appointments .appointment .button {
    background: #138468;
    box-shadow: none; 
  }
  .scheduler #appointments .appointment .button:hover, 
  .scheduler #appointments .appointment .button:focus, 
  .scheduler #appointments .appointment .button:active {
    background-color: #138468; 
  }
  .scheduler #timeslotpicker .timeslots {
    background-color: #138468;
  }
  .scheduler #timeslotpicker .ui-datepicker-title {
    color: #138468;
  }
  .scheduler .btn-block:hover, 
  .scheduler .btn-block:focus, 
  .scheduler .btn-block:active {
    background-color: #9fd6c8 !important;
  }
  .scheduler #contact-form .title .scheduled-appointment, 
  .scheduler #done .title .scheduled-appointment {
    background-color: #138468;
  }
  .scheduler #contact-form .data form .btn-submit, 
  .scheduler #done .data form .btn-submit {
    background: #138468;
  }
  .scheduler #contact-form .data form .btn-submit:hover, 
  .scheduler #contact-form .data form .btn-submit:focus, 
  .scheduler #done .data form .btn-submit:hover, 
  .scheduler #done .data form .btn-submit:focus {
    background: #9fd6c8 !important;
  }
</style>

This results in the following booking page

Note: It's not possible to change the color of the date picker!