Advanced Branding: Custom Headers, Fonts, and CSS Stylesheets

To further enhance your branding, you can add custom HTML and CSS in specific areas of your AdvocateHub, along with some other features. In this article, we will take a closer look at the features that make up our Advanced Branding. You will find all the areas below on the Branding page: Settings > Advocate Program > Branding.

Custom Header

If you’d like to insert a custom header at the top of your hub, above the AdvocateHub header, and you have Advanced Branding as part of your contract, you can do so using custom HTML and CSS. The area where you can insert the custom header is shown below:

Example: Header with links

We will run through a quick sample of creating a simple header with links, like you see below. The example will show you how to add the links labeled, "Facebook, Twitter, Instagram, Development Center".

HTML Code

<div id="header-content">
 <ul id="menu-bar">
  <li><a href="http://facebook.com">Facebook</a></li>
  <li><a href="http://twitter.com">Twitter</a></li>
  <li><a href="http://instagram.com">Instagram</a></li>
  <li><a href="http://dev-center.com">Development Center</a></li>
 </ul>
</div>

CSS Code

#header-content {
  background-color: {{primary_color}};
  
  #menu-bar {
    display: flex;
    justify-content: space-evenly;
    max-width: 1024px;
    margin: auto;

    a {
      color: #ffffff;
    }
  
    a:hover {
      text-decoration: none;
    }
  }
}

Custom Banner

If you’d like to go beyond the basic banner method offered in the Basic Branding options, and you have Advanced Branding as part of your contract, you can do so using custom HTML and CSS. The area where you can insert the custom banner is shown below:

Example: Banner with a full-width background image

We will run through a quick sample of creating a full-width banner with an overlaid logo, like you see below:

HTML Code

<div id="logo-wrap">
   <div id="logo-bar">
      {{logo}}
   </div>
</div>

CSS Code

#logo-wrap {
  background: url(https://i.imgur.com/AaMlZXK.png);
  background-size: cover;
}
#logo-bar {
  height: 200px !important;
  img {
    margin: 55px 0 0 25px;
    display: block;
  }
}

Custom Footer

If you’d like to insert a custom footer at the bottom of your hub, and you have Advanced Branding as part of your contract, you can do so using custom HTML and CSS. The area where you can insert the custom footer is shown below:

Example: Custom Footer with company details

HTML Code

<div id="footer-content">
  <div id="contact-info">
    <ul>
      <h4>Contact Us</h4>
      <li>1-888-684-0758</li>
      <li>111 Peter Street, 3rd Floor</li>
      <li>Toronto ON M5V 2H1</li>
    </ul>
  </div>
</div>

CSS Code

#footer-content {
  background-color: {{primary_color}};


  #contact-info {
    color: #ffffff;
    display: flex;
    max-width: 1024px;
    margin: 0 auto;
    padding: 20px 0 40px 0;
    text-align: center;

    ul {
      margin: 0 auto;
    }    

    li {
      list-style-type: none;
    }
  }
}

Custom JavaScript

You have the opportunity to add custom JavaScript to your hub. This can be useful if you want to add things like additional tracking or analytics.

Influitive Branding

You have the ability to remove the "Powered by Influitive" footer that appears on all pages of AdvocateHub.

Animated Loading Icon

You can change the loading icon which displays while content loads. It is set to the Influitive logo by default, but you can upload your own. This should be an animated .gif file, with a transparent background, that is 128px by 128px or 64px by 64px.

Custom Font

You can use a custom font for your hub by entering your font name and the URL where it is hosted.

Custom CSS

You can add custom CSS to your hub by specifying a URL containing your custom CSS code. The CSS file will be included on all advocate-facing pages in the application

Branded Keywords

Starting April 2020, Influitive will support changes to a number of default keywords to suit their programs. You will be able to change the following keywords in the AdvocateHub:

• Challenges
• Advocates
• Referrals
• Leaderboard
• Rewards
• Daily Bonus

This feature is not visible from the UI. However, if you're interested in this feature, please contact your CSM