If you want to customize your virtual booth experience, you can do so by using CSS.

Just follow the steps below which will show you where to add your CSS for the virtual event, then you can go through our list of CSS options that you might find come in handy to impress your guests!

How to add CSS to your event.

Step 1: Open your event, scroll down to the virtual booth section and click "Edit".

Step 2: Paste the specific code (see further down in the article) in the "Custom CSS" block and click "Save Changes".

We have provided a list below of custom CSS you can add to your event.

Please note, we have put default colors in the CSS so make sure you replace these with the color you require.

If you need a list of colors that can be used then just follow this link and give any of the colors a try.

1. Experience buttons (changes the color of Still, GIF, and Burst buttons):

<style>

.experience-button

{

color: red;

font-size: 15px;

font-weight: bold;

border-color: black;

background: transparent;

}

</style>

2. Back-button (change the color):

<style>

.back-button

{

color: red;

border-color: black;

background: transparent;

}

</style>

3. Changing the color of the ‘next’, ‘upload’, ‘capture’, ‘approve’ and ‘experience buttons’:

<style>

.btn

{

color: red;

font-size:16px;

border:black 1px solid;

background: transparent;

}

</style>

4.Remove experience buttons:

4.1. Remove STILL

<style>

#experienceContainerId :nth-child(1)

{

display: none;

}

</style>

4.2. Remove GIF

<style>

#experienceContainerId :nth-child(2)

{

display: none;

}

</style>

4.3 Remove BURST

<style>

#experienceContainerId :nth-child(3)

{

display: none;

}

</style>

When using the above script, it will remove the experience from the below screen:

5. Instructions text (change the color):

<style>

.instruction-view

{

color: yellow !important;

}

</style>

6. Headings - ‘create avatar’ & ‘Pick your experience’ (change the color):

<style>

.heading

{

color: orange;

}

</style>

**OR**

<style>

​.h2, h2

{

color: orange!important;

}

.instruction-view {

color: yellow !important;

}

</style>

7. Avatar booth button ( change color):

<style>

#avatar_booth_button

{

color: #76D7C4!important;

}

</style>

8. Avatar booth button (remove avatar button):

<style>

#avatar_booth_button

{

display: none !important;

}

</style>

*This will remove the avatar button (as seen in above image).

9. Green-screen background thumbnail resize:

**(Increases the thumbnail size of the green-screen options)**

<style>

.greenscreen-preview

{

max-height: 120px !important;

}

</style>

10. Remove sharing buttons:

** You can now hide the share buttons and keep them hidden so that guests won’t get the option to share their images, but it will still upload. **

<style>

button.btn.share-button[share-type=email]
{
display:none;
}

</style>

11. Hide Logo on Virtual Booth but have it show on the Microsite:

<style>

.logo
{
display: none !important;
}

</style>


*******************

The below example can be applied to the "New York" Microsite template to give you the same styling that we used to showcase the Snappic Virtual booth.


Simply copy the below CSS and paste it in the Custom CSS box

<style>

.container-fluid>div:nth-child(2)
{
margin-top:50px;
}

.btn{
background: linear-gradient(180deg, #990062 0%, #B9092A 99.99%, #B9092A 100%);
border: 2px solid #FFFFFF;
box-sizing: border-box;
border-radius: 14px;
}

.template-preview-large-container {
margin-bottom: 30px;
}

div#content
{
background: #4846468f;
border-radius:50px;
min-height: auto;
margin-bottom: 20px;
}

.experience-button {
box-shadow: none !important;
-webkit-box-shadow: none !important;
}

@media (min-width: 800px)
{
div#content
{
padding: 25px 50px;
min-width: 600px;
max-width: 600px;
}

.play-area {
min-height: 400px;
}

}

@media (max-width: 420px)
{
div#content
{a
padding: 25px 50px;
max-width: 90%;
min-width: 90%;
}
}
</style>

Did this answer your question?