Customize your Virtual Booth with CSS to match any brand or theme. Add your styles in the Live Editor to instantly preview changes, then save to update your event.

Important Notes
Custom CSS List
How to Add CSS to Your Event
CSS Examples
Full Theme Example (New York Template)

Important Notes

Replace the example colors with your own brand colors.
Use the Live Editor in the Virtual Booth section to preview changes before saving.
Some selectors are template‑specific and may vary by layout.
Keep accessibility in mind (contrast and font sizes) for readability on mobile.

Custom CSS List

How to Add CSS to Your Event

Open your event in the Snappic Dashboard.
Scroll to Virtual Booth and click Edit.
Paste your CSS into the Live Editor to preview immediately.
Click Save when you’re happy with the styling.

CSS Examples

Experience buttons (color, size, weight)

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

Back button (color)

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

Primary buttons (next/upload/capture/approve/experience)

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

Remove experience buttons

Remove Still (first), GIF (second), Burst (third) from the chooser:
/* Remove Still */
#experienceContainerId :nth-child(1) { display: none; }
/* Remove GIF */
#experienceContainerId :nth-child(2) { display: none; }
/* Remove Burst */
#experienceContainerId :nth-child(3) { display: none; }

Instruction text

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

Headings (e.g., “Create avatar”, “Pick your experience”)

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

Avatar booth button

Change color or hide entirely:

/* Color */
#avatar_booth_button { 
color: #76D7C4 !important; 
}

/* Hide */
#avatar_booth_button { 
display: none !important; 
}

Green‑screen background thumbnail size

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

Hide specific sharing buttons (example: email)

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

Hide the logo on Virtual Booth (keep on Microsite)

.logo { 
display: none !important; 
}

Skip Sharing button (color)

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

Full Theme Example (New York Template)

Copy into the Live Editor to reproduce the showcased Virtual Booth styling for the “New York” microsite template. Adjust values as needed.

.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; /* likely typo from original; replace with padding if needed */
 max-width: 90%;
 min-width: 90%;
 }
}