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
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
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:
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.
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:
; } 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:
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
This results in the following booking page
Note: It's not possible to change the color of the date picker!