Easy Responsive Footer

:discourse2: Summary Easy Responsive Footer will allow you to build a fully-responsive footer using nothing but plain text.
:eyeglasses: Preview Preview on theme-creator.discourse.io
:hammer_and_wrench: Repository Link https://github.com/discourse/Discourse-easy-footer
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

Samples

Desktop

Mobile

Settings

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

Notes

  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:

107 Likes