Einfacher responsiver 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)]

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.