Easy Responsive Footer

Discourse · 8월 28, 2018, 8:19오전


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

Install this theme component

Features

Desktop

Mobile

Settings

Name	Description
heading	Text for the heading in the footer - you can use your site name for example - Max length 25 characters
blurb	Enter a short blurb about your community - Max length 180 characters
sections	Sections to be displayed in the footer
small links	Small links at the bottom of the footer like Terms of Service and Privacy
social links	Social links you’d like to add to the footer
show footer on login required page	Check this setting if you want the footer to be displayed on the login-required page (only applies if your site is private)
svg icons	List of FontAwesome 7 icons used in the social links setting above.

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

I left the placeholder items as defaults for the component so you can easily see what your settings should look like.
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.
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

Hosted by us? Theme components are available to use on our Pro, Business, and Enterprise plans.

Last edited by @Moin 2026-04-30T11:36:43Z

Check document
Perform check on document:

Johani · 11월 29, 2020, 12:24오후

수정 사항을 반영했습니다.

주요 변경 사항:

이제 이 컴포넌트는 CSS 변수를 사용하므로 다크 모드와 호환됩니다.
@mbauman 님이 보고한 버그를 수정하기 위해 미디어 쿼리를 일부 수정했습니다.
로그인 필요 페이지에서 푸터가 표시될지 여부를 제어할 수 있는 설정을 추가했습니다.

image1102×307 37.7 KB

여기서 원인은 CSS 특정성(CSS specificity)입니다. 사용자의 CSS는 .wrap을 대상으로 하며 작동하지만, 이 컴포넌트에는 짧은 페이지에서도 푸터가 아래에 위치하도록 유지하기 위해 #main-outlet을 대상으로 일부 속성을 추가하는 CSS가 있습니다.

Discourse-easy-footer/common/common.scss at main · discourse/Discourse-easy-footer · GitHub

#main-outlet 선택자는 ID 기반이므로 사용자의 .wrap 선택자보다 특정성이 높아 사용자 스타일을 덮어씁니다.

다음 CSS를 추가하여 이 문제를 수정할 수 있습니다.

#main {
  #main-outlet {
    width: 1200px; // 또는 원하는 폭
  }
}

물론입니다. 설정에서 필요 없는 추가 열을 모두 제거하면 3개의 열이 됩니다.

이 문제를 재현할 수 없지만, 오류 내용은 설정이 올바르지 않음을 시사합니다. 각 설정 아래에 있는 지침을 따랐는지 다시 한번 확인해 주시겠습니까? 문제가 계속된다면, 문제가 발생하는 사이트 링크를 공유해 주시겠습니까?

컴포넌트를 업데이트하면 수정될 버그에 대한 답변들을 정리하고 삭제했습니다. 문제가 계속되면 언제든지 다시 게시해 주세요.

dadberg · 2월 9, 2021, 11:41오전

[Easy Footer Theme Component by Joe]의 헤더 텍스트(This is a header)를 로고로 교체할 수 있을지 궁금합니다.

컴포넌트를 내보내서 hbs 파일을 수정해 보았지만 실패했습니다. 힌트가 필요할 것 같습니다.

도움이 되실 만한 조언을 주시면 감사하겠습니다

dax · 2월 9, 2021, 1:17오후

하고 싶은 작업에 따라, 다음과 같은 방법을 시도해 볼 수 있습니다:

Easy responsive 푸터 테마 설정에서 Blurb 설정 안의 텍스트를 삭제하세요. 원하시면 Heading 설정 안의 텍스트도 삭제할 수 있습니다.

새로운 테마 컴포넌트를 생성하고 Common > CSS 탭에 아래 코드를 추가하세요.

.custom-footer .first-box .blurb::before {
    background-image: url(LOGO-URL);
    background-repeat: no-repeat;
    display: inline-block;
    content: "";
    /*로고 크기에 따라 아래 설정을 변경하세요*/
    background-size: 200px 200px;
    width: 200px;
    height: 200px;
}

그 결과는 다음과 같을 것입니다:

dadberg · 2월 9, 2021, 1:43오후

해결되었습니다!

오픈소스 생태계에 대한 제 믿음은 처음부터 여러분 같은 훌륭한 분들 덕분에 강화되었습니다.

Jcava5 · 4월 2, 2021, 12:02오전

CSS를 사용하여 배경색과 텍스트 색상을 사용자 지정할 수 있는 옵션이 있으면 좋겠습니다. 기본 설정에서는 헤더와 일치하지 않습니다.

그 외에는 아주 잘 작동합니다! 감사합니다!

thaidb · 4월 2, 2021, 8:10오전

조, 안녕하세요. 여기에도 위젯을 더 추가할 수 있을까요?

b481 · 5월 4, 2021, 9:43오전

이로 인해 검색 결과의 blurb:before에 로고가 표시되고 있습니다. 컴포넌트에서 이를 명시했음에도 불구하고요.

div.below-footer-outlet.custom-footer.ember-view > div.wrap > div.flexbox > div.first-box > .blurb::before {
    background-image: url(image url);
}

검색 결과에서는 로고가 표시되지 않도록 하되, 푸터에는 계속 표시되게 만드는 방법이 있을까요?

littleviolette · 8월 28, 2021, 5:42오후

멋진 푸터를 제공해 주셔서 감사합니다! Font Awesome의 Tiktok 로고를 표시하는 데 문제가 발생하고 있습니다. svg 아이콘 설정에 fab-tiktok, fa-tiktok, fas-tiktok, tiktok을 추가해 보았지만, 어떤 것도 tiktok 로고를 렌더링하지 않습니다.

도움 주셔서 감사합니다!

bekircem · 9월 14, 2021, 10:29오후

제목의 25자 제한을 변경하고 싶습니다. 제목은 CSS로 배치할 예정입니다. 가장 간단한 방법은 무엇인가요?

keegan · 9월 14, 2021, 11:45오후

@bekircem
자릿수 제한을 초과하면 일부 기능이 깨질 수 있지만, 다음을 시도해 볼 수 있습니다:

.custom-footer .first-box .heading {
   visibility: hidden;
}

.custom-footer .first-box .heading::after {
   content: "This is something that is longer than 25 characters";
   visibility: visible;
   display: block;
}

다만 visibility: hidden을 사용하면 여전히 빈 공간(white-space)이 유지됩니다. 하지만 제목의 크기에 따라 다음 방식을 대신 시도해 볼 수 있습니다:

.custom-footer .first-box .heading {
   visibility: hidden;
   position: relative; 
}

.custom-footer .first-box .heading::after {
   content: "This is something that is longer than 25 characters";
   visibility: visible;
   display: block;
   position: absolute;
   top: 0;
}

bekircem · 10월 20, 2021, 10:20오후

href 속성이 없는 링크 섹션에 텍스트를 추가할 수 있을까요?

IAmGav · 10월 20, 2021, 10:50오후

URL이 들어갈 자리에 #만 추가하세요

bekircem · 10월 20, 2021, 10:52오후

이 경우에도 여전히 클릭 가능한 URL로 표시됩니다. 태그 없이 추가할 수 있는 방법이 있을까요?

Johani · 12월 9, 2021, 10:51오전

테마 어딘가에 이 CSS를 추가할 수 있습니다.

.custom-footer a[href="#"] {
  pointer-events: none;
}

pfaffman · 12월 15, 2021, 2:26오후

다음과 같이 제출했습니다:

puginId 누락으로 인한 비권장(deprecation) 문제를 수정해야 합니다. 테스트는 하지 않았지만, 제 생각에는 올바른 것 같습니다.

수정: 하지만 전혀 올바르지 않습니다.

umbergerba · 2월 8, 2022, 5:01오후

참고로 버그 >>> 다음 내용을 추가하면 … “Community, Tags List, /tags, self, List of all Tags” … 프론트엔드에 수평선이 표시됩니다. "Tags List"의 [공백]을 제거하고 "TagsList"로 변경하면 수평선이 사라집니다.

mkschulze · 2월 12, 2022, 10:14오전

안녕하세요, 소셜 링크와 Fontawesome 아이콘에 대해 두 가지 문제가 있습니다.

소셜 영역에 다른 Fontawesome 5 아이콘을 설정하려고 했지만, 아이콘이 표시되지 않습니다.
<i class="fad fa-home"></i>를 사용하려고 합니다.
GitHub 링크를 설정했는데, 실제로 svg-icons 목록에 아이콘을 추가하지 않았음에도 이미 페이지에 아이콘이 표시됩니다.

수정: 아이콘 이름 "home"을 그대로 사용하여 해결했습니다.

AquaL1te · 5월 7, 2022, 4:58오후

이 테마 컴포넌트를 휴대폰에서 사용할 때, 폭이 화면 폭으로 설정되지 않습니다. 폭이 거의 데스크톱 모니터 크기로 확장됩니다.

다음에서 테스트할 수 있습니다: https://forum.tzm.community/

반드시 휴대폰에서 열거나(또는 브라우저의 디버그 옵션을 사용하세요. Firefox에서는 Galaxy Note 20 Linux 프로필을 사용하여 버그를 재현할 수 있습니다).

dax · 5월 11, 2022, 7:43오후

컴포넌트가 수정되었습니다. 업데이트가 필요합니다.

글		댓글	조회수
FKB Pro - Social theme Theme	499	42625	10월 15, 2026
Custom Header Links (icons) Theme component official , custom-header-icons	117	33497	8월 4, 2025
Custom Header Links Theme component official , custom-header-links	69	54517	6월 6, 2026
Discourse Category Headers theme component Theme component	191	20407	3월 7, 2026
⬇️ Dropdown Header Theme component pavilion	69	8646	3월 2, 2026

Easy Responsive Footer

Features

Settings

Notes

Related topics