Easy responsive footer


(Joe) #1

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

Repository link






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:

How do I install this theme component?

Follow the theme installation guide and add the theme component to your active themes.

If you’re new to Discourse themes, you can learn more about them here

FlexFooter component
(Mindaugas Bartusevičius) #2

@Johani Very good work! Thank you

(James Hahn II) #3

Very nice @Johani! Thank you for this!


Can’t get it to add as component to my theme. Shows up as expected in the Components list, but goes blank after I click +Add so no ability to click the check mark to save.

[Update 2]

Sorry, appears this is meant to be deployed as theme, instead of component. Made it my default theme, copied/pasted all customizations from previous theme CSS into this theme’s CSS, and saved. All working as expected. Darn you learning curve!

Thanks again @Johani :slight_smile:

(Joe) #4

You’ve run into a small known bug that is scheduled to be fixed. If this occurs again, try reloading the page and you should be able to add it as a theme component to your active theme.

No, this is actually meant to be a theme component. I would recommend that you revert the changes and add it as a theme component. Like I mentioned earlier, you might have to reload the page, because this is a bug.

The reason why you don’t want to make this your default theme is because you added your own CSS to it. If this theme needs to be updated, you would lose all your custom code.

(James Hahn II) #5

I reverted, but it doesn’t work at all that way. Still just blank no matter how many times I refresh the page. Incognito no go either.

(Joe) #6

You can try this as a temporary workaround then.

In this example I want to add the Alternative Logos theme component but the steps are the same for any theme component if you encounter the bug.


When I add it, I see what you mentioned:


The workaround is to ignore whatever component you just added and add any other component (doesn’t matter which one really)


You would then add the component you originally wanted to add one more time. In my case, this was the Alternative logos component.


Once that’s done, you would then remove the unwanted theme components and leave the one you wanted like so:


And your theme component would be added to your theme.

(James Hahn II) #7

It works! Thank you @Johani!

(Nichalas Petranek) #8

@Johani I’m having an issue with the links showing up in the footer… attached are some screenshots of the theme component settings and the not-so-expected results. Anything you might be able to help with?

A quick note, the footer is still quite bare because I’m still building it for my forum.

(Joe) #9

I think your issue might be somewhere else, there’s an error in the console that’s stopping the code for the footer links from executing.

What other theme components do you have installed and are they all updated?

(Nichalas Petranek) #10

I just dealt with an error message because a theme component was not up to date about 3 hours ago. I’ll check again though and let you know.

(Nichalas Petranek) #11

Those are the theme components installed and I just made sure that they are all up-to-date.

(Joe) #12

Thank you for checking. I just made a small change to the hamburger links component, can you run an update for that again and let me know if the issue persists?

(Nichalas Petranek) #13

I updated the theme component and my forum would no longer load by refreshing the page. I went back into my settings and had to remove the hamburger links component from the forum in order to get it to load on a refresh. The issue with the footer still persists though…

(Joe) #14

That’s strange. I have both working with no issues. Here’s the hamburger links component after the small change

I can’t see the entire data you entered in the link-sections and links settings. Can you reset those to the defaults and see if that works?

(Nichalas Petranek) #15

Yes I’ll try that. If needed, I’ll also invite you to join my forum so you can see exactly what’s going on if I’m still having issues.

(Nichalas Petranek) #16

It seems restoring the defaults that came with the component gave the desired results. Should I try simply changing them one by one?

I’m still puzzled why it’s only now working as I used the exact same format as the default values…

(Joe) #17

Yeah, I think it’s worth trying that.

Do let me know if you’re still having problems.

(Nichalas Petranek) #18

Ok so I think I’ve figured out the issue, but I’m not sure how to mitigate it. All I did was rename one of the sections and change the corresponding links. Here are the settings and the result…

At this point, would you mind joining my forum to help resolve the issue? We can further discuss via PM.

(Joe) #19

I think I know what the issue is. I think the fact that you’re using two words for the section name is throwing it off. No worries, I’ll get that fixed. Thanks for reporting :+1:

(Joe) #20


I pushed a fix and you should now be able to use more than one word for section names

Please update the component and let me know if you’re still having trouble.