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.
Clickable Scrolling Banner
HTML Banner Code (note the example below uses the same image src for each slide, after copying / pasting you need to change the image URLs accordingly)
<div class="w3-content">
<img class="mySlides" src="https://i.imgur.com/ZtdhrUA.jpg" alt="custom_html_banner1" style="width:100%">
<img class="mySlides" src="https://i.imgur.com/ZtdhrUA.jpg" alt="custom_html_banner2" style="width:100%">
<img class="mySlides" src="https://i.imgur.com/ZtdhrUA.jpg" alt="custom_html_banner3" style="width:100%">
<img class="mySlides" src="https://i.imgur.com/ZtdhrUA.jpg" alt="custom_html_banner4" 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}
Scrolling Marquee Banner / Moving Text
<div align="center">
<marquee behavior="alternate" bgcolor="#bb3434" direction="left" height:=""
loop="7" scrollamount="1" scrolldelay="2" width="100%">
<span style="font-size: 20px;color:#FFFFFF">
Latest news! Latest news! Latest news! Latest news!</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);
background-size:cover;
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">$nbsp;</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>
![]() |
We built out a series of courses all about customizing your Litmos instance. Check out the Instance Customization Pro Learning Path in Litmos Dojo. |
Comments
0 comments
Article is closed for comments.