In order to change the color of the text (and buttons) on the QR interaction instructions page (mini-site), you will need to copy and paste the below text into the "Live Editor" which can be found under the "QR Interaction" section.
QR Interaction landing page
The text and button color is set to white by default.
Step 1: Locating Live Editor
On the QR interaction Settings page select Live Editor
Step 2: Adding CSS
Copy the below code and paste it into the CSS tab (be sure not to remove the opening and closing tags <style> and </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 View:
.instruction-view
{
color: white !important;
font-size: 15px !important;
}
Heading:
.heading
{
color: white !important;
font-size: 30px !important;
}
Text Input:
.text-input
{
border-color: red !important;
color: red !important;
}
Step 3: Change the color
Once you have copied and pasted the above code into the CSS Live Editor then you can change the color. Basically, change the word "white" to the color you want or use a hex code to be more specific.
The example below shows how the color was changed to black.
