Modern Footer Extension (Responsive & Compatible)

fakruzaruret Xkyer Amarok Subarist meihuak codeX Wlork Capybara i mentioned contributors for the 0.7 update. Apologies for any inconvenience; I just thought you might find this interesting.

IMPORTANT!

I know this won’t surprise you, but the extension has been rewritten so extensively that it’s almost like starting from scratch. After updating the extension:

1. Clear your cache.
2. Deactivate and reactivate the modern footer extension.

Failure to do so will result in visual bugs.

v0.7 is LIVE!

A highly requested feature has been added: the ability to hide the footer on specific pages with the new:

Footer Display Mode!

• Show on all pages: The footer will be visible on every page of the website.
• Hide on all pages: The footer will be hidden on every page of the website. I thought you might want to hide it while adjusting the extension settings.
• Hide on discussions: The footer will be hidden only on the discussions pages.
• Hide on all pages except the index page: The footer will be visible on the homepage (index page) but hidden on all other pages.
• Custom: Allows you to set specific rules for when and where the footer is shown or hidden based on your preferences. I'm not sure if I'll be able to release this soon, but why not in the future?

Another highly requested feature has been added:

Custom HTML

I’ve even prepared a sample custom HTML for you:

<div class="sponsor-container">
  <div class="sponsor-logo">
    <img src="https://flarum.org/img/brands/github.png" alt="Github Logo">
  </div>
  <div class="sponsor-logo">
    <img src="https://flarum.org/img/brands/1password.png" alt="1Password Logo">
  </div>
  <div class="sponsor-logo">
    <img src="https://flarum.org/img/brands/jetbrains.png" alt="Jetbrains Logo">
  </div>
  <div class="sponsor-logo">
    <img src="https://flarum.org/img/brands/ohdear.png" alt="Ohdear Logo">
  </div>
  <div class="sponsor-logo">
    <img src="https://flarum.org/img/brands/styleci.svg" alt="Styleci Logo">
  </div>
  <div class="sponsor-logo">
    <img src="https://nlnet.nl/logo/banner.png" alt="Nlnet Logo">
  </div>
</div>

<style>
  .sponsor-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }
  .sponsor-logo {
    margin: 10px 20px;
  }
  .sponsor-logo img {
    max-height: 50px;
    object-fit: contain;
  }
</style>

Details

There are also many details I didn’t mention here. Let me quickly summarize:

• The gap between the discussion list on the homepage and the footer on mobile has been removed.
• In the settings menu, instead of showing “Links #1,” it will now display the title you set for the block.
• Changes made in the Blocks section will now reflect in the menu and general settings page before saving.
• The forum-side code has been completely rewritten, improving performance.
• Components hidden in the footer will no longer load statically.
• The language file, which was removed in version 0.6, has been reintroduced with a completely new one. Unfortunately, your previous custom translations have been deleted.
• Design consistency has been ensured in the settings, and some options have been relocated to more logical sections.

Additionally, many small changes or updates I can’t recall right now have also been made.

Feedback & Suggestions

I’m always happy to hear more requests and suggestions!

Mahendra Thank you so much for installing the extension!

For the white strip issue with darker themes, you can fix it with this CSS code:

footer {
    margin-top: 0px;
}

Add this to your custom CSS, and it should resolve the problem. Let me know if you need further assistance!

laoma2053 I also had some difficulty understanding since English is not my native language, but I understood you.

I found your first request quite reasonable, and I will include it in the 0.8 update within a week. Instead of a Font Awesome icon, if a link is provided, the specified PNG will be displayed instead of the icon. I believe this is a reasonable solution.

As for the second request, I didn’t fully understand what you are asking for. Are you requesting a setting to change text colors? I need a clearer and more detailed explanation from you on this matter. While I believe I understood what you want, I’m not sure if customizing text colors will be sufficient as a solution.

Subarist Honestly, I'm not entirely sure how to handle requests like this. I wanted the footer to work seamlessly with all themes and extensions, so I made it adapt to Flarum's secondary color. I even styled the buttons based on your theme's global border radius—whether rounded or sharp.

Customization is something I really enjoy too, but even now, there are so many settings that I've been working hard to simplify them. For example, if you replace the forum logo with text, it behaves just like the other blocks, and you can even add a Font Awesome icon.

This isn’t a complaint—don’t get me wrong. We’ve been developing this extension together since day one, and I’d love to hear feedback from people using it. My main concern is that adding too many customization options might compromise simplicity and compatibility in the long run.

At some point, I’m considering creating a "custom CSS library" instead of adding more settings, allowing users to apply their own styles if needed.

Lastly, I want to keep the extension lightweight—around 4-5KB—so it doesn’t affect the forum’s loading speed.

Please don’t hesitate to share your thoughts on this. I really appreciate all your feedback and suggestions. Thank you in advance!

Amarok You're amazing! Once again, thank you so much for all the contributions you've made to this extension so far

By the way, I’ve reviewed the translations, and I’m not entirely sure if “block” is the right term to use. If words like “block” or “section” feel unclear or confusing, please don’t hesitate to let me know.

Thanks again!