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.

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

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.

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.

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.

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:

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.

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.

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.

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.

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.

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.

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.

1. Replace the item properties as desired.