Easy responsive footer

This is a theme component that will allow you to build a fully-responsive footer using nothing but plain text.





There are six settings in this component that will help configure it easily

1. Heading

Text for the heading in the footer - you can use your site name for example - Max length 25 characters

2. Blurb

a short blurb about your community - Max length 180 characters

3. Link sections

Add link sections. The ideal number of sections is six. One item per line in this order: Text, title
Text: what appears on in the footer
Title: the text that appears when the item is hovered.

4. Links

Add links to link sections. One item per line in this order:
Parent, text, URL, target, title
It is a good idea to keep the number of links under each section similar
Parent: the name of the parent section which this link shows under. Use the text value from the list above
Text: the text that shows for this link
URL: the path this item links to. You can use relative paths as well.
Target: Choose whether this item will open in a new tab or in the same tab. Use blank to open the link in a new tab, or use self to open it in the same tab.
Title: the text that shows when the link is hovered.

5. Small links

You can add small links at the bottom of the footer like Terms of Service and Privacy. One item per line in this order:
Text, URL, target
Text: The text that shows for the small link
URL: The path of the link
Target: Use blank to open the link in a new tab and use self to open it in the same tab

6. Social links

Enter the social links you’d like to add to the footer in this format:
provider, title, URL, target
Provider: is the name of the provider like Facebook or Twitter
Title: The text that shows when the link is hovered
URL: The path you’d like the link to have
Target: Use blank to open the link in a new tab and use self to open it in the same tab


  1. I left the placeholder items as defaults for the component so you can easily see what your settings should look like.

  2. This component will use your theme’s color scheme to generate the colors used for the elements in it. but all elements have unique classes added to them in case you want to override something.

  3. Since this component uses theme settings, it means that I can update it in the future to either fix or improve it and the data you enter would not be lost :tada:

Install this theme component


I pushed some fixes.

Key changes:


The cause here is CSS specificity. Your CSS targets .wrap, and it works, but this component also has some CSS that targets #main-outlet and adds some properties to it to keep the footer at the bottom even on short pages.


The #main-outlet selector is more specific than your .wrap selector - because it’s id-based, so it overrides your styles.

You can fix this by adding this CSS

#main {
  #main-outlet {
    width: 1200px; // or whatever width you want to use

Sure, remove all the extra columns that you don’t need in the settings, and you’ll get three columns.

I cannot reproduce this issue, but the error implies that your settings are incorrect. Can you double-check and make sure that you’ve followed the instructions under each setting? If your problem persists, can you share a link to the site you see the issue on?

I did a bit of cleaning up and deleted the replies for bugs that will be fixed once you update the component. If your issue persists, feel free to post about it again.


I wonder if the header text (This is a header) within [Easy Footer Theme Component by Joe] can be replaced with logo.

I’ve tried exporting the component to alter hbs files, but I’ve failed, I think I need some hints.

Any insight is much appreciated :relaxed:


Depending on what you want to do, you can simply try something like this:

  • in the Easy responsive footer theme settings delete the text inside the Blurb setting. If you want you can delete even the text inside the Heading setting.

  • create a new theme component and add in the Common > CSS tab

    .blurb::before {
        background-image: url(LOGO-URL);
        background-repeat: no-repeat;
        display: inline-block;
        content: "";
        /*change the settings below based on the size of your logo*/
        background-size: 200px 200px;
        width: 200px;
        height: 200px;

and the result will be something like this:



My belief in in the open source echo system is initially empowered by great people like you.


I have the Discourse Subscriptions plug-in. In the user menu, there is a new submenu called “billing.” However, the easy footer does not show up there. Is there a way to get it to show up?

1 Like

Is there any way to use more than 180 characters in the blurb space? Thanks.

1 Like

Export the theme component, extract, edit the [settings.yml] file line 8 (max: 180) with your desired value, compress the folder again and upload.



There should be an option to customize the colors of the background and text with CSS. By default, it doesn’t match the header.

Otherwise it works great! Thanks!


hello Joe, can weadd more widget same here

Hello, is there a way to embed an HTML element into the footer as pictured above?

I was only able to do it by editing the footer HTML but it adds a whole new footer in addition to the main one.

1 Like

Can this be set to be a floating footer?

1 Like

This has resulted in the logo appearing in the blurb:before of search results, even after I specified this in the component

div.below-footer-outlet.custom-footer.ember-view > div.wrap > div.flexbox > div.first-box > .blurb::before {
    background-image: url(image url);

Is there any way to make sure it doesn’t appear in search results, but still appears in the footer?

1 Like

After updating to 2.8.0.beta2, a horizontal scrollbar will appear at very large viewports > 1000px. May I ask if this is the intent, anyone else seeing the same?

I was able to replicate on try. Tested it on Chrome, Edge, same results as well.

Please see my attempt below. Meta introduces the horizontal scrollbar at 700+, while try does it at 1000+

Video_2021-06-12_115328 (2)


Thanks for reporting the issue @Kchalk :+1:

I just pushed a small fix. Once you update the component, the issue will go away.


Appreciate the fast fix @Johani . Updated to the latest commit and can verify it’s all good now, thank you! :awthanks:


Hi,Can be the background&text colors fo the footer changed to the same color as the header?


Thank you for the awesome footer! I have been having issue showing the Tiktok logo from Font Awesome. I have tried adding fab-tiktok, fa-tiktok, fas-tiktok, tiktok to the svg icons setting, but none of them renders the tiktok logo.

Thank you for your help!


It is possible to override the colors of the background and such in another theme component? The client wants a white background (same as the header); I would rather not fork this to fix it. I’m trying in another theme component, but it doesn’t seem to be doing anything. It would seem like this would work, but it seems to have no effect. Maybe there’s some order that they get applied?

.below-footer-outlet.custom-footer {
    background: #B3B7BC !important;
        background-color: blue;


Is your watch command running? (This usually ends up being the issue for me :sweat_smile:)

I just tried doing:

.custom-footer {
   background: red;

   .second-box {
      background: purple;

in another theme component, and its working for me…