Custom branding using CSS
CSS Stands for Cascading Style Sheet. Cascading style sheets are used to format the layout of Web pages. They can be used to adapt colors, layout, font and other aspects of Web pages that previously could only be defined in a page's HTML.
Using the CSS tool you can edit your web pages. CSS is a language and therefore best used by developers, but in this FAQ we will show you an example of how you can add background images to your web pages.
Which web pages can I edit?
You can edit the following web pages:
- Website
- My Account
- My Agenda
- Networking
- My Tickets
- My Forms
- My App
- Virtual Lobby
- Registration Form
- Custom Form
- Purchase Form
How do I enable the CSS tool?
To enable the CSS tool, click on Settings > Tools > Edit > scroll down until you see the Start section > enable White Label > press End to save the changes.

Where can I find the CSS tool?
Go to Event > Details > Edit. Scroll down to Custom CSS for Attendee Center and click the blue button.

Once you open up the CSS you will find a table, containing the web pages you can edit and the root of that page.
Page | Root |
#websiteContent | |
#myAccountWrapper | |
#myAgendaWrapper | |
#networkingWrapper | |
#ticketManagerWrapper | |
#myFormsWrapper | |
#appContent | |
#liveWrapper | |
#formVue | |
#customFormVue | |
#purchaseVue |
Below the table of Pages and their roots you will have the Custom CSS box where you can begin to code the changes. When you want to edit a particular piece of the web page, always start by entering the the ROOT to the text box.

Check an example below:

Most requested CSS codes
How can I customize the Virtual Lobby background image?
For this example we will add an image to the Virtual Lobby background.
Go to the Custom CSS tool and enter the root.
The root for the registration form is #liveWrapper
press the space bar
Then copy and paste this code:
#liveWrapper #liveContent {
background-image: url("image link address goes here");
background-size: 1400px 1200px;
}
As you can see, you need to add an image address, you can find a picture and right click then choose "copy image address and add it inside the code like so:
#liveWrapper #liveContent {
background-image: url("https://wallpaperaccess.com/full/1460623.png");
background-size: 1400px 1200px;
}
The Custom CSS box should now look like this:

Click on the blue Done button and then go to Event > Virtual Lobby > Preview to see your new background image.

To fill in the left side of the page and the right banner that the previous code didn't cover with the previous code in the Neo template, please check the codes bellow:
- 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;
}

Adding a background image to other pages
Here are other pages you can add a background image too.
You may copy and paste the code below into the CSS but please 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 which looks like this: #FF0085
You can use your search engine to search "hex codes" to find the exact color you wish to use.
For example to change the registration form background you will use this code:
#formVue .formContent {
background-color: #FF0085;
}
How do I change the headers colors 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 bellow:
#liveWrapper #liveContent .lobby-header h1 span {color: #FF4500 !important;}
The hex code #FF4500 can be replaced by any other hex code you'd like.
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 over the .formcard code the form font is highlighted:

Copy and paste the code to the Custom CSS box in the event details page.
Edit the font size and the colors to your preference.
