Easy Responsive Footer

[Discourse]

|||
-|-|-|
| Zusammenfassung | Easy Responsive Footer ermöglicht es Ihnen, eine vollständig responsive Fußzeile nur mit einfachem Text zu erstellen.
| | Vorschau | Vorschau im Discourse Theme Creator |
| Repository-Link | \u003chttps://github.com/discourse/Discourse-easy-footer\u003e
|Neu bei Discourse Themes? | Anfängerleitfaden zur Verwendung von Discourse Themes

Installieren Sie diese Theme-Komponente

Da dies eine #offizielle Theme-Komponente ist, die vom Discourse-Team gepflegt wird, können Support, Bug, UX und #feature-Anfragen in den entsprechenden Kategorien hier auf Meta gestellt und mit dem entsprechenden Tag für die Theme-Komponente versehen werden. Klicken Sie auf einen der folgenden Links, um eine zu starten.

\u003ckbd\u003e \u0026nbsp;Support \u003c/kbd\u003e \u003ckbd\u003e \u0026nbsp;Bug \u003c/kbd\u003e \u003ckbd\u003e \u0026nbsp;UX \u003c/kbd\u003e \u003ckbd\u003e \u0026nbsp;Feature\u003c/kbd\u003e

Funktionen

Desktop

Mobile

Einstellungen

Name	Beschreibung
heading	Text für die Überschrift in der Fußzeile – Sie können zum Beispiel Ihren Website-Namen verwenden – Maximale Länge 25 Zeichen
blurb	Geben Sie eine kurze Beschreibung Ihrer Community ein – Maximale Länge 180 Zeichen
sections	Abschnitte, die in der Fußzeile angezeigt werden sollen
social links	Social-Media-Links, die Sie zur Fußzeile hinzufügen möchten
show footer on login required page	Aktivieren Sie diese Einstellung, wenn die Fußzeile auf der Seite mit Anmeldeerfordernis angezeigt werden soll (gilt nur, wenn Ihre Website privat ist)
svg icons	Liste der FontAwesome 5-Icons, die im obigen Feld für Social-Media-Links verwendet werden.

Es gibt sechs Einstellungen in dieser Komponente, die Ihnen bei der einfachen Konfiguration helfen

1. Überschrift

Text für die Überschrift in der Fußzeile – Sie können zum Beispiel Ihren Website-Namen verwenden – Maximale Länge 25 Zeichen

2. Kurzbeschreibung

eine kurze Beschreibung Ihrer Community – Maximale Länge 180 Zeichen

3. Link-Abschnitte

Fügen Sie Link-Abschnitte hinzu. Die ideale Anzahl von Abschnitten ist sechs. Ein Element pro Zeile in dieser Reihenfolge: Text, Titel
Text: was in der Fußzeile angezeigt wird
Titel: der Text, der angezeigt wird, wenn mit der Maus über das Element gefahren wird.

4. Links

Fügen Sie Links zu Link-Abschnitten hinzu. Ein Element pro Zeile in dieser Reihenfolge:
Übergeordnet, Text, URL, Ziel, Titel
Es ist ratsam, die Anzahl der Links unter jedem Abschnitt ähnlich zu halten
Übergeordnet: der Name des übergeordneten Abschnitts, unter dem dieser Link angezeigt wird. Verwenden Sie den Wert text aus der obigen Liste
Text: der Text, der für diesen Link angezeigt wird
URL: der Pfad, zu dem dieses Element verlinkt. Sie können auch relative Pfade verwenden.
Ziel: Wählen Sie, ob dieses Element in einem neuen Tab oder im selben Tab geöffnet werden soll. Verwenden Sie blank, um den Link in einem neuen Tab zu öffnen, oder self, um ihn im selben Tab zu öffnen.
Titel: der Text, der angezeigt wird, wenn mit der Maus über den Link gefahren wird.

5. Kleine Links

Sie können kleine Links am unteren Rand der Fußzeile hinzufügen, wie z. B. Nutzungsbedingungen und Datenschutz. Ein Element pro Zeile in dieser Reihenfolge:
Text, URL, Ziel
Text: Der Text, der für den kleinen Link angezeigt wird
URL: Der Pfad des Links
Ziel: Verwenden Sie blank, um den Link in einem neuen Tab zu öffnen, und self, um ihn im selben Tab zu öffnen

6. Social-Media-Links

Geben Sie die Social-Media-Links, die Sie zur Fußzeile hinzufügen möchten, in diesem Format ein:
Anbieter, Titel, URL, Ziel
Anbieter: ist der Name des Anbieters wie Facebook oder Twitter
Titel: Der Text, der angezeigt wird, wenn mit der Maus über den Link gefahren wird
URL: Der Pfad, den der Link haben soll
Ziel: Verwenden Sie blank, um den Link in einem neuen Tab zu öffnen, und self, um ihn im selben Tab zu öffnen

