Einfach responsiver Footer

[Discourse]

	Zusammenfassung	Easy Responsive Footer ermöglicht es Ihnen, einen vollständig responsiven Footer ausschließlich mit normalem Text zu erstellen.
	Vorschau	Vorschau im Discourse Theme Creator
	Link zum Repository	https://github.com/discourse/Discourse-easy-footer
	Neu bei Discourse-Themen?	Anfängerleitfaden zur Verwendung von Discourse-Themen

Dieses Theme-Komponente installieren

Da dies eine #offizielle Theme-Komponente ist, die vom Discourse-Team gepflegt wird, können Support, Contribute > Bug, Contribute > UX und #contribute:feature-Anfragen in den jeweiligen Kategorien hier auf Meta gestellt und mit dem entsprechenden Theme-Komponenten-Tag versehen werden. Klicken Sie auf einen der untenstehenden Links, um einen neuen Beitrag zu starten.

 Support  Fehler  UX  Funktion

Funktionen

Desktop

Mobil

Einstellungen

Name	Beschreibung
heading	Text für die Überschrift im Footer – Sie können beispielsweise Ihren Seitennamen verwenden – Maximale Länge: 25 Zeichen
blurb	Geben Sie einen kurzen Text über Ihre Community ein – Maximale Länge: 180 Zeichen
sections	Im Footer anzuzeigende Sektionen
small links	Kleine Links am unteren Rand des Footers, wie Nutzungsbedingungen und Datenschutz
social links	Soziale Links, die Sie zum Footer hinzufügen möchten
show footer on login required page	Aktivieren Sie diese Einstellung, wenn der Footer auf der Seite für angemeldete Benutzer angezeigt werden soll (gilt nur, wenn Ihre Seite privat ist)
svg icons	Liste der in der oben genannten Einstellung für soziale Links verwendeten FontAwesome-7-Icons.

Diese Komponente verfügt über sechs Einstellungen, die Ihnen bei der einfachen Konfiguration helfen.

1. Überschrift

Text für die Überschrift im Footer – Sie können beispielsweise Ihren Seitennamen verwenden – Maximale Länge: 25 Zeichen

2. Kurzer Text

Ein kurzer Text über Ihre Community – Maximale Länge: 180 Zeichen

3. Link-Sektionen

Fügen Sie Link-Sektionen hinzu. Die ideale Anzahl von Sektionen beträgt sechs. Ein Element pro Zeile in dieser Reihenfolge: Text, Titel
Text: Was im Footer angezeigt wird
Titel: Der Text, der beim Überfahren des Elements angezeigt wird.

4. Links

Fügen Sie Links zu den Link-Sektionen hinzu. Ein Element pro Zeile in dieser Reihenfolge:
Eltern, Text, URL, Ziel, Titel
Es ist ratsam, die Anzahl der Links unter jeder Sektion ähnlich zu halten
Eltern: Der Name der übergeordneten Sektion, unter der dieser Link angezeigt wird. Verwenden Sie den text-Wert aus der Liste oben
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 gleichen Tab geöffnet wird. Verwenden Sie blank, um den Link in einem neuen Tab zu öffnen, oder self, um ihn im gleichen Tab zu öffnen.
Titel: Der Text, der beim Überfahren des Links angezeigt wird.

5. Kleine Links

Sie können kleine Links am unteren Rand des Footers 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, oder self, um ihn im gleichen Tab zu öffnen

6. Soziale Links

Geben Sie die sozialen Links, die Sie zum Footer hinzufügen möchten, in folgendem Format ein:
Anbieter, Titel, URL, Ziel
Anbieter: Der Name des Anbieters, z. B. Facebook oder Twitter
Titel: Der Text, der beim Überfahren des Links angezeigt wird
URL: Der Pfad, den der Link haben soll
Ziel: Verwenden Sie blank, um den Link in einem neuen Tab zu öffnen, oder self, um ihn im gleichen Tab zu öffnen

Hinweise

1. Ich habe die Platzhalter-Elemente als Standardwerte für die Komponente belassen, damit Sie leicht erkennen 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. Alle Elemente verfügen jedoch über eindeutige Klassen, falls Sie etwas überschreiben möchten.

3. Da diese Komponente Theme-Einstellungen verwendet, kann ich sie in Zukunft aktualisieren, um Fehler zu beheben oder Verbesserungen vorzunehmen, ohne dass die von Ihnen eingegebenen Daten verloren gehen

Von uns gehostet? Theme-Komponenten können in unseren Pro-, Business- und Enterprise-Plänen verwendet werden.

[Johani (Joe)]

Ich habe einige Fehlerbehebungen vorgenommen.

Wichtige Änderungen:

• Die Komponente verwendet nun CSS-Variablen, sodass sie mit dem Dark-Mode kompatibel ist

• Einige Korrekturen an Media Queries, um den von @mbauman gemeldeten Fehler zu beheben

• Eine Einstellung hinzugefügt, mit der Sie steuern können, ob der Footer auf Seiten mit Anmeldepflicht angezeigt wird

  

https://github.com/discourse/Discourse-easy-footer/commit/a694b1ba8e31d5b24b2d0fd8e2b6190bf987527b

@rolando

Ich habe meine .wrap mit Media Queries breiter gemacht (1200 px), sodass das Forum nach einer bestimmten Auflösung breiter wird. Wenn ich den responsiven Footer aktiviere, wird die .wrap schmaler (1100 px), aber nur der „Board-Teil" und nicht die .d-header .wrap noch die .footer, die beide bei (1200 px) bleiben. Sobald ich den responsiven Footer deaktiviere, sieht alles wieder so breit aus (1200 px), wie beabsichtigt.

Die Ursache hierfür ist die CSS-Spezifität. Ihr CSS zielt auf .wrap ab und funktioniert, aber diese Komponente enthält auch CSS, das auf #main-outlet abzielt und einige Eigenschaften hinzufügt, um den Footer auch auf kurzen Seiten unten zu halten.

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

Der Selektor #main-outlet ist spezifischer als Ihr Selektor .wrap, da er auf einer ID basiert, und überschreibt daher Ihre Stile.

Sie können dies beheben, indem Sie folgendes CSS hinzufügen:

#main {
  #main-outlet {
    width: 1200px; // oder die gewünschte Breite
  }
}

@Edward_Legaspi

Hallo. Gibt es eine Möglichkeit, die Anzahl der Footer-Spalten auf 3 zu begrenzen?

Ja, entfernen Sie einfach alle zusätzlichen Spalten, die Sie in den Einstellungen nicht benötigen, und Sie erhalten drei Spalten.

@PoojaPatel

Nach dem Update tritt in der Chrome-Konsole der folgende Fehler auf.

Ich kann dieses Problem nicht reproduzieren, aber der Fehler deutet darauf hin, dass Ihre Einstellungen nicht korrekt sind. Bitte überprüfen Sie dies noch einmal und stellen Sie sicher, dass Sie die Anweisungen unter jeder Einstellung befolgt haben. Wenn Ihr Problem weiterhin besteht, teilen Sie bitte einen Link zur Website mit, auf der Sie das Problem sehen.

---

Ich habe etwas Aufräumarbeit geleistet und die Antworten zu Fehlern gelöscht, die behoben werden, sobald Sie die Komponente aktualisieren. Wenn Ihr Problem weiterhin besteht, können Sie gerne erneut darüber posten.

[dadberg (Interstellar)]

Ich frage mich, ob der Header-Text (This is a header) innerhalb von [Easy Footer Theme Component by Joe] durch ein Logo ersetzt werden kann.

Ich habe versucht, die Komponente zu exportieren, um die HBS-Dateien zu ändern, aber es ist mir nicht gelungen. Ich denke, ich brauche ein paar Hinweise.

Jeder Hinweis wird sehr geschätzt

[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)]

Gelöst!

Mein Glaube an das Open-Source-Ökosystem wurde anfangs durch großartige Menschen wie dich gestärkt.

[Jcava5 (John)]

Es sollte eine Option geben, um die Farben von Hintergrund und Text mit CSS anzupassen. Standardmäßig passt es nicht zum Header.

Ansonsten funktioniert es großartig! Danke!

[thaidb]

Hallo Joe, können wir hier noch ein Widget hinzufügen?

[b481]

Dies hat dazu geführt, dass das Logo im blurb:before der Suchergebnisse erscheint, obwohl ich dies in der Komponente wie folgt festgelegt habe:

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

Gibt es eine Möglichkeit, sicherzustellen, dass es in den Suchergebnissen nicht angezeigt wird, aber weiterhin im Footer erscheint?

[littleviolette]

Vielen Dank für den tollen Footer! Ich habe ein Problem damit, das TikTok-Logo von Font Awesome anzuzeigen. Ich habe versucht, fab-tiktok, fa-tiktok, fas-tiktok und tiktok in die SVG-Icons-Einstellung aufzunehmen, aber keines davon zeigt das TikTok-Logo an.

Vielen Dank für deine Hilfe!

[bekircem]

Ich möchte das Limit von 25 Zeichen für den Titel ändern. Ich werde den Titel per CSS platzieren. Wie ist der einfachste Weg, das zu tun?

[keegan (Keegan George)]

@bekircem
Das Überschreiten des Zeichenlimits kann einige Dinge beeinträchtigen, aber du kannst Folgendes versuchen:

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

.custom-footer .first-box .heading::after {
   content: "Dies ist etwas, das länger als 25 Zeichen ist";
   visibility: visible;
   display: block;
}

visibility: hidden lässt jedoch weiterhin den Leerraum erhalten. Je nach Größe deines Titels kannst du stattdessen Folgendes versuchen:

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

.custom-footer .first-box .heading::after {
   content: "Dies ist etwas, das länger als 25 Zeichen ist";
   visibility: visible;
   display: block;
   position: absolute;
   top: 0;
}

[bekircem]

Ist es möglich, Texte zu Linkbereichen ohne href-Attribut hinzuzufügen?

[IAmGav (Gavin Perch)]

Füge einfach ein # dort ein, wo die URL steht.

[bekircem]

In diesem Fall wird es immer noch als anklickbare URL angezeigt. Gibt es eine Möglichkeit, dies hinzuzufügen, ohne das -Tag zu verwenden?

[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.