This guide provides a tidy, corrected version of Snappic’s Virtual Booth CSS theme plus setup tips. Paste it into Event → Virtual Booth → Custom CSS to instantly refresh your booth’s look and feel.
Table Of Contents
Overview
Important Notes
How to apply the CSS
Cleaned CSS (copy/paste)
What does this CSS change
Mobile tweaks included
Troubleshooting & revert
Live demo link
Important Notes
Designed for the New York microsite template; results may vary with others.
Edit CSS at your own risk—test on a staging event first.
Some selectors target SweetAlert2 classes (
.swal2-*) and core booth buttons (.btn). If you have other custom CSS, check for conflicts.You can always remove this CSS and refresh the event to revert.
Overview
This theme swaps in the Nunito typeface, modernizes buttons, tunes SweetAlert2 modals, adjusts avatar selectors, and adds responsive spacing for small screens.
How to apply the CSS
Open your event in the dashboard.
Go to Virtual Booth.
Open the Custom CSS (Live Editor) block.
Paste the Cleaned CSS below.
Save and refresh your booth.
Cleaned CSS (copy/paste)
/* === Virtual Booth Theme (Cleaned) === */
/* 1) Fonts first */
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,400;0,600;0,700;0,900;1,400&display=swap');
html { overflow-y: auto; }
/* General text */
span, .heading, .instruction-view, .swal2-content {
font-family: 'Nunito', sans-serif !important;
}
/* Headings */
.heading {
color: #ffffff;
font-size: 21px;
letter-spacing: 7px;
padding-left: 20px;
text-transform: uppercase;
}
/* SweetAlert2 */
.swal2-icon { display: none !important; }
.swal2-title {
font-family: 'Nunito', sans-serif !important;
color: #c6dedb !important;
font-size: 13pt;
letter-spacing: 14px;
padding-left: 16px !important;
text-transform: uppercase !important;
}
.swal2-content {
font-size: 12pt;
text-transform: uppercase;
letter-spacing: 4px;
color: #ffffff !important;
}
.swal2-popup { background: transparent !important; }
.swal2-container.swal2-shown { background-color: #000 !important; }
/* Buttons (primary) */
.btn, .swal2-confirm, .swal2-cancel {
font-family: 'Nunito', sans-serif;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 900;
font-size: 14px !important;
color: #52526d !important; /* text on white buttons */
background-color: #ffffff !important; /* default white look */
padding: 12px 35px;
line-height: 1.15;
letter-spacing: 5px;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
appearance: none;
border: none;
border-radius: 26px !important;
max-width: 100%;
width: auto;
height: 48px;
min-width: 190px;
}
.btn:hover, .swal2-confirm:hover, .swal2-cancel:hover {
background-color: rgba(255,255,255,.6) !important; /* fixed rgba typo */
}
/* Optional: Uncomment to switch primary buttons to orange brand color */
/*
.btn, .swal2-confirm, .swal2-cancel {
color: #ffffff !important;
background-color: #ffa02f !important;
border: 1px solid #2c2923 !important;
}
*/
/* Share buttons layout tweaks */
.share-button-container { display: block; text-align: center; }
.share-button { margin-right: 0 !important; }
.share-button.reject-button { margin-right: 10px !important; }
/* Avatar selectors */
.avatar-type-button,
.avatar-type-button[type=full-body],
.avatar-type-button[type=upper-body] {
height: 180px !important;
width: 180px !important;
display: block !important;
margin: 5px auto !important;
padding: 0 !important;
background-color: grey !important;
}
/* Content wrapper */
.template-preview-parent { border-radius: 10px; padding: 5px; }
.template-preview-large-container { margin-bottom: 30px; }
/* Main content card */
div#content {
background: rgba(38,44,54,0.6);
border-radius: 30px;
min-height: auto;
margin-top: 25px;
margin-bottom: 20px;
}
/* SweetAlert loading spinner color fix */
.swal2-actions.swal2-loading .swal2-styled.swal2-confirm {
box-sizing: border-box !important;
height: 2.5em !important;
margin: .46875em !important;
padding: 0 !important;
animation: swal2-rotate-loading 1.5s linear infinite !important;
border: .25em solid transparent !important;
border-radius: 100% !important;
border-left-color: #ffa02f !important;
border-right-color: #ffa02f !important;
background-color: transparent !important;
color: transparent !important;
cursor: default !important;
user-select: none !important;
min-width: 40px !important;
width: 40px !important;
}
/* Small copy */
.disclaimer_text { font-size: 8px; }
/* Layout polish */
.container-fluid > div:nth-child(2) { margin-top: 50px; }
/* Larger screens */
@media (min-width: 1025px) {
#avatar_next_button { margin-right: 15px; }
.heading { padding-top: 10px; vertical-align: middle !important; }
}
/* Tablet / desktop content width */
@media (min-width: 800px) {
div#content { padding: 25px 50px; min-width: 600px; max-width: 600px; }
.play-area { min-height: 400px; }
}
/* Phones */
@media (max-width: 800px) {
.experience-button { height: 100px; width: 100px; }
}
@media (max-width: 460px) {
#avatar_cancel_button { margin-right: 0 !important; margin-top: 10px; }
#green_retake_button { margin-right: 0 !important; }
.heading { font-size: 16px; letter-spacing: 7px; padding-left: 10px; }
.swal2-title { font-size: 16px; letter-spacing: 10px; padding-left: 10px; }
div#content { padding: 5px 25px 30px; }
.row { margin-top: 1px !important; }
.logo { margin-bottom: 1px; }
#approve_video.btn { margin-left: 0 !important; margin-top: 10px; }
.share-button { font-size: 12px; }
}
@media (max-width: 450px) {
.btn { min-width: 230px !important; }
.swal2-styled.swal2-confirm { min-width: 221px; }
.approve-buttons-left { margin-right: 0 !important; }
#load_stickers_button_sticker.btn { margin-left: 21px; }
button#load_props_button.btn { margin-top: 10px; }
.reject-button { margin-right: 0 !important; }
.approve-button { margin-top: 10px !important; }
#capture_button { margin-top: 10px; }
#gallery_button { margin-right: 0 !important; }
}
@media (max-width: 420px) {
div#content { padding: 25px 50px; max-width: 90%; min-width: 90%; }
}
What does this CSS change
Typography: Forces Nunito across headings, modals, and instructional copy.
Buttons: Rounded, bold, and tap‑friendly with hover feedback. Optional orange brand style included (commented).
Modals: Minimal SweetAlert2 look (no icon), translucent background.
Avatar selectors: Large, centered tiles for easy tapping.
Layout: Soft card background for the main content area.
Mobile tweaks included
Wider buttons and improved spacing under ≤450px.
Compact headings and modal titles under ≤460px.
Responsive content padding at small widths.
Troubleshooting & revert
Seeing odd colors or shapes? Check for other CSS that also targets
.btnor.swal2-*and remove duplicates.If something breaks, remove this CSS and refresh the event to revert to defaults.
Live demo link
You can preview this styling here:
Article sub content
Tip: Prefer the default white buttons? Keep the provided rules as-is. Want orange brand buttons? Uncomment the “Optional orange” block in the CSS.
Contact Support
Visit the Snappic Help Center
Chat directly from your Snappic Dashboard