Advanced Branding: Custom Headers, Fonts, and CSS Stylesheets

Note: These features may not be available in your pricing tier, please contact your Advocacy Coach for more information.

To further enhance your branding you now have the power to edit the HTML & CSS of the header in your AdvocateHub along with some other features. In this article we will take a closer look at all 5 of the areas that make up our Advanced Branding. You will find all the areas below on the Branding page, under the Advanced Branding section, Settings > Advocate Program > Branding.


Header HTML & CSS

If you'd like to go beyond the basic logo/banner method offered in the Basic Branding options, and you have Advanced Branding as part of your contract, you can make use of the custom Header HTML and Header CSS options.

You will need someone adept in CSS/HTML to create, maintain, and support this custom work.

Using custom HTML/CSS you can edit only the header section - this is the area between the top bar containing you notifications and avatar and the bottom bar containing the tabs 'Challenges', 'Discussions' etc. The area bordered by the red below:

In this area you can change the position of your logos, add animation loops for you background, add buttons/links etc.

Example: Header with a static image

We will run through a quick example of creating a sleek header like you see below:

Firstly, select the image you would like to use. We recommend a PNG image for higher quality. The dimensions of the image should be 100px height and 1024px wide.

Once again, it is recommended that you acquire the help of a web developer or somebody with knowledge of HTML & CSS.

HTML Code

<div id="logo-wrap">
   <div id="logo-bar">
      <img src=”http://www.example.com/mylogo.png" alt="Logo">
   </div>
</div>

CSS Code

#logo-wrap {
  background: url(http://www.example.com/mybackground.png);
  background-size: cover;
}
#logo-bar {
  height: 200px !important;
  img {
    margin: 0 auto;
    display: block;
    width: 60%;
    margin-top: 30px;
  }
}

Example of a header with an looped video

Select a looped video from shutterstock or build your own.

Recommended Dimensions: 180 px height, 1024 px wide.

HTML Code

<div id="vid-container">
  <video autoplay loop muted>
    <source src="http://www.example.com/myvideo.webm" type="video/webm">
  </video>
</div>
<div id="logo-bar">
  <img src=”http://www.example.com/mylogo.png”>
</div>

CSS Code

#vid-container {
  height: 180px;
  overflow: hidden;
  z-index: 998;
  position: absolute;
  top: 0;
  video {
    width: 100vw;
  }	
}

#logo-bar {
   z-index: 999;
   height: 160px;
   img {
     width: 400px;
     margin-top: 25px;		
   }
}

The CSS code above can be tweaked to suit your preferences in terms of positioning, height etc.

We suggest using a .webm file for higher quality but any video file should work. It is important to note there are different ways to achieve what you are looking for. For example you could add a .gif file type in the CSS like:

background-image: url( https://media.giphy.com/media/3oz8xNAOOP8b8TZCxy/giphy.gif);

Custom JavaScript

You have the opportunity to add JavaScript to your hub. This can be useful if you want to add things like additional tracking/analytics or capturing behaviour on your AdvocateHub. Again, we highly recommend you have an experienced developer at hand to do this work for you.

Using JavaScript to embed things, add pop-ups or other such things is extremely risky and not recommended. For example if we release an update to the AdvocateHub then your JavaScript may have adverse results causing anything from JavaScript not functioning to completely crashing your AdvocateHub in an extreme case - we do not provide support under such circumstances.

Only Influitive can add this JavaScript to your hub for you so, contact support@influitive.com if you would like to take advantage of this


Influitive Branding

You have the ability to remove the "Powered by Influitive" footer that appears on pages in the hub by simply unchecking the 'Show Powered By Influitive In The Footer' box.


Animated Loading Icon

You can change the loading icon which displays while pages load in the hub. It is set to the Influitive logo by default but you can upload your own animated gif here. This should be a 128px x 128px transparent .gif file.


Custom Font

You can upload any font you like. In this area you can enter your font name and provide us with the URL where it is hosted.

Note: The font will be applied across your hub but will not be applied to call to action buttons, for example the buttons on a challenge (see below). It will also not be applied to the feed, the sign-in/sign-up pages nor any of your emails sent from the hub.

Still need help? Contact Us Contact Us