Custom branding using CSS

Custom branding is essential in conveying your brand image and message to your audience. With InEvent's Virtual Lobby Editor, you can customize your Virtual Lobby to represent your unique brand image.

InEvent's Virtual Lobby Editor provides a wide range of visual customization that you can configure to suit your custom branding needs.

To learn how to use the Virtual Lobby Editor, refer to this article if you are using the Neo layout. If you are using the Classic layout, refer to this article instead.

In addition to the Virtual Lobby Editor, you can also perform more advanced customization to your event by using the CSS editor tool.

The use of custom CSS codes requires specific technical knowledge, so this feature is best used by experts familiar with CSS.

This article will guide you on how to use the CSS editor.

How do I enable the CSS editor?

Before using the CSS tool, ensure that you have the White label feature enabled. To do so, follow the instructions below:

  1. Navigate to Settings > Tools from the Event level.
  2. Locate White label under the Start section.
  3. Click Edit on the top right corner of the page.
  4. Check the White label box.
  5. Press End to save your changes.
whitelabel tool
Also ensure that White label is enabled in the Company Tools.

Once you have enabled White label, you will be able to customize several aspects of your event using the Source code button that appears in the following locations on the platform:

  • Event > Details: Here, you can customize your event and its related pages (Virtual Lobby, Registration form, Website, etc.) at the Event level using custom CSS codes.
  • Event > Virtual Lobby > Layout: Here, you can customize your Video Player layout at the Event level using custom CSS codes.
  • Company > Details: Here, you can customize your events and related pages at the Company level using custom CSS codes. In addition to event pages, you will also be able to customize your Booking forms from this location.

How do I use the CSS editor at the Event level?

To use the CSS editor from the Event level, complete the following steps:

  1. Navigate to Event > Details.
  2. Locate the Source code button under Custom CSS.
  3. Click Edit on the top right corner of the page.
where to add custom CSS
  1. Click the Source code button. A pop-up box will appear, which contains:
  • Cheat sheet table containing a list of pages to which you can apply custom CSS codes and their respective root tags
  • Custom CSS text box to enter your custom CSS codes
  1. Enter your custom CSS codes in the Custom CSS text box.
  2. Press Done to apply your changes.
Custom css editor modal
The underlying HTML and CSS may change from time to time. When customizing and uploading custom rules, you understand and accept these terms.

Which web pages can I edit using the CSS editor at the Event level?

A list of pages that can be edited or modified using custom CSS codes as well as their respective root tags can be found in the following table:

This list of pages and root tags is also available in the CSS editor.

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

Purchase

#purchaseVue

When editing a page element, root tags must precede all code components.

How do I use the CSS editor at the Company level?

To use the CSS editor from the Company level, complete the following steps:

  1. Navigate to Company > Details.
  2. Locate the Source code button under Custom CSS.
  3. Click Edit on the top right corner of the page.
adding custom CSS at the company level
  1. Click the Source code button. A pop-up box will appear, which contains:
  • Cheat sheet table containing a list of pages to which you can apply custom CSS codes and their respective root tags
  • Custom CSS text box to enter your custom CSS codes
  1. Enter your custom CSS codes in the Custom CSS text box.
  2. Press Done to apply your changes.
custom CSS editor modal

Which web pages can I edit using the CSS editor at the Company level?

In addition to all the pages you can customize at the Event level, you can also customize your Booking form attributes from the Company level CSS editor.

Any changes made using the CSS editor at the Company level will affect all events created within the company.

How do I use the Video Player CSS editor?

Other than customizing the Virtual Lobby and other pages, you can also customize the appearance of your Video Player using custom CSS codes. Below are the instructions on how to use the Video Player CSS editor:

  1. Navigate to Event > Virtual Lobby from the Event level.
  2. Navigate to Layout under Design.
  3. Locate the Source code button under Video Player CSS.
  4. Click Edit.
video player css editor
  1. Click the Source code button. A pop-up box will appear, which contains the Cheat sheet table and the Custom css text box.
  2. Enter your custom CSS codes in the Custom CSS text box.
  3. Press Done to apply your changes.
custom CSS editor Modal

Which elements can I edit using the Video Player CSS Editor?

In this section, you will find a list of video player elements that can be edited or modified using custom CSS together with the root tags.

Player

Root

Live Stream

#liveStreamPlayerWrapper

Simulated Live

#simuliveStreamPlayerWrapper

On Demand (Pre-recorded)

#onDemandPlayer

Most frequently requested CSS codes

Most frequently requested custom CSS codes to customize the Virtual Lobby can be found here.

Customizing other page items or elements

To customize other page items or elements, refer to the following instructions:

  1. Navigate to the desired page.
  2. Locate the item or element you want to customize.
  3. Right click on the item you wish to customize. A context menu will appear.
  4. Click Inspect. Your browser's Developer Tools will appear.
  5. Locate the properties of the item you want to customize under Styles.
browser developer tools
  1. Replace the item properties as desired.
example applying custom CSS


How Did We Do?