Most frequently requested CSS codes

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!

Before you go ahead, please have a look at this article to check which web pages can be edited and how to do so.

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.

When using the Classic layout, the background image should cover the whole screen. When using the Neo layout, the background will only cover the right side of the screen. Click here to learn more about the Virtual Lobby's layouts.

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:

  1. 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);

}

  1. Left Banner on the top of the page:

body.neo-layout #barTop .leftBar {

background-color: #002242 !important;

border-right: 1px solid transparent!important;

}

  1. Right Banner on the top of the page:

body.neo-layout #barTop .rightBar {

background-color: #002242 !important;

}

You should replace #002242 with any other Hex code so you can input the color you would like to have in your Virtual Lobby background.

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.

The above code works for both layouts: Classic and Neo.
  • 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;}

The Welcome header is only present if you are using the Neo layout.

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.

Hiding Virtual Lobby

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:

troubleshoot button hidden with CSS code

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.

To make sure you are changing the correct piece of code, hover over the code, whatever you are trying to edit will highlight, meaning you should be able to see what you are about to configure.
  • 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.

The use of JavaScript for CSS customization of the platform is not allowed. JavaScript is only allowed on the platform when creating landing pages but, please, notice that we do not allow JavaScript on the root domain.

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:

  1. 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:
Note that the text between /* */ isn't part of the code, but a marking to organize your customization codes.

  • An example of how it will be displayed on the website is shown below (Eastern Time).

  1. 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:
CSS code to hide the timezone on forms
  • 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:
screenshot with 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.

  1. My Account

#myAccountWrapper #myAccountContent {

background-image: url("image link address goes here");

background-size: 1400px 1200px;

}

  1. My Agenda

#myAgendaWrapper .v2-bgContent {

background-image: url("image link address goes here");

background size: 1400px 1200px;

}

  1. My Tickets

#ticketManagerWrapper .v2-bgContent {

background-image: url("image link address goes here");

background-size: 1400px 1200px;

}

  1. My Forms

#myFormsWrapper .v2-bgContent {

background-image: url("image link address goes here");

background-size: 1400px 1200px;

}

  1. My App

#appContent.v2-bgContent {

background-image: url("image link address goes here");

background-size: 1400px 1200px;

}

  1. Registration Form

#formVue .formContent {

background-image: url("image link address goes here");

background-size: 1400px 1200px;

}

  1. 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.

Hiding the content page


How Did We Do?