We wanted to show you how flexible it is to change the look and feel of your virtual booth, so the team worked on some tweaks to the CSS which you can use on your own virtual booths. Simply copy the CSS below.
This CSS works best with the "New York" microsite template, but please note that any changes to this CSS are done at your own risk. If you are not experienced with CSS, then simply copy and paste this into the CSS block under the Virtual Booth section without making any changes to the CSS.
Here is a link to view this CSS styling live
Start by copying everything below in bold and paste it into the Live Editor under the Virtual Booth section on your event.
html { overflow-y: auto; }
.share-button-container {
display: block;
text-align: center;
}
@media(max-width: 450px) {
.btn {
min-width: 230px !important;
}
.swal2-styled.swal2-confirm {
min-width: 221px;
}
.approve-buttons-left {
margin-right: 0px !important;
}
#load_stickers_button_sticker.btn {
margin-left: 21px;
}
button#load_props_button.btn {
margin-top:10px;
}
.reject-button {
margin-right: 0px !important;
}
.approve-button {
margin-top: 10px !important;
}
}
.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;
}
div#content {
margin-top: 25px;
}
.share-button {
margin-right: 0px !important;
}
.avatar-type-button {
height: 180px;
width: 180px;
display: block;
margin: 5px auto;
padding: 0;
background-color: grey !important;
}
.swal2-icon {
display: none !important;
}
.template-preview-parent {
border-radius: 10px;
padding: 5px;
}
.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;
}
@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');
.heading {
font-family: 'Nunito', sans-serif !important;
color: #fffff;
font-size: 21px;
letter-spacing: 7px;
padding-left: 20px;
text-transform: uppercase;
}
.instruction-view, .swal2-content {
font-family: 'Nunito', sans-serif !important;
font-size: 12pt;
text-transform: uppercase;
letter-spacing: 4px;
color: white !important;
}
.swal2-popup {
background: transparent !important;
}
.swal2-container.swal2-shown {
background-color: black !important;
}
.btn, .swal2-confirm, .swal2-cancel {
font-family: 'Nunito', sans-serif;
display: inline-flex;
align-items: center;
font-weight: 900;
justify-content: center;
font-size: 14px !important;
color: #52526d !important;
background-color: white !important;
padding: 12px 35px;
line-height: 1.15;
letter-spacing: 5px;
border: none;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: 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: gba(255,255,255,.6) !important;
font-family: 'Nunito', sans-serif !important;
}
.swal2-actions.swal2-loading .swal2-styled.swal2-confirm {
box-sizing: border-box !important;
height: 2.5em !important;
margin: .46875em !important;
padding: 0 !important;
-webkit-animation: swal2-rotate-loading 1.5s linear 0s infinite normal !important;
animation: swal2-rotate-loading 1.5s linear 0s infinite normal !important;
border: .25em solid transparent !important;
border-radius: 100% !important;
border-color: transparent !important;
background-color: transparent !important;
color: transparent !important;
cursor: default !important;
-ms-user-select: none !important;
user-select: none !important;
border-left-color:#ffa02f !important;
border-right-color: #ffa02f !important;
min-width: 40px !important;
width: 40px !important;
}
@media only screen and (min-width: 1025px) {
.share-button.reject-button {
margin-right: 10px !important;
}
#avatar_next_button {
margin-right: 15px;
}
.heading {
padding-top: 10px;
vertical-align: middle !important;
}
}
span{
font-family: 'Nunito', sans-serif;
}
.disclaimer_text {
font-size:8px;
}
.container-fluid>div:nth-child(2)
{
margin-top:50px;
}
.btn {
background-color: #ffa02f;
background: #ffa02f
border: 1px solid #2c2923;
box-sizing: border-box;
border-radius: 3px;
}
.template-preview-large-container {
margin-bottom: 30px;
}
div#content {
background: rgba(38,44,54,0.6);
border-radius:30px;
min-height: auto;
margin-bottom: 20px;
}
@media(max-width: 450px) {
#capture_button {
margin-top:10px;
}
#gallery_button {
margin-right: 0px !important;
}
}
@media (max-width: 800px) {
.experience-button {
height: 100px;
width: 100px;
}
}
@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 {
padding: 25px 50px;
max-width: 90%;
min-width: 90%;
}
}
@media (max-width: 460px) {
#avatar_cancel_button {
margin-right: 0px !important;
margin-top: 10px;
}
#green_retake_button {
margin-right: 0px !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: 0px !important;
margin-top: 10px;
}
.share-button {
font-size: 12px;
}
}