QR Interaction CSS

How to change the text and button colors on your QR Interaction instructions page using CSS.

Introduction

Learn how to customize the colors of your QR Interaction (mini-site) text, buttons, and input fields using simple CSS within Snappic’s Live Editor.

Important Notes
Locating the Live Editor
Adding and Editing CSS
Example CSS Code
Changing Text and Button Colors
Related Articles

Important Notes

By default, all text and buttons on your QR Interaction instructions page are white. You can change this color (and other styling elements) by adding custom CSS in the Live Editor section of your event.

QR Interaction CSS Customization

Step 1: Locating the Live Editor

Go to your event’s QR Interaction Settings page.
Click Live Editor under the QR Interaction section.

This opens a built-in code editor where you can add custom styling to your QR Interaction page.

Step 2: Adding CSS

Copy the following CSS code and paste it into the CSS tab within the Live Editor.

Make sure to keep the opening and closing <style> tags intact.

<style>

/* Experience Buttons */

.btn {   
background-color: black !important;   
color: white !important;   
border: 5px solid white !important; 
}  

/* Individual Button Settings */

#phone_button {   
border: 1px solid white !important;   
color: white !important; 
}  

#email_button {   
border: 1px solid white !important;   
color: white !important; 
}  

/* Instruction Text */

.instruction-view {   
color: white !important;   
font-size: 15px !important; 
}  

/* Heading */

.heading {   
color: white !important;   
font-size: 30px !important; 
}  

/* Text Input Fields */

.text-input {   
border-color: red !important;   
color: red !important; 
} 

</style>