Responsive Footer for Flarum (Fully Compatible)

hf06

Personally, I like to include "legal" links and other necessary things in the footer. After working on it for a month, I believe I've perfected the code, making it fully compatible with Flarum's own structure and colors. I’ve decided to share it with you all.

First, let’s take a look at some demo images:

How to implement:
All you need to do is paste the HTML and CSS code I provided below into the "custom footer" and "custom CSS" sections in your admin panel. It will automatically match your site’s primary color and will also work perfectly with the dark mode extension.

You only need to edit the HTML code within the "custom footer" section, adding your own links, titles, and text.

Additionally, you can fork it on CodePen if you wish:

I’m new to Flarum, and as I mentioned, I tried to use local styles and colors as much as possible and optimize the code.

I look forward to your suggestions and feedback.

If you are using the navbar extension on mobile, you can add this extra code to the custom CSS to prevent the navbar from covering the footer area.

/* Mobil Footer*/
@media @phone {footer {
padding-bottom: 74px !important;}
.App{padding-bottom:0}}

Flarum Türkiye (Türkçe) konu: https://flarumtr.com/d/4233-flarum-footer-kodu-responsive-ve-uyumlu

wylzn

hf06 it’s a gorgeous resource which I now use on my site, although I’ve edited a little for my needs, eg. hiding it on the login page and my stripe climate disclaimer

overall, good work, however, I expected nothing less of you 😉

project1537

Thanks for sharing. I will certainly use it!

hf06

project1537 I’m eager to hear how the compatibility turns out when you use it on your own forum.

Please don’t forget to share your feedback, as I truly value your thoughts 😊

hf06

wylzn It looks great! I noticed you updated the Disclaimer section, and that’s exactly why I added it. In some regions or countries, forums are required to include legal disclaimers.

For instance, in my region, I must state that topics posted by users are not moderated and that each user is legally responsible for their content. I’ve been using this section for that purpose.

Your example is a fantastic use case. Thank you for the compliments! While I’m familiar with HTML, JS, CSS, and PHP, I lack the resources to turn this into a proper extension.

When creating this footer, my goal was to make links behave like the FoF Links extension and allow the customization of other texts directly from the admin panel.

Seeing it in use and appreciated is truly motivating and helps me stay inspired to gather more resources 🥹

wylzn

hf06 I think this can be an easy(ish) implemented extension. I’m no expert but I can always try it out, with your permission of course

hf06

wylzn of course, not just you—anyone is free to improve, share, or turn the code into an extension without needing permission. I would be happy about that

wylzn

hf06 hi again; you said your original idea was to be editable from the admin page, could you give a list of what exactly you hoped your extension to be?