Has anyone added a custom footer to Discourse?

제품 지원
1

Hi everyone,

Props to whomever can help. Does anyone customized the footer of Discourse to include copyright text, links, etc.?

I am looking to do this for my site but honestly cannot figure out how to properly code the footer to where it looks and works good.

All help is appreciated, right now it feels like my Discourse site is “pantless”. :frowning:

2

Ours is just basic centered text so not much to help you with there. Do you have any kind of graphic mockup of what you’d like to achieve?

3

Just go to Admin, Customize, CSS/HTML, Bottom, and put your links in there :slight_smile:

4

Perhaps some fancy social media icons with text would work fine… I am checking http://codecanyon.net also in hopes of finding something potential to work with the site…

Thanks for your reply!

5

Cool. Once you figure out the HTML you need, adding it shouldn’t be too difficult using the steps @riking mentioned above.

6

Hi. I recently found the footers over at BootSnipp Bootstrap Footer Examples and wanted to use one of these in my own Discourse forum. Bootsnipp separates HTML, CSS, Javascript - so it is easy to cut’n paste that code into the Customize sections of my Discourse.

I tried several but each one does not center on my Discourse. I thought there might be a conflict among generic tag names (like “row” or “container” - so I tried adding “footer-” to the front, but that did not help.)

There seem to be at least 2 issues:

  1. the centering doesn’t seem to work
  2. the CSS columns effect also does not work.

Is there a setting I can change in my Discourse Settings area to allow these effects to happen in the footer? Should I be using certain tag names?

I hope to add links to websites related to my forum down there. I may also try adding a banner zone like I used to have in our pre-Discourse days.

8

Here are a few examples

If you want to center your footer, either use flex to do it yourself, or use the “container” class.

10

2020년에 이 기능을 찾는 방법에 대한 업데이트된 설명

  1. 햄버거 메뉴 > 설정 > 사용자 지정 > [테마 선택] > “CSS/HTML 편집” 버튼 > 푸터
  2. 상자에 사용자 정의 HTML을 입력한 후 '저장’을 누릅니다.
  3. 사용자가 선택할 수 있는 각 테마에 대해 이 과정을 반복합니다.

적절하고 기본적인 저작권 섹션

기본 라이트 테마와 다크 테마 모두에서 잘 작동한다고 생각한 다음 HTML을 사용하여 저작권 푸터를 시작했습니다:

<div style="text-align: center; color: #999; font-size: 90%; padding: 2em 0;">
Copyright &copy; 2020 INSERT YOUR COMPANY HERE. All rights reserved.
</div>

연도 자동 업데이트

물론 12개월마다 푸터의 연도를 변경해야 하는 것은 원치 않으므로, 푸터에 다음 HTML이 포함되도록 업그레이드했습니다:

<div style="text-align: center; color: #999; font-size: 90%; padding: 2em 0;">
Copyright &copy; <span id="footer-copyright-current-year"></span> INSERT YOUR COMPANY HERE. All rights reserved.
</div>

그리고 </body> 섹션에는 다음을 넣었습니다(이상적인 코드는 아닐 수 있지만, 저는 Discourse 해킹에 익숙하지 않습니다):

<script>
    function setCopyrightYear() {
        var el = document.getElementById("footer-copyright-current-year");
        if (el) {
            el.innerHTML = new Date().getFullYear();
        } else {
            setTimeout(setCopyrightYear, 100);
        }
    }
    document.addEventListener("DOMContentLoaded", setCopyrightYear);
</script>

다시 강조하지만, 표시되기를 원하는 모든 테마에 복사/붙여넣기해야 합니다.

11

누군가가 그들의 Discourse 인스턴스에서는 다음과 같다고 알려주었습니다:
햄버거 > 관리자 > 설정 > …

우리가 사용하는 인스턴스(Discourse에서 호스팅)에서는 먼저 관리자로 들어갈 필요가 없습니다.

12

와.. 스마트싱스에서 나온 테마네요.
어떤 테마를 사용 중이세요? 커스텀 헤더인 것 같은데..

13

Open Energy Modelling Initiative는 우리 포럼에 라이선스 조항과 다른 서비스로 이동할 수 있는 클릭 가능한 링크가 포함된 커스텀 푸터(fore)를 사용합니다:

openmod-forum-footer-tight.screenshot-20210224t074253z

이 방식은 매우 유용하며 법적 맥락에서도 도움이 된다고 생각합니다.

물론 가입 시점에도 이러한 라이선스 조항에 대한 동의 요청을 진행합니다:

openmod-forum-signup.screenshot-20210224t075440z
openmod-forum-signup.screenshot-20210224t075440z885×310 26 KB