Custom CSS for Attendee Center

Updated 1 month ago ​by Peter Grant

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:

  • My Account
  • My Agenda
  • My Tickets
  • My Forms
  • My App
  • Virtual Lobby
  • Registration Form
  • Custom Form
  • Purchase Form

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

My Account

#myAccountWrapper

My Agenda

#myAgendaWrapper

My Tickets

#ticketManagerWrapper

My Forms

#myFormsWrapper

My App

#appContent

Virtual Lobby

#liveWrapper

Registration Form

#formVue

Custom Form

#customFormVue

Purchase Form

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

1. Insert a background image

For this example we will add an image to the registration form background.

Go to the Custom CSS tool and enter the root.

The root for the registration form is #formVue

press the space bar

Then copy and paste this code:

.formContent {

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

background-size: contain;

}

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:

#formVue .formContent {

background-image: url("https://media.giphy.com/media/6wpHEQNjkd74Q/giphy.gif");

background-size: 1400px 1200px;

}

The Custom CSS box should now look like this:

Click on the blue SAVE button and then go to MARKETING > REGISTRATION > REGISTRATION FORM > PREVIEW to see your new background image.

Add backgrounds 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;

}

Virtual Lobby

#liveWrapper #liveContent {

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

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;

}

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

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