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.

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

Paste the specific code (see further down in the article) in the "Live Editor" This will show you how it will look as soon as you add the code.

Custom CSS

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.

Experience buttons color

.experience-button 
{
    color: red;
    font-size: 15px;
    font-weight: bold;
    border-color: black;
    background: transparent;
}

Back button (change the color):

.back-button {
color: red;
border-color: black;
background: transparent;
}

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

.btn{
color: red;
font-size:16px;
border:black 1px solid;
background: transparent;
}

Remove experience buttons

Remove Still

#experienceContainerId :nth-child(1)
{
    display: none;
}

Remove GIF

#experienceContainerId :nth-child(2)
{
    display: none;
}

Remove Burst

#experienceContainerId :nth-child(3)
{
    display: none;
}

Instructions text (change the color):

.instruction-view 
{
color: yellow !important;
}

Headings - ‘Create avatar’ & ‘Pick your experience’ (change the color):

.heading 
{
color: orange;
}

.h2, h2 {
     color: orange!important;
}

.instruction-view{
color: yellow !important;
}

Avatar

booth button ( change color):

#avatar_booth_button{
color: #76D7C4!important;
}

Avatar booth button (remove avatar button):

#avatar_booth_button{
display: none !important;
}

Green-screen background thumbnail resize:

*Increases the thumbnail size of the green-screen options

.greenscreen-preview
{
    max-height: 120px !important;
}

*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, in this case, we will need to add an email as a sharing option and add the CSS in order to hide Sharing options.

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

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

.logo{
display: none !important;
}

Skip Sharing button (Color change):

.skip-share-button {
color: #0051a5 !important;
}

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 into the Live Editor

.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{
apadding: 25px 50px;max-width: 90%;min-width: 90%;
}
}