FlexFooter component


(Joe) #1

Updated Repo :boom:: GitHub - hnb-ku/discourse-FlexFooter-theme-component

Small repo update note:

If you’ve installed the the theme from the old repo changes won’t affect you as you don’t need to update anyways, if you’ve not installed this theme before this will also not affect you :upside_down_face: (see comments below)


Basic template


Zoomed out:

Zoomed in:


click for full size


:warning: This theme component requires you to actually look at the code and change it to your preferences.

This is a skeleton. You still need to add content / links.

To install this theme, follow this tutorial:

Once the theme from the repo is installed, follow these steps:

1- Create a separate new theme and name it
2- Go to the samples folder
3- Pick a template (there’s only one for now)
4- Copy the code from the template and add it to your newly created theme’s footer in the common section.
5- Copy the following variables and add them to the common CSS section in your new theme

$df-top-footer-background: rgb(40, 40, 40);
$df-bottom-footer-background: rgb(17, 17, 17);
$df-top-link-color: inherit;
$df-bottom-link-color: rgb(185, 185, 185);
$df-shared-text-color: rgb(175, 175, 175);
$df-shared-heading-color: rgb(255, 255, 255);
$df-base-font-size: 1em;

5- Now add FlexFooter as a child theme under your new theme.

You should then be able to modify the html of the footer and the color variables in your newly created parent theme and not worry about it being overwritten if the repo is updated (to add more templates or fix bugs).

You can pretty much add anything inside the cards, from mailing list signup forms, ads, iframes or even Discourse widgets. If you have an idea for a template PRs are welcome!

You only need to look for the portion between

<!-- start card content -->
<!-- end card content -->

remove the placeholders, and add your content.

I am happy to help if you post specific problems / questions here.

Add button next to Privacy, Terms of Service
(Bhanu Sharma) #2

Works like a Charm. I installed it on forum.flippinbeats.com to give it a spin!

Will Customize the Components tonight and share the results (and issues if any)

Thanks for yet another useful Theme Component!

(Bhanu Sharma) #3

hey @lll

I had a small suggestion!
as @vinothkannans has published a theme component to add custom header which is made a bit easier to update by isolating customization from the theme component!

Can it be done with Your footer component so that we may store the changes in a separate child component and update the module without much issues?

(Joe) #4

Yes, I think the implementation in the header theme is very smart :+1:

I also see a small problem. The customization allowed in the header theme is a little bit more controlled. Meaning, you can add strings in fixed locations and those strings feed known variables in a defined html structure. I cannot say that the footer works that way.

Your implementation / design would be very different from someone else’s,

There are only two portions to the footer theme. The footer html and the CSS. The only two ways that might work are either.

A - Split the repo into 2 separate repos. One with the theme html and one with the theme CSS. Then add instructions for how to make the theme-footer-html a child theme of the the theme-footer-css. I would then be able to update the css without affecting the html.

B - I remove the html portion out of the repository and add it to this topic (~120 lines) and add instructions to create a new theme, add the html, and set the new theme as a child theme for the flex-footer theme. I would then also be able to update the css without affecting the html.

I have no problem with either of the above solutions.

However, doesn’t all of that sound like just more work for you to use the theme? I would like to reduce the amount of work that you have to do, and so I prefer simple.

Ideally admins can Install the theme, make changes and if they run into a problem, I can provide a bit of support here.

I’m still very open if you have better way we can implement easier customization flow :wine_glass:

(Bhanu Sharma) #5

IMO, This can be done But with a small change!

Instead of adding the code here, Adding the code to the repo itself in either the readme.md or a samples.md file in which, The Skeleton code and some customized samples (I’d be happy to contribute my customizations for that) So that the admin may be able to use their flavour of footer and keep their changes as You continue to introduce more customization options to the repo!

(Joe) #6

I think that’s a great idea :ok_hand: :wine_glass:

(Bhanu Sharma) #7

I’d Submit a PR to Your repo after the next update then!

(Joe) #8

Sorry about the delay :grin:

Done, there’s now a new link in the OP to a new repo with the new structure, fork away :champagne:

(Bhanu Sharma) #9

Sorry for the delay from my side as well.
Will work upon it when I reach home.

(Frederik L) #10

Any demo site running this? As I was not able to install this addon… but Im not that advance user…

(Joe) #11

No demo site :sweat_smile: sorry

What part did you get stuck on?

Here’s a quick run down of the installation:

Clone the theme
1- Use the repo link to install this as a theme:

Follow this if you’re not sure how to install a theme:

How do I install a Theme or Theme Component?

Create a local theme
2- Now that the FlexFooter theme is installed, you need to create a local theme in your Discourse. You have to do this to maintain your changes even if the theme is updated.

So create a new theme. In this case I will call it: Footer wrapper.

In Footer wrapper you need to add the html template in the common footer section.

I will add more templates in the future but since there’s only one for now you can copy it from here:

<!--- Start Discourse FlexFooter theme - basic template -->

<div id="df">

	<!--- Start Top Section -->

	<footer class="df-top">
		<div class="df-container clearfix">
			<div class="df-card-wrapper">

				<!--- Start  Card A -->

				<div class="df-cards df-card-a">

					<!--- Start  Card content -->

					<h3 class="df-card-a-title">
						Call to action
					<p> Lorem ipsum dolor sit amet, ex nulla cetero eam, admodum fuisset mediocritatem id sit, at soluta dictas eloquentiam vis. Harum dolorum mei ea </p>
					<p> <a href="#" class="btn btn-primary btn-df">Call to action!</a> </p>
					<p class="df-text-center"> fugit persius <a href="#">splendide</a> his mentitum! </p>

					<!--- End  Card content -->


				<!--- End Card A -->

				<!--- Start Card B -->

				<div class="df-cards df-card-b">

					<!--- Start  Card content -->

					<h3 class="df-card-b-title">
						in pro unum atqui splendide, ut eum omittam platonem <a href="#">Giveway!</a>
					<a href="#"><img src="//image.ibb.co/eONDmm/100_Amazon_voucher_giveaway.png"></a>

					<!--- End  Card content -->


				<!--- End Card B -->

				<!--- Start Card C -->

				<div class="df-cards df-card-c">

					<!--- Start  Card content -->

					<h3 class="df-card-c-title">
						Subscribe to our newsletter to get the latest scoop right to your inbox.
						<input type="text" name="Name" placeholder="Your name">
						<input type="email" name="email" placeholder="Email address">
						<button class="btn btn-primary" type="submit">Subscribe</button>

					<!--- End Card content -->


				<!--- End Card C -->


	<!--- End Top Section -->

	<!--- Start Bottom Section -->

	<footer class="df-bottom">
		<div class="df-container clearfix">

			<!--- Start LinkList A -->

			<nav class="df-linklists df-linklist-a">
				<a href="/about" class="df-local">About</a>
				<a href="/tos" class="df-local">Terms of Service</a>
				<a href="/privacy" class="df-local">Privacy</a>

			<!--- End LinkList A -->

			<!--- Start LinkList B -->

			<nav class="df-linklists df-linklist-b">

				<!--- Start Social links -->

				<a class="df-social-link" href="#">
                <i class="fa fa-envelope"></i>

				<a class="df-social-link" href="#">
                <i class="fa fa-facebook"></i>

				<a class="df-social-link" href="#">
                <i class="fa fa-twitter"></i>
              	<a class="df-social-link" href="#">
                <i class="fa fa-linkedin"></i>

				<a class="df-social-link" href="#">
                <i class="fa fa-google-plus"></i>

				<a class="df-social-link" href="#">
                <i class="fa fa-github"></i>

				<!--- end Social links -->


			<!--- End LinkList B -->


	<!--- End Bottom Section -->


<!--- End Discourse FlexFooter theme - basic template -->

So the code from above goes here:

Arrange the theme
3- Now all you have to do is make FlexFooter a child theme under Footer wrapper like so:

And then add FooterWrapper as a child theme under your current theme like so:

Add your own content
4- Once you've done these things you can go back and modify the template and your modifications will not be affected by updates.

Modifying the template is simple. Go back to Footer Wrapper and edit the html in the common footer section.

What you want to look for is these things:

					<!--- Start  Card content -->

					<!--- End  Card content -->

Remove whatever code is in between those for each card and add your own or simply modify whats there and save your changes.

Change the CSS
5- You can also change the colors by adding these variable to the common CSS section of the Footer Wrapper and changing them to your preferences:
$df-top-footer-background: rgb(40, 40, 40);
$df-bottom-footer-background: rgb(17, 17, 17);
$df-top-link-color: inherit;
$df-bottom-link-color: rgb(185, 185, 185);
$df-shared-text-color: rgb(175, 175, 175);
$df-shared-heading-color: rgb(255, 255, 255);
$df-base-font-size: 1em;

Like so:

Let me know if you still need help :sunflower:

(Biscuit) #12

I’ve been playing around with this theme behind the scenes and love it. Thanks.

I’m using the same code for the header and footer, so there’s cards at top and bottom. The only issue I experienced is the preview not working without a save first, which is discussed in this thread.

I’m not too familiar with CSS, so still exploring… wondering if there’s a way to define more cards and randomly rotate the content. Are there any specific commands I should google to investigate this?

(Frederik L) #13

Ahh, okay…

It seems like the import thing that doesnt work?

Nothing happens… no counter, no sign of import… it’s like it is frozen…?

(Joe) #14


My bad, I left the trailing slash in the url like so:


When it’s supposed to be like so:


Try that and let me know.

I have edited my previous post to reflect that change.


Awesome, I’m glad you like it :grin:

I have not forgotten about your questions, I will check get back to you on that as soon as I can. :sunflower:

(Frederik L) #15

Wauw - now it seems to work - thanks… :slight_smile:

Nice little feature!!

(Joe) #16


I also need to save first to preview any changes. I don’t really know what’s going on here :sunflower:

I think you’re mostly fine here except for one thing. The footer template has a element with a unique id.

So, if you copy the template once in the footer and once in the header, you get two elements with the same id. Which makes the html invalid.

In order to avoid that, update to the latest version and change the html in the header (or footer).

Look for:

<div id="df">

And change it to:

<div class="df-mainwrap">

To add more cards you need two things:

1- Add the html for the card
2- change the width of each card

To add the html (example)

look for:

<!--- End Card C -->

And add this right below it:

				<div class="df-cards">

					<!--- Start  Card content -->

					<!--- End Card content -->


And then add this CSS to a child theme under FlexFooter theme:

.df-cards {
	width: 25%; // <~ change this to 100% divided by number of cards

@media (max-width: 768px) {
	.df-cards {
		width: 100%;

Example result:

Can you give me a bit more info on what you have in mind here?

(Biscuit) #17

Thanks for the response! Didn’t realise about the unique name, so will correct that.

I’m sticking with 3 cards at top and bottom for now, as it feels right, the way you had it. But, good to know how to display more cards if needed.

I was wondering if it’s possible to define some extra cards (say 6 in total) but CSS only displays 3 of them at random. So if the person loads another forum page, they may see different cards. I’m not a CSS person, so not sure if that’s possible via CSS customisations?

(Joe) #18

Is it possible? Yes.

With CSS alone? Most likely not.

You need a script.

I would start by giving each card a unique id and hide all of them. Then put those ids in an array. Then randomize. Then get the first three and show them with jQuery. This leaves you with 3 cards that are displayed.

Once you write a script that does that for you, you need to fire it on every page reload.

With Discourse you can do that like this:

<script type="text/discourse-plugin" version="0.8.18">
//fire the script on every page change
api.onPageChange(() => {

function FooBar() {
      // do stuff

(Biscuit) #19

Cool. I’m using that script to fire on each page reload already, as I saw it in another thread by you :slight_smile:

I was investigating child selectors for choosing which cards to display, but more familiar with your approach above.

(Blu McCormick) #20


I LOVE this theme! I am using it for local advertising. Here is what I have:

Thanks for sharing, @lll. :pray: