Sample HTML Banner code

Where would this code be applied?

This code will be applied in Accounts > Layout > Banner HTML.  Also, be sure to check the "HTML banner" checkbox. 

What are my options if I don't know HTML?

If you are not familiar with HTML but would like to use the HTML banner, we recommend using a WYSIWYG tool.  This type of tool allows you to design HTML code visually and grab the code.  We recommend using, a free online tool that does just this.  This tool allows you to edit one of the Sample codes below or create a new one from scratch. 

Manual Scroll Banner

HTML Banner Code

<div class="w3-content">
<img class="mySlides" src="" style="width:100%">
<img class="mySlides" src="" alt="custom_html_banner3" style="width:100%">
<img class="mySlides" src="" alt="custom_html_banner4" style="width:100%">
<img class="mySlides" src="" style="width:100%">
<button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
<button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button>

HTML Footer Code

var slideIndex = 1;

function plusDivs(n) {
showDivs(slideIndex += n);

function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
x[slideIndex-1].style.display = "block";

CSS Code
.w3-btn,.w3-button{border:none;display:inline-block;outline:0;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
.w3-disabled,.w3-btn:disabled,.w3-button:disabled{cursor:not-allowed;opacity:0.3}.w3-disabled *,:disabled *{pointer-events:none}
.w3-bar-block .w3-dropdown-hover .w3-button,.w3-bar-block .w3-dropdown-click .w3-button{width:100%;text-align:left;padding:8px 16px}

.w3-content button {
position: absolute;
top: 32%;

.w3-display-right {right:0}
.w3-display-left {left:0}

Moving Text

<div align="center"><marquee behavior="alternate" bgcolor="#bb3434" direction="left" height:="" loop="7" scrollamount="1" scrolldelay="2" width="100%"><span style="color:#FFFFFF;"><span style="font-size: 20px;">Latest news! Latest news! Latest news! Latest news!</span><span style="font-size: 12px;">. </span></span></marquee></div>

Image with Text and Text Links

<div class="vc_row element-row row vc_custom_1478727859541">
<div class="wpb_column vc_column_container vc_col-sm-12">
<div class="wpb_wrapper">
<div class="fw-section hb-fw-599b22a654ae9 without-border no-overlay light-style" style="background-color:#000000;background-image:url(;padding-top:40px;padding-bottom:100px;">
<div class="row fw-content-wrap">
<div class="col-12 nbm">
<div id="learning-automated-div" style="text-align: center; font-size: 48px; line-height: 52px; padding: 100px 5px 10px 5px;"><span style="color:#FFFFFF;">WELCOME!</span></div>

<div style="text-align: center; font-size: 18px; line-height: 22px; padding: 0 5px 40px 5px;"><span style="color:#FFFFFF;">Click below to navigate to:</span></div>

<div style="text-align: center;">
<table border="0" cellpadding="1" cellspacing="1" style="width:100%;">
<td><a href=""><span style="color:#FFFF00;"><span style="font-size:28px;">Course Library</span></span></a></td>
<td><a href=""><span style="color:#FFFF00;"><span style="font-size:28px;">Achievements</span></span></a></td>

<div class="video-overlay no-overlay">&nbsp;</div>

Static Banner with Link


<div class="banner" style="padding:15px; text-align:center;">
<div class="banner-content">
<p>Admodum deserunt intellegam in duo, novum nonumy populo est at, qui an reque ignota constituto. Utinam aperiri equidem te vis. Cu ius velit populo impetus. Et qui ullum nusquam contentiones</p>
<a href="" class="btn btn-primary">CLICK</a>


Have more questions? Submit a request


Please sign in to leave a comment.