Most frequently requested CSS codes
- CSS codes to customize the Virtual Lobby
- Hide the Open lobby button from My Account tab in the Virtual Lobby
- Hide the Troubleshoot button from the Virtual Lobby
- Remove the Raise Hand button in activities
- Hide the Speaker email address from the Virtual Lobby
- Change chat font color in activities
- Add a timezone description to the website agenda
- Remove event timezone and date from Registration/Purchase forms
- Remove the Go to event button from the Registration form
- Set unique background images for specific pages in the Virtual Lobby
- Set unique background colors for specific pages in the Virtual Lobby
- Customizing other page items or elements
With InEvent, it is easy to customize your Virtual Lobby using the Virtual Lobby Editor. The Virtual Lobby Editor allows you to style your Virtual Lobby in a way that reflects the style and atmosphere of your event.
In addition to the Virtual Lobby Editor, you can perform advanced customization of the Virtual Lobby using custom Cascading Style Sheet (CSS) codes.
This article provides some of the most commonly requested CSS codes to further customize the Virtual Lobby.
CSS codes to customize the Virtual Lobby
The codes provided here will do the following:
- Hide the Open lobby button from My Account tab in the Virtual Lobby (Neo and Classic layout)
- Hide the Troubleshoot button from the Virtual Lobby (Neo and Classic layout)
- Hide the Speaker email address from the Virtual Lobby (Neo and Classic layout)
- Hide the Raise Hands button in activities
- Change chat font color in activities
- Add timezone to website Agenda
- Remove event timezone and date from Registration/Purchase forms
- Hide the Go to event button in the Registration form
- Set unique background images for specific pages in the Virtual Lobby
- Set unique background colors for specific pages in the Virtual Lobby
Hide the Open lobby button from My Account tab in the Virtual Lobby
To hide the Open Lobby button from the My Account tab in the Virtual Lobby (Neo and Classic layout), paste the following CSS code in the Source code text box:
#headerVue .eventCover-info-virtual-lobby {
display: none;
}
Hide the Troubleshoot button from the Virtual Lobby
To hide the Troubleshoot button from the Virtual Lobby (Neo and Classic layouts), paste the following CSS code in the Source code text box:
.v2-barTop .barContent .barDropdown.optionTroubleshoot{
display: none !important;
}
Remove the Raise Hand button in activities
To remove the Raise Hand button in activities, paste the following CSS code in the Source code text box:
#liveContent .videos .videos-controls .toolRaiseHands {
position: absolute;
z-index: 15;
padding: 7px;
display: none;
}
Hide the Speaker email address from the Virtual Lobby
To hide Speakers email address from the Virtual Lobby, paste one of the following CSS codes below in the Source code text box, depending on the set event layout:
- Virtual Lobby - Neo layout
#InEventDialog .speaker-modal [data-field="email"] {
display: none !important;
}
- Virtual Lobby - Classic layout
#liveWrapper .live-speakers .floating-info [data-field="email"] {
display: none !important;
}
Change chat font color in activities
To change the font color on the activities chat, paste the following CSS code in the Source code text box:
#liveContent .chat-container .chat-unpinned .chat-body .chat {
color: "insert color here" !important;
}
"insert color here"
with the desired color (written as universal CSS color names or as a HEX color code)Add a timezone description to the website agenda
These codes will add a timezone description to your agenda under the activity date or beside the activity end time. Paste one of the following CSS codes in the Source code text box:
- Timezone description under activity date
#websiteContent .calendar .tabs:after {
content: "insert timezone name";
font-size: 15px;
}
insert timezone name
with the desired timezone name in text while keeping the quotation marks intact.- Timezone description beside activity end time
#websiteContent .time:after {
content: "insert timezone name";
font-size: 16px;
}
The following image shows how the codes above will affect your agenda, with insert timezone name
set to Eastern Time
:

Remove event timezone and date from Registration/Purchase forms
To remove event timezone and date details from Registration or Purchase forms, paste one or both of the following CSS codes in the Source code text box:
- Registration form
#formContent .eventCover .eventDate {
visibility: hidden !important;
}
- Purchase form
#purchaseContent .eventCover .eventDate {
visibility: hidden !important;
}
Below is how the code will affect your Registration/Purchase forms:

Remove the Go to event button from the Registration form
To remove the Go to event button from Registration form, paste the following CSS code in the Source code text box:
#formContent section.form[role="alert"] .formCard .formEnd {
display: none !important;
}
Below is how the code will affect your Registration form:

Set unique background images for specific pages in the Virtual Lobby
To set unique background images to specific pages in the Virtual Lobby, paste the corresponding CSS codes into the Source code text box:
- My Account
#myAccountWrapper #myAccountContent {
background-image: url("insert image link here");
background-size: [insert image size here];
}
background-image
URL, keep the quotation marks intact. background-size
values include auto
, length in pixels (px
), percentage %
, cover
and contain
. When inserting background-size
value, do not include the brackets.- My Agenda
#myAgendaWrapper #myAccountContent {
background-image: url("insert image link here");
background-size: [insert-image-size];
}
- My Tickets
#ticketManagerWrapper #myAccountContent {
background-image: url("insert image link here");
background-size: [insert image size here];
}
- My Forms
#myFormsWrapper #myAccountContent {
background-image: url("insert image link here");
background-size: [insert image size here];
}
- My App
#appContent #myAccountContent {
background-image: url("insert image link here");
background-size: [insert image size here];
}
- Registration Form
#formVue .formContent {
background-image: url("insert image link here");
background-size: [insert image size here];
}
- Custom Form
#customFormVue #customFormContent {
background-image: url("insert image link here");
background-size: [insert image size here];
}
Set unique background colors for specific pages in the Virtual Lobby
To set unique background colors instead of background images for the previously mentioned pages, remove the following lines:
background-image: url("insert image link here");
background-size: "insert image size here";
Afterwards, insert the following line:
background-color: [insert color here];
Customizing other page items or elements
To customize other page items or elements, refer to the following instructions:
- Navigate to the desired page.
- Locate the item or element you want to customize.
- Right click on the item you wish to customize. A context menu will appear.
- Click Inspect. Your browser's Developer Tools will appear.
- Locate the properties of the item you want to customize under Styles.
- Replace the item properties as desired.
