Creating a Footer


(Safa Faheem) #1

I’m trying to create a footer for the Welcome (pre-Login) screen of a Discourse site I’m working on. The footer should be divided like how the header is shown on this website with the gray line and the discourse symbol. There is a “Footer” section under HTML/CSS in the Admin site but it won’t apply to the homepage. Any ideas?


(Simon Cossar) #2

You can get the footer to show up on the login page with something like this placed in a the </head> section of a customization:

<script>
  var LoginRoute = require('discourse/routes/login').default;
  
  LoginRoute.reopen({
      activate() {
          this.controllerFor('application').setProperties({
              showFooter: true
          });
      }
  })
</script>

Footer Only In "Categories" Page?
(Safa Faheem) #3

Thanks, Simon. In the code you supplied, where am I actually typing in the code for what I want my footer to contain or display? I want it to link to the Terms and Privacy Policy, but I’m not quite sure where to place that in your current code. Would it be after show footer?


(Simon Cossar) #4

to make a footer like this:


Go to admin>customize>css/html and click on the ‘new’ button. That will open an editor that looks like this:

In the text-box above the editor, where it says ‘New Style’, enter a name for your new style. I called mine ‘footer’. The code I supplied goes in the /head section of that editor:

Put the html to make your footer under the footer tab:

You can add some css under the css tab to make it look good. I use a ‘wrap’ class for the content of the footer. That class is already styled by Discourse.

To do this really well will take a bit more work. Ideally, the footer should be sticky - it should stick to the bottom of the page when there isn’t enough content to push it there. I have made a plugin for that, but it is broken at the moment.

To get Discourse to use your new style you have to check the ‘enabled’ checkbox at the bottom of the editor and then click the ‘Save’ button. And then refresh the page.


(Safa Faheem) #5

Wow, thanks so much for the detailed step by step instructions, Simon. I really appreciate it. Cannot wait to try it tonight and let you know how it goes!


(Safa Faheem) #6

I tried it, and it worked! Thanks so much!