Easy Responsive Footer

Discourse · 2018 年 8 月 28 日午前 8:19

|||
-|-|-|
| 概要 | Easy Responsive Footer は、プレーンテキストのみを使用して完全にレスポンシブなフッターを構築できるようにします。
| | プレビュー | Discourse Theme Creatorでプレビュー |
| リポジトリリンク | \u003chttps://github.com/discourse/Discourse-easy-footer\u003e
|Discourseテーマ初心者ですか？ | Discourseテーマの使用方法に関する初心者ガイド

このテーマコンポーネントをインストール

機能

デスクトップ

モバイル

設定

名前	説明
heading	フッターの見出しのテキスト。サイト名などを使用できます。最大長25文字。
blurb	コミュニティに関する短い説明を入力してください。最大長180文字。
sections	フッターに表示するセクション。小さいリンク。
social links	フッターに追加したいソーシャルリンク。
show footer on login required page	サイトがプライベートな場合のみ、ログインが必要なページにフッターを表示したい場合は、この設定をチェックしてください。
svg icons	上記のソーシャルリンク設定で使用されるFontAwesome 5アイコンのリスト。

このコンポーネントには、簡単に設定できる6つの設定があります。

1. 見出し

フッターの見出しのテキスト。サイト名などを使用できます。最大長25文字。

2. 説明文

コミュニティに関する短い説明文。最大長180文字。

3. リンクセクション

リンクセクションを追加します。理想的なセクション数は6です。1行に1項目、次の順序で入力します：テキスト、タイトル
テキスト：フッターに表示されるもの
タイトル：項目にマウスを合わせたときに表示されるテキスト。

4. リンク

リンクセクションにリンクを追加します。1行に1項目、次の順序で入力します：
親、テキスト、URL、ターゲット、タイトル
各セクションのリンク数は似たような数に保つことをお勧めします。
親：このリンクが表示される親セクションの名前。上記のリストの text 値を使用します。
テキスト：このリンクに表示されるテキスト。
URL：この項目がリンクするパス。相対パスも使用できます。
ターゲット：この項目を新しいタブで開くか、同じタブで開くかを選択します。リンクを新しいタブで開くには blank を使用し、同じタブで開くには self を使用します。
タイトル：リンクにマウスを合わせたときに表示されるテキスト。

5. 小さいリンク

利用規約やプライバシーなどの小さいリンクをフッターの下部に追加できます。1行に1項目、次の順序で入力します：
テキスト、URL、ターゲット
テキスト：小さいリンクに表示されるテキスト。
URL：リンクのパス。
ターゲット：リンクを新しいタブで開くには blank を使用し、同じタブで開くには self を使用します。

6. ソーシャルリンク

フッターに追加したいソーシャルリンクを次の形式で入力します：
プロバイダー、タイトル、URL、ターゲット
プロバイダー：FacebookやTwitterなどのプロバイダー名です。
タイトル：リンクにマウスを合わせたときに表示されるテキスト。
URL：リンクのパス。
ターゲット：リンクを新しいタブで開くには blank を使用し、同じタブで開くには self を使用します。

注意事項

設定がどのように見えるかを簡単に確認できるように、プレースホルダー項目をコンポーネントのデフォルトとして残しました。
このコンポーネントはテーマのカラースキームを使用して、そこで使用される要素の色を生成しますが、すべての要素には一意のクラスが追加されているため、必要に応じて上書きできます。
このコンポーネントはテーマ設定を使用しているため、将来的に修正または改善するために更新でき、入力したデータは失われません

\u003cbr\u003e

\u003e:discourse2: 私たちによってホストされていますか？ テーマコンポーネントは、Pro、Business、Enterpriseプランで利用できます。

Johani · 2020 年 11 月 29 日午後 12:24

I pushed some fixes.

Key changes:

the component now uses CSS variables, so it’s dark-mode compatible
some fixes to media queries to fix the bug @mbauman reported
added a setting that allows you to control whether or not the footer is displayed on login-required pages

image1102×307 37.7 KB

The cause here is CSS specificity. Your CSS targets .wrap, and it works, but this component also has some CSS that targets #main-outlet and adds some properties to it to keep the footer at the bottom even on short pages.

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

The #main-outlet selector is more specific than your .wrap selector - because it’s id-based, so it overrides your styles.

You can fix this by adding this CSS

#main {
  #main-outlet {
    width: 1200px; // or whatever width you want to use
  }
}

Sure, remove all the extra columns that you don’t need in the settings, and you’ll get three columns.

I cannot reproduce this issue, but the error implies that your settings are incorrect. Can you double-check and make sure that you’ve followed the instructions under each setting? If your problem persists, can you share a link to the site you see the issue on?

I did a bit of cleaning up and deleted the replies for bugs that will be fixed once you update the component. If your issue persists, feel free to post about it again.

dadberg · 2021 年 2 月 9 日午前 11:41

I wonder if the header text (This is a header) within [Easy Footer Theme Component by Joe] can be replaced with logo.

I’ve tried exporting the component to alter hbs files, but I’ve failed, I think I need some hints.

Any insight is much appreciated

dax · 2021 年 2 月 9 日午後 1:17

やりたいことに応じて、次のようなことを試すことができます。

Easy responsive footer のテーマ設定で、「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 · 2021 年 2 月 9 日午後 1:43

Solved!

My belief in in the open source echo system is initially empowered by great people like you.

Jcava5 · 2021 年 4 月 2 日午前 12:02

There should be an option to customize the colors of the background and text with CSS. By default, it doesn’t match the header.

Otherwise it works great! Thanks!

huynhthai824 · 2021 年 4 月 2 日午前 8:10

hello Joe, can weadd more widget same here

b481 · 2021 年 5 月 4 日午前 9:43

This has resulted in the logo appearing in the blurb:before of search results, even after I specified this in the component

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

Is there any way to make sure it doesn’t appear in search results, but still appears in the footer?

littleviolette · 2021 年 8 月 28 日午後 5:42

Thank you for the awesome footer! I have been having issue showing the Tiktok logo from Font Awesome. I have tried adding fab-tiktok, fa-tiktok, fas-tiktok, tiktok to the svg icons setting, but none of them renders the tiktok logo.

Thank you for your help!

bekircem · 2021 年 9 月 14 日午後 10:29

I want to change the 25 character limit for the title. I will place the title with CSS. What is the easiest way to do this?

keegan · 2021 年 9 月 14 日午後 11:45

@bekircem
Going beyond the character limit may break some things, but you can try:

.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;
}

Doing visibility: hidden, however, will still keep the white-space. However, depending on how large your title will be you can try doing this instead:

.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 · 2021 年 10 月 20 日午後 10:20

Is that possible to add texts to link sections without href attribute?

IAmGav · 2021 年 10 月 20 日午後 10:50

Just add an # where the url goes

bekircem · 2021 年 10 月 20 日午後 10:52

In this case it still appears as a clickable url. Is there a way to add without getting the a tag?

Johani · 2021 年 12 月 9 日午前 10:51

テーマのどこかにこのCSSを追加できます

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

pfaffman · 2021 年 12 月 15 日午後 2:26

これを提出しました。

これにより、pluginId がないことによる非推奨の問題が修正されるはずです。テストはしていませんが、私には正しく見えます。

編集：しかし、全く正しくありませんでした。

umbergerba · 2022 年 2 月 8 日午後 5:01

FYI バグ >>> 次を追加すると…「Community, Tags List, /tags, self, List of all Tags」… フロントエンドに水平線が表示されます。「Tags List」の間の [スペース] を削除し、「TagsList」に変更すると、HR は消えます。

mkschulze · 2022 年 2 月 12 日午前 10:14

こんにちは。ソーシャルリンクとFontawesomeアイコンについて2つの問題があります。

ソーシャルエリアで他のFontawesome 5アイコンを設定しようとしましたが、表示されません。
<i> class="fad fa-home"></i> を使用したいです。
GitHubリンクを設定したところ、svg-iconsのリストに実際にはアイコンを追加していないのに、すでにページにアイコンが表示されています。

編集：アイコン名を「home」にするだけで解決しました

AquaL1te · 2022 年 5 月 7 日午後 4:58

このテーマコンポーネントを携帯電話で使用すると、幅が画面幅に設定されません。幅が拡張され、ほぼデスクトップモニターのサイズになります。

テストはここで実行できます：https://forum.tzm.community/

携帯電話で開くか（またはブラウザのデバッグオプションを使用してください。FirefoxではGalaxy Note 20 Linuxプロファイルを使用してバグをトリガーできます）。

dax · 2022 年 5 月 11 日午後 7:43

コンポーネントは修正されました。更新が必要です。

トピック		返信	表示
Custom Header Links (icons) Theme component official , custom-header-icons	119	31022	2025 年 8 月 4 日
FKB Pro - Social theme Theme	452	27793	2025 年 10 月 31 日
Custom Header Links Theme component official , custom-header-links	64	51374	2025 年 7 月 9 日
Discourse Category Headers theme component Theme component	177	16486	2025 年 11 月 1 日
⬇️ Dropdown Header Theme component pavilion	67	7060	2025 年 10 月 9 日

Easy Responsive Footer

機能

設定

注意事項

関連トピック