If you have multiple visitor types, you’ll configure this setting per visitor type.
These instructions only work if you’re using Envoy badges or Brother DK-1202 model badges. Please check the back of your badges to ensure you see 202 beside the black box.
Enabling custom CSS
Go to Visitors > Settings > Sign-in flow page.
Select the visitor type you wish to edit.
Select Badge from the top navigation.
Locate Badge CSS and click “Enable.”
5. Locate the CSS rules with line numbers on the left side of the text area. Refer to these line numbers when copying and pasting the modifications that follow.
If you see the “Reset to default” link, click it now to reset all CSS code to the Envoy default.
6. Make edits to the CSS based on the guides below. Note that as you make changes, they’ll appear live in the badge preview.
7. Once you like the preview, click “Save.”
Common badge design changes
Below, you’ll find instructions for a few of the most common design requests we receive. All of these changes are easy to make with tweaks to the badge CSS.
Change the badge font
You can print your badges in any iOS supported font.
Choose a font from the supported list found here.
Locate line 24.
Replace Cera Pro with your preferred font name. Here, we’ve changed it to Georgia-Bold.
Make the visitor photo larger
You can resize the visitor photo to be larger or smaller than the default.
Locate line 89 in your CSS area.
Copy and paste the code below to replace line 83 through line 99.
.photo img {
width: 400px;
border-radius: 50%;
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
.visitor-info {
width: 100%;
text-align: center;
}
.photo + .visitor-info {
width: 600px;
text-align: left;
float: right;
}
To make further adjustments, locate width: 230px on line 90 and width: 770px on line 102. You can edit these numbers to meet your needs. Note that these two numbers must add up to 1000px.
Make the visitor photos square
You can change the visitor photos to appear square instead of round. Choose hard corners or rounded corners.
Decide if you’d like hard corners or round corners.
Locate line 91 in your CSS area.
For squares with hard corners: copy and paste this code to replace line 91 to
border-radius: 0%;.For squares with round corners: copy and paste this code to replace line 91 to
border-radius: 20%;.
Change the size of the visitor name
You can resize the visitor name to be larger or smaller than the default.
Locate line 116. If your visitor has a short name, first and last name fit on one line on the badge. This CSS line controls the size of this text.
Modify line 116 as needed:
Numbers larger than 100px will make the text larger.
Numbers smaller than 100px will make the text smaller.
Locate line 108. If your visitor has a long name, the last name will wrap down to the next line on the badge. This CSS line controls the wrapped line of text.
Modify line 108 as needed:
Numbers larger than 74px will make the text larger.
Numbers smaller than 74px will make the text smaller.
Make the visitor information text larger or smaller
Make the display for your Custom Field 1, Custom Field 2, Time of Entry, and Custom Message larger or smaller.
Locate line 25 in your CSS area.
Modify line 25 as needed:
Numbers larger than 40px will make the text larger.
Numbers smaller than 40px will make the text smaller.
Move visitor information down
Move the visitor information further away from the logo at the top.
Locate line 78 in your CSS area.
Modify line 78 as needed:
Numbers larger than 50% will move the visitor information down.
Numbers smaller than 50% move the visitor information up.
Remove the “NO NDA” Badge Icon
If your location utilizes legal docs, particularly optional Non-Disclosure Agreements, the badge will indicate an NDA was not signed with a circular “NO NDA” icon. The following steps will utilize CSS to hide the “NO NDA” icon.
Locate and select the “
did-not-sign” style in your CSS area, this is typically line 165.Copy and paste the code below over the entire style block of “.did-not-sign”, this typically represents line 165 to line 180.
.did-not-sign {
display: none;
position: absolute;
bottom: 80px;
right: 0;
width: 150px;
height: 150px;
background: #000;
border-radius: 50%;
color: #fff;
font-weight: bold;
text-align: center;
padding-top: 25px;
line-height: 50px;
font-size: 50px;
z-index: 1000000;
}
Support
We will offer support that is within our scope, Customizing the CSS technical, and we strongly recommend that you work with a web developer or designer for the best results.