Skip to main content
QR Interaction CSS

How to change the text color for your QR interaction instructions page using CSS

Nicholas avatar
Written by Nicholas
Updated over a week ago

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.

Did this answer your question?