Sticky footer to the bottom, pure CSS solution

ux
1

Hello Discourse enthusiasts,

I want to share with you my sticky footer solution, no js required (an alternative to this request), and assuming you know the height of your footer…I gave mine an extra 100px just to have some space between the content and footer.
In case you have a bigger footer with multiple columns, you should give a different fixed height in your mobile tab.

Step 1: Paste this inside your common CSS tab

body {
  position: relative;
}

#main {
  margin-bottom: 350px; /* is equal to the footer height - change it as you need, in both common and your mobile tab*/
}

#sticky-footer {
  padding: 50px 0;
  background: var(--header_background);  /* optional */
  color: var(--primary-medium); /* optional */
  text-align: center; /* optional */
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
}

Step 2: Go to your </body> tab and paste your footer HTML inside

Example:

<div id="sticky-footer">
  <div class="wrap">
      <!-- your footer content here -->
  </div>
</div>

That’s it :slightly_smiling_face:. Now your footer will stick to the bottom of your page even on pages with short content.

This is how our footer looks like on a page with short content:

image
image1150×1082 28.9 KB

Otherwise, it would be placed in the middle of the screen like so:

image
image1316×1222 33.5 KB

3 Likes
2

Why use this instead of the standard Discourse footer theme component?

1 Like
3

You tell me Jeff :slight_smile: …do we need to install components for every extra HTML and CSS code?
This is not a “how to create a footer” tutorial but more like a quick alternative solution to make a footer stick to the bottom of the page for those who may want to create their own footer.

4

Hmm, my thinking is we want people to use the theme components whenever possible as they are “official” from us and thus get full support, get auto updated, etc. What do @awesomerobot @Johani and @jordan-vidrine think?

2 Likes
7

Yeah if the official footer component fits your needs then it’s nice because we keep it up-to-date for you, but some people will want a different layout.

I’ve done something like this in the past… it’s a similar process to OP. You set the #main-outlet height to be 100% of the viewport height (100vh) minus the height of the footer and header. So on short pages your footer will now sit right at the bottom.

#main-outlet {
  box-sizing: border-box; // includes padding in height calculation
}

<script type="text/x-handlebars" data-template-name="/connectors/below-footer/my-footer">
  My footer content
</script>

<script type="text/discourse-plugin" version="0.8">
    api.decoratePluginOutlet(
      "below-footer",
      (elem, args) => {
          let headerHeight = document.querySelector(".d-header").offsetHeight;
          let footerHeight = document.querySelector(".below-footer-outlet").offsetHeight;
          let mainOffset = headerHeight + footerHeight;
          
          document.querySelector("#main-outlet").style.minHeight = "calc(100vh - " + mainOffset + "px)";
      }
   );
</script>

Screen Shot 2021-02-22 at 6.19.39 PM
Screen Shot 2021-02-22 at 6.19.39 PM878×787 118 KB

It comes up often enough that it’s probably worth doing something like this in core automatically if there’s content in footer.html or either of the two footer plugin outlets.

4 Likes
8

@cosdesign , where is that css tab located if you don’t mind me asking dude :slight_smile:

9

For your Default theme you would find it by going through the Edit CSS/HTML button:

Untitled
Untitled1482×751 43.1 KB

Though it would be better to create it as a theme component instead. (click the install button and ‘create new’ from in there)

There’s more info in Beginner's guide to developing Discourse Themes :+1:

2 Likes
10

awesome :slight_smile:

1 Like