Adapt Learning Community: Footer across all pages

Hi everyone

I'd like to put a simple footer (containing a small bit of text and a logo image) across all pages of my course. I assumed this would be basic case of just adding to the index.html page. But it isn't working. Here's my code at the bottom of the index.html file.

</script>
</body>
<footer>
<p>Powered by:</p><img src='course/en/images/opo_logo.png' style='width:50px;height:50px'
</footer>
</html>

Am I doing something wrong? Rookie error?

two mistakes I can see:

<img> tag isn't closed
you've put <footer> outside of <body>

No reason it shouldn't work if you fix those two problems.

Don't forget - if you've got the spoor extension enabled then you'll have to amend two different HTML pages - index.html and index_lms.html in spoor's 'required' folder.

Ideally you'd create an extension to append this the footer to the page dynamically when Adapt loads - but appreciate there's a whole lot more knowledge you'd need to be able to do that! An easier solution might be to add it to page.hbs in the theme?

Show parent | Reply

Hi,

I added a footer to appear across all pages by adding the HTML to:

page.hbs


<div class="page-footer">
<div class="left">
<a href="http://www.instagram.com" style="text-decoration:none" target="_blank">
<i class="fa fa-paper-plane"></i>
</a> <a href="http://www.instagram.com" target="_blank"> Get in touch!
</a>
</div>

<div class="right">
<a href="http://www.linkedin.com/company/4986164" style="text-decoration:none" target="_blank">
<i class="fa fa-linkedin" aria-hidden="true"></i>
</a>
<a href="http://www.linkedin.com/company/4986164" style="text-decoration:none" target="_blank">
<i class="fa fa fa-youtube" aria-hidden="true"></i>
</a>
<a href="http://www.linkedin.com/company/4986164" style="text-decoration:none" target="_blank">
<i class="fa fa-twitter" aria-hidden="true"></i>
</a>
</div>

and styling here:

page.less

/* added page footer styling */

.page-footer {
padding: 75px 7% 100px 7%;
color: @primary-color-inverted;
background-color: @primary-color;
text-color: @primary-color-inverted;

/* visited link */
a:visited {
color: white;
text-decoration: none;
}

/* mouse over link */
a:hover {
color: hotpink;
text-decoration: underline;
}

/* selected link */
a:active {
color: blue;
}
img {
padding: 0px 8px;
height: 20px;
&.xl {
height: 35px;
}
}
.left { float: left; }
.right { float: right; }
}

}

These files are both found in the theme folder. I got the idea (and most of the code) from Tom Taylor's theme here:

https://github.com/taylortom/adapt-theme-community

You'll have noticed the font awesome CSS but that's a whole other story. The above theme uses images and this is less complex to add.

Show parent | Reply