Most frequently requested CSS codes
Updated 3 months ago
by
Lisvan Reyes Ricardo
- Customizing the Virtual Lobby
- How can I customize the Virtual Lobby background image?
- How do I change the colors of the headers in the Virtual Lobby?
- Changing the font color on the activities chat
- Hiding the Virtual Lobby tab
- Hiding the Troubleshoot button
- Remove the raise hand button in activities
- Hide the speaker's email on Neo Virtual Lobby
- Hide the speaker's email on Classic Virtual Lobby
- Editing other features of the web pages
You can use the CSS tool to edit your web pages and customize the appearance of several aspects of your Virtual or Hybrid event. Please note that CSS is a styling language widely used for customizing websites, and therefore, best used by developers. In this FAQ we will show how to use the most frequently requested CSS codes, allowing a few insights into how to take your event customization to another level!
Customizing the Virtual Lobby
How can I customize the Virtual Lobby background image?
You can change the main background image on your Virtual Lobby. Check out this article to learn how.
On the Neo template, to fill in the left side of the page and the right banner that the previous step didn't cover, please use the codes below:
- Left side of the page:
body.neo-layout #liveContent .lobby .container-box .scrollable-container-box {
width: calc(60vw - 72px);
background-color: #002242 !important;
padding: 8px 36px;
padding-right: 22px;
box-sizing: border-box;
border-right: 1px solid #DADDDE;
min-height: calc(100vh - 62px);
}
- Left Banner on the top of the page:
body.neo-layout #barTop .leftBar {
background-color: #002242 !important;
border-right: 1px solid transparent!important;
}
- Right Banner on the top of the page:
body.neo-layout #barTop .rightBar {
background-color: #002242 !important;
}
How do I change the colors of the headers in the Virtual Lobby?
- To change the colors in which Activities, Sponsors, Networking and Group Rooms will be shown in the Lobby, use the code below:
#liveWrapper #liveContent .lobby-header h1 span {color: #FF4500 !important;}
The hex code #FF4500 can be replaced by any other hex code you'd like.
- To change the color in which the Welcome header for the welcome card is displayed in the Virtual Lobby, use the code below:
body.neo-layout #liveContent .lobby .container-box .scrollable-container-box #welcome .welcome-title {width: calc(1400px 1200px); color: #FFB247 !important;}
Changing the font color on the activities chat
- Use the following code:
#liveContent .chat-container .chat-unpinned .chat-body .chat {
color: #e5a85e !important;
}
Hiding the Virtual Lobby tab
Some event organizers do not want the attendees to have access to the Virtual Lobby before the event starts. If that's the case, you could hide the Virtual Lobby tab until before the event starts by pressing Settings > Tabs > Virtual Lobby (in the upper left). Then, uncheck the Visible column corresponding to the Virtual Lobby, and press End to save the changes.
After doing that, the Virtual Lobby icon should disappear from the Lobby's menu, but under My Account, the Open Lobby button will still be displayed.
If you'd like to remove the Open lobby button as well, you will need to do it by editing the source code and adding the following code to the event details page.
- Press Event > Details > Edit > scroll down until you see the blue button Souce code > add the following code:
#headerVue .eventCover-info-virtual-lobby {
display: none;
}
Hiding the Troubleshoot button
- On the Source Code page, add the following code:
.v2-barTop .barContent
.barDropdown.optionTroubleshoot{
display : none !important;
}
On the Virtual Lobby, the Troubleshoot button will be hidden in both: Neo and Classic layouts. Below you can find an example on the Neo:
Remove the raise hand button in activities
- On the Source Code page, add the following code:
#liveContent .videos .videos-controls .toolRaiseHands {
position: absolute;
z-index: 15;
padding: 7px;
display: none;
} - This is what the code should look like:
Hide the speaker's email on Neo Virtual Lobby
- In the Source Code page, add the following code:
#InEventDialog .speaker-modal [data-field="email"] {
display: none !important;
}
Hide the speaker's email on Classic Virtual Lobby
- If you are using the Classic Layout, use this code instead:
#liveWrapper .live-speakers .floating-info [data-field="email"] {
display: none !important;
}
Editing other features of the web pages
- To edit other features of the web pages go to the web page, find the particular item or items you want to change, right-click and press Inspect.
- In this example, we will change the font size and color of the registration form
- Right-click on the text of the registration form and click inspect
- You will see the Styles tab open, containing the code for the font and color of the font.
- For example, when I hover over the .formcard code the form font is highlighted:
- Copy and paste the code to the Custom CSS box on the event details page.
- Edit the font size and the colors to your preference.
How do I add a timezone to the website agenda?
For these examples, we will add timezone information to your website, helping global participants to keep track of your event's agenda. Be aware that the times shown on the Virtual Lobby are device-sensitive and the codes below apply exclusively to the visualization of your website's agenda:
- Displaying the timezone under the activity's date:
- Go to the Event > Details page, click the Edit button, and scroll the page down to click the Source Code button.
- Copy and paste the code below on the Source Code page.
#websiteContent .calendar .tabs:after {
content: "Eastern Time";
font-size: 15px;
}
- This is what the code is supposed to look like on the source code page:
- An example of how it will be displayed on the website is shown below (Eastern Time).
- Displaying the timezone information right by the activity's end time:
- Copy and paste the code below on the Source Code page.
#websiteContent .time:after {
content: "write your timezone here";
font-size: 16px;
}
- This is how the code should look on the Source Code page:
- An example of how it will be displayed on the website is shown below (EST)
How do I remove the timezone and event date from the Registration/ Purchase form?
The Event date and time as well as the Timezone set on the Event details page will be displayed on the Registration Form and the Purchase form (if tickets are enabled).
- If you wish to remove that information from these pages you can enter the code below:
#formContent .eventCover .eventDate {
visibility: hidden !important;
}
#purchaseContent .eventCover .eventDate {
visibility: hidden !important;
}
- This is how the code should look on the Source Code page:
- And the image below displays both situations, on the left the Timezone being displayed, and on the Right the CSS code being used to hide the timezone:
Adding a background image to other pages
Here are other pages you can add a background image to. You may copy and paste the code below into the CSS, just remember to insert the image address link. You can also change the background size "px" to match your image.
- My Account
#myAccountWrapper #myAccountContent {
background-image: url("image link address goes here");
background-size: 1400px 1200px;
}
- My Agenda
#myAgendaWrapper .v2-bgContent {
background-image: url("image link address goes here");
background size: 1400px 1200px;
}
- My Tickets
#ticketManagerWrapper .v2-bgContent {
background-image: url("image link address goes here");
background-size: 1400px 1200px;
}
- My Forms
#myFormsWrapper .v2-bgContent {
background-image: url("image link address goes here");
background-size: 1400px 1200px;
}
- My App
#appContent.v2-bgContent {
background-image: url("image link address goes here");
background-size: 1400px 1200px;
}
- Registration Form
#formVue .formContent {
background-image: url("image link address goes here");
background-size: 1400px 1200px;
}
- Custom form
#customFormVue #customFormContent {
background-image: url("image link address goes here");
background-size: 1400px 1200px;
}
Background colors and titles
To change the background colors you can follow the codes above for each page, this time instead of background-image: and background-size: you will use background-color:
- To add a color you will enter a hex code that looks like this: #FF0085
- For example, to change the registration form background color, after the form root, add the following code:
#formVue .formContent {
background-color: #FF0085;
}
How do I hide the 'Go to event' button?
The content page is the page where your attendees will land once they finish their registration via the registration form. Click here for further information on the content page.
To hide the content page, copy and paste the code below to the Source Code field:
#formContent section.form[role="alert"] .formCard .formEnd {
display: none !important;
}
On the left, you have the default behavior of the registration form without the Go to event! button being hidden. On the right, the content page and thus the Go to event! button has been hidden.
