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
Please note that the underlying HTML and CSS may change from time to time. When customizing and uploading custom rules, you understand and accept these terms.

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

Website

#websiteContent

My account

#myAccountWrapper

My agenda

#myAgendaWrapper

Networking

#networkingWrapper

My tickets

#ticketManagerWrapper

My forms

#myFormsWrapper

My app

#appContent

Virtual Lobby

#liveWrapper

Registration form

#formVue

Custom form

#customFormVue

Purchase

#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?

To customize the Virtual Lobby background, you don't necessarily need to use CSS, you can simply go to Event > Virtual Lobby > and scroll down until you see 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.

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

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:

  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.

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.

This code works for both layouts: Classic and Neo.

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

The use of javascript in the customization of the platform is not allowed.


How Did We Do?