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 http://bestonlinehtmleditor.com/, 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="https://image.ibb.co/ewBqNF/custom_html_banner1.jpg" style="width:100%">
<img class="mySlides" src="https://image.ibb.co/fzVmev/custom_html_banner3.jpg" alt="custom_html_banner3" style="width:100%">
<img class="mySlides" src="https://image.ibb.co/e4rL6a/custom_html_banner4.jpg" alt="custom_html_banner4" style="width:100%">
<img class="mySlides" src="https://image.ibb.co/cFrgev/custom_html_banner2.jpg" style="width:100%">
<button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">❮</button>
<button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">❯</button>
</div>
HTML Footer Code
<script>
var slideIndex = 1;
showDivs(slideIndex);
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";
}
</script>
CSS Code
.w3-content{position:relative;margin-top:0em;}
.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-btn,.w3-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.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-button:hover{color:#000!important;background-color:#ccc!important}
.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(https://www.litmos.com/wp-content/uploads/2017/04/learning-automation-lms-training.jpg);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%;">
<tbody>
<tr>
<td><a href="https://yourcompany.litmos.com/courses/library"><span style="color:#FFFF00;"><span style="font-size:28px;">Course Library</span></span></a></td>
<td><a href="https://yourcompany.litmos.com/achievements"><span style="color:#FFFF00;"><span style="font-size:28px;">Achievements</span></span></a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="video-overlay no-overlay"> </div>
</div>
</div>
</div>
</div>
Static Banner with Link
<div class="banner" style="padding:15px; text-align:center;">
<div class="banner-content">
<h1>Hello</h1>
<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="https://facebook.com" class="btn btn-primary">CLICK</a>
</div>
</div>
0 Comments