Thought this simple customized footer might be useful to others too.
I am not asking for help, it's finished code that is working perfectly on our site. Of course do say if you do spot any issues however minor, but it's simple code and not had any issues with it.
I'm posting here just because it's not an extension and didn't know where to post it. It is for others to use for their sites if they want to.
Simple customisation via the admin / Appearance tab.
The main thing it does is to auto-hide the footer as soon as the user starts to scroll, especially useful if they have limited space on a mobile phone.
This shows it in action on an emulated iPhone 5.
Here is the code
<!-- Footer as floating div at the bottom of the screen with Rules, Terms, Pivacy, Erase, Cookies and Report 🚩 linking to the relevant parts of our site, with id "quick-footer" -->
<div id="quick-footer" style="
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background: #f6f8fa;
color: #333;
text-align: center;
padding: 2px 5px;
border-top: 1.5px solid #888;
z-index: 9999;
font-size: 0.85em;
transition: opacity 0.2s;
">
<b>
<a href="/Flarum/public/d/13-community-rules-for-doomsday-debunked" style="margin-right:10px; color:#2a5887; text-decoration:underline;">Rules</a>
</b>
|
<a href="/Flarum/public/d/15-terms-of-service" style="margin-right:10px; color:#2a5887; text-decoration:underline;">Terms</a>
|
<a href="/Flarum/public/d/16-privacy-policy" style="margin:0 10px; color:#2a5887; text-decoration:underline;">Privacy</a>
|
<a href="/Flarum/public/d/9-right-to-erasure-gdpr-how-to-request-your-data-anonymizedright-to-erasure-gdpr-how-to-request-your-data-anonymized" style="margin:0 10px; color:#2a5887; text-decoration:underline;">Erase</a>
|
<a href="/Flarum/public/d/20-cookie-policy" style="margin-left:10px; color:#2a5887; text-decoration:underline;">Cookies</a>
|<b>
<a href="/Flarum/public/d/33-contact-our-moderation-team-to-report-a-problem-rule-break-online-harm-etc" style="margin-left:10px; color:#2a5887; text-decoration:underline;">Report 🚩</a> </b>
</div>
<script>
// Fades out the footer "quick-footer" if user scrolls it
(function(){
var footer = document.getElementById('quick-footer');
window.addEventListener('scroll', function(){
if(window.pageYOffset > 10){
footer.style.opacity = '0';
footer.style.pointerEvents = 'none';
} else {
footer.style.opacity = '1';
footer.style.pointerEvents = 'auto';
}
});
})();
</script>
To use, change the URLs to point to your own site terms etc. and just copy / paste into Admin > Appearance > footer