Hinweise

1. Ich habe die Platzhalter als Standardwerte für die Komponente belassen, damit Sie leicht sehen können, wie Ihre Einstellungen aussehen sollten.

2. Diese Komponente verwendet das Farbschema Ihres Themes, um die Farben für die darin enthaltenen Elemente zu generieren. Aber alle Elemente haben eindeutige Klassen, falls Sie etwas überschreiben möchten.

3. Da diese Komponente Theme-Einstellungen verwendet, bedeutet dies, dass ich sie in Zukunft aktualisieren kann, um sie zu reparieren oder zu verbessern, und die von Ihnen eingegebenen Daten gehen nicht verloren

\u003cbr\u003e

\u003e:discourse2: Von uns gehostet? Theme-Komponenten sind für unsere Pro-, Business- und Enterprise-Pläne verfügbar.

[Johani (Joe)]

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

  

Easy Footer v2.3 (#7)

@rolando

i have made my .wrap wider (1200px) with media queries so that after a certain resolution it makes the forum wider. if i enable the responsive footer it makes the .wrap narrower (1100px) but only the “board part” and not the .d-header .wrap nor the .footer which stay at (1200px). as soon as i disable the responsive footer everything looks wider (1200px) as intended.

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

@Edward_Legaspi

Hi. Is there a way to limit the number of footer columns to 3?

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

@PoojaPatel

After update getting error in chrome console that as below.

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 (Interstellar)]

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 (Daniela)]

Je nachdem, was Sie tun möchten, können Sie einfach Folgendes versuchen:

• Löschen Sie in den Einstellungen des Easy responsive footer-Themes den Text innerhalb der Einstellung Blurb. Wenn Sie möchten, können Sie auch den Text innerhalb der Einstellung Heading löschen.

• Erstellen Sie eine neue Theme-Komponente und fügen Sie sie im Tab Common > CSS ein

  .custom-footer .first-box .blurb::before {
      background-image: url(LOGO-URL);
      background-repeat: no-repeat;
      display: inline-block;
      content: "";
      /*change the settings below based on the size of your logo*/
      background-size: 200px 200px;
      width: 200px;
      height: 200px;
  }
  

und das Ergebnis wird etwa so aussehen:

[dadberg (Interstellar)]

Solved!

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

[Jcava5 (John)]

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 (Sora &\)]

hello Joe, can weadd more widget same here

[b481]

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]

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]

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 (Keegan George)]

@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]

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

[IAmGav (Gavin Perch)]

Just add an # where the url goes

[bekircem]

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

[Johani (Joe)]

@bekircem

Gibt es eine Möglichkeit, etwas hinzuzufügen, ohne das a-Tag zu erhalten?

Sie können dies zu Ihrem Theme hinzufügen:

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

[pfaffman (Jay Pfaffman)]

Ich habe Folgendes eingereicht:

Fix: add pluginId to modifyClass

Das sollte eine Veralterung mit fehlender pluginId beheben. Ich habe es nicht getestet , aber es sieht für mich richtig aus.

EDIT: Aber es ist überhaupt nicht richtig.

[umbergerba (B.A. Umberger)]

FYI BUG >>> Wenn ich Folgendes hinzufüge … „Community, Tags List, /tags, self, List of all Tags“ … wird eine horizontale Linie im Frontend angezeigt. Wenn ich das Leerzeichen zwischen „Tags List“ entferne und es in „TagsList“ ändere, verschwindet die HR.

[mkschulze (M. Schulze)]

Hallo, ich habe zwei Probleme mit den sozialen Links und Fontawesome Icons.

1. Ich versuche, andere Fontawesome 5 Icons im Social-Bereich einzurichten, aber sie werden nicht angezeigt.
   Ich möchte <i>

2. Ich habe den GitHub-Link eingerichtet und er zeigt das Icon bereits auf der Seite an, obwohl ich das Icon eigentlich nicht in der Liste der svg-Icons hinzugefügt habe.

EDIT: Habe es gelöst, indem ich einfach den Icon-Namen “home” verwendet habe.

[AquaL1te]

Wenn ich diese Theme-Komponente auf meinem Handy benutze, ist die Breite nicht auf die Bildschirmbreite eingestellt. Die Breite erstreckt sich fast bis zur Größe eines Desktop-Monitors.

Tests können hier durchgeführt werden: https://forum.tzm.community/

Stellen Sie sicher, dass Sie es auf einem Handy öffnen (oder die Debug-Option in Ihrem Browser verwenden, in Firefox können Sie den Fehler auslösen, indem Sie das Galaxy Note 20 Linux-Profil verwenden).

[dax (Daniela)]

Die Komponente wurde repariert. Sie müssen sie aktualisieren.