Last Updated: 10/9/18.

When creating an Invite Banner, the template builder will provide you a HTML code by default. Amazing! -- but what does that all mean? Read on to get a dissection of the code and learn how adjusting each element affects your banner. 

<div style="position: absolute;
top:0;
left:0;
width:728px;
height:90px;
background-image: url('URL HERE');
background-size: contain;">
<span style="position: absolute;
top: px;
left: px;
font-size: 26px;
color: rgb(237, 36, 128);
font-family: Helevetica, sans-serif;
font-weight: 400; -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
  white-space: nowrap;">@[email protected]</span></div>

Width and Height of Banner

width: 300px; 
height: 250px; 

Feathr highly recommends using our provided default banner sizes, however, if you would like to use a different size you can adjust the width and height of the banner by changing the pixel sizes in the code. Here is a reference guide to help you determine which Creative sizes Feathr will allow you to add to your Ad Campaign

IMPORTANT: If you change the width and height of your banner, you MUST update your template Metadata to reflect the custom size. 

Background Image URL

background-image: url('URL HERE');

To add an image to your banner, you must add the image URL here. 

Variable Spacing

<span style="position: absolute; 
top: px;
left: px; 

You can edit the spacing of your Partner variable to change where you want the text to show on your banner. 

  • top: px; : Changes the space added to the top of the variable. The higher the number the lower the variable will move on your banner. 
  • left: px; : Changes the space added to the left of the variable. The higher the number, the more to the right the variable will move on you banner.

Variable Font, Size, and Weight

font-size: 26px; 
color: rgb(237, 36, 128);
font-family: Helevetica, sans-serif;
font-weight: 400;

You can change how your Partner Variable will look by editing your font, font size, and weight. 

  • font-size: 26px; : Change the size of your font
  • font-family: Helevetica, sans-serif; : Change your text font. The first font will be the one that is displayed. The second font will be used as a backup for any sites, browsers, and inboxes that do not support the first font. Here is a list of the most recommended and commonly used font types for reference.
  • font-weight: 400; : Change the boldness of the text. The higher the number, the bolder your text will appear
  • color: rgb(237,36,128); : Although it is not a default element in the HTML provided in the template, you can add and use it to the code to change the color of your text. You can replace rgb with HEX (i.e. "color:#2A6BA1;"). HTML Color Codes is a good reference to find the HEX codes of your desired color. 

Adding Partner Variables

white-space: nowrap;">@[email protected]</span></div>

This is where you will include the variables that you'd like to see displayed on the banner. 

Note: If you would like to add more than one variable, add <BR> between the variables. <BR> signifies a line break in the code.

Common Questions

Help! My Partner Variables are not showing when I preview my banners on a Partner Dashboard.
If you are not seeing your Partner Variable when previewing your banner on a Partner Dashboard, it is possible that the variable is outside the size of your banner and is being cut off. You can either adjust the spacing of your variable or change the text font to fit into the banner. 

Related Links

How to Create a New Template
Create an Invite Banner with HTML

Did this answer your question?