Common CSS customizations

This article outlines how to further customize your badge display and layout with custom CSS.

Updated over a week ago

This feature is only recommended to those who are familiar with CSS already. Envoy Support is not responsible for fixing any errors created by admins.

  1. You’ll configure this setting per visitor type if you have multiple visitor types.

  2. 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

  1. Select the visitor type you wish to edit.

  2. Select Badge from the top navigation.

  3. Locate Badge CSS and click “Enable.” 

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.

  1. Choose a font from the supported list found here.

  2. Locate font-family

  3. 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. 

  1. Locate .photo img { in your CSS area.

  2. Copy and paste the code below to replace the .photo img {} section

.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.

  1. Decide if you’d like hard corners or round corners.

  2. Locate border-radius: 50%; in your CSS area, under .photo img {

    1. For squares with hard corners: change border-radius to 0%

    2. For squares with round corners: border-radius to 20%

Change the size of the visitor name

You can resize the visitor name to be larger or smaller than the default. 

  1. Locate .name:first-line {

    If your visitor has a short name, first and last name fit on one line on the badge. font-size: controls the size of this text.

  2. Modify line font-size: as needed:

    1. Numbers larger than 100px will make the text larger.

    2. Numbers smaller than 100px will make the text smaller.

  3. Locate word-wrap: under .name {. 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.

  4. Locate .name { font-size: 74px;

    1. Numbers larger than 74px will make the text larger.

    2. 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. 

  1. Locate font-size: 40px; under body { in your CSS area.

  2. Modify font-size: as needed:

    1. Numbers larger than 40px will make the text larger.

    2. 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. 

  1. Locate top: 50%; under .content {

  2. Modify top: as needed:

    1. Numbers larger than 50% will move the visitor information down.

    2. Numbers smaller than 50% will 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.

  1. Locate and select the did-not-sign style in your CSS area.

  2. Copy and paste the code below over the entire style block of .did-not-sign.

.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.

Did this answer your question?