Easy Responsive Footer

[Discourse]

|||
-|-|-|
| Résumé | Easy Responsive Footer vous permettra de créer un pied de page entièrement réactif en utilisant uniquement du texte brut.
| | Aperçu | Aperçu sur le créateur de thèmes Discourse |
| Lien vers le dépôt | \u003chttps://github.com/discourse/Discourse-easy-footer\u003e
|Nouveau sur les thèmes Discourse ? | Guide pour débutants sur l’utilisation des thèmes Discourse

Installer ce composant de thème

Comme il s’agit d’un composant de thème #officiel maintenu par l’équipe Discourse, les demandes de Support, de Bug, de UX et de Feature peuvent être faites dans les catégories respectives ici sur Meta, et taguées avec le tag approprié du composant de thème. Cliquez sur un lien ci-dessous pour en créer une.

\u003ckbd\u003e \u0026nbsp;Support \u003c/kbd\u003e \u003ckbd\u003e \u0026nbsp;Bug \u003c/kbd\u003e \u003ckbd\u003e \u0026nbsp;UX \u003c/kbd\u003e \u003ckbd\u003e \u0026nbsp;Fonctionnalité\u003c/kbd\u003e

Fonctionnalités

Ordinateur

Mobile

Paramètres

Nom	Description
heading	Texte pour le titre du pied de page - vous pouvez utiliser le nom de votre site par exemple - Longueur max 25 caractères
blurb	Entrez une courte description de votre communauté - Longueur max 180 caractères
sections	Sections à afficher dans le pied de page
liens sociaux	Liens sociaux que vous souhaitez ajouter au pied de page
show footer on login required page	Cochez ce paramètre si vous souhaitez que le pied de page soit affiché sur la page de connexion requise (s’applique uniquement si votre site est privé)
svg icons	Liste des icônes FontAwesome 5 utilisées dans le paramètre de liens sociaux ci-dessus.

Il y a six paramètres dans ce composant qui vous aideront à le configurer facilement

1. Titre

Texte pour le titre du pied de page - vous pouvez utiliser le nom de votre site par exemple - Longueur max 25 caractères

2. Description

une courte description de votre communauté - Longueur max 180 caractères

3. Sections de liens

Ajoutez des sections de liens. Le nombre idéal de sections est de six. Un élément par ligne dans cet ordre : Texte, titre
Texte : ce qui apparaît dans le pied de page
Titre : le texte qui apparaît lorsque l’élément est survolé.

4. Liens

Ajoutez des liens aux sections de liens. Un élément par ligne dans cet ordre :
Parent, texte, URL, cible, titre
Il est conseillé de garder le nombre de liens sous chaque section similaire
Parent : le nom de la section parente sous laquelle ce lien s’affiche. Utilisez la valeur texte de la liste ci-dessus
Texte : le texte qui s’affiche pour ce lien
URL : le chemin vers lequel cet élément mène. Vous pouvez également utiliser des chemins relatifs.
Cible : Choisissez si cet élément s’ouvrira dans un nouvel onglet ou dans le même onglet. Utilisez blank pour ouvrir le lien dans un nouvel onglet, ou self pour l’ouvrir dans le même onglet.
Titre : le texte qui s’affiche lorsque le lien est survolé.

5. Petits liens

Vous pouvez ajouter de petits liens en bas du pied de page comme les Conditions d’utilisation et la Confidentialité. Un élément par ligne dans cet ordre :
Texte, URL, cible
Texte : Le texte qui s’affiche pour le petit lien
URL : Le chemin du lien
Cible : Utilisez blank pour ouvrir le lien dans un nouvel onglet et self pour l’ouvrir dans le même onglet

6. Liens sociaux

Entrez les liens sociaux que vous souhaitez ajouter au pied de page dans ce format :
fournisseur, titre, URL, cible
Fournisseur : est le nom du fournisseur comme Facebook ou Twitter
Titre : Le texte qui s’affiche lorsque le lien est survolé
URL : Le chemin que vous souhaitez que le lien ait
Cible : Utilisez blank pour ouvrir le lien dans un nouvel onglet et self pour l’ouvrir dans le même onglet

Notes

1. J’ai laissé les éléments de substitution par défaut pour le composant afin que vous puissiez facilement voir à quoi devraient ressembler vos paramètres.

2. Ce composant utilisera le schéma de couleurs de votre thème pour générer les couleurs utilisées pour ses éléments. mais tous les éléments ont des classes uniques ajoutées au cas où vous voudriez remplacer quelque chose.

3. Puisque ce composant utilise les paramètres du thème, cela signifie que je peux le mettre à jour à l’avenir pour le corriger ou l’améliorer et les données que vous entrez ne seraient pas perdues

\u003cbr\u003e

\u003e:discourse2: Hébergé par nous ? Les composants de thème sont disponibles pour une utilisation sur nos plans Pro, Business et Enterprise.

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

Selon ce que vous souhaitez faire, vous pouvez simplement essayer ceci :

• dans les paramètres du thème Easy responsive footer, supprimez le texte à l’intérieur du paramètre Blurb. Si vous le souhaitez, vous pouvez même supprimer le texte à l’intérieur du paramètre Heading.

• créez un nouveau composant de thème et ajoutez dans l’onglet Common > CSS

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

et le résultat sera quelque chose comme ceci :

[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

Y a-t-il un moyen d’ajouter sans obtenir la balise a ?

Vous pouvez ajouter ce CSS à votre thème quelque part

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

[pfaffman (Jay Pfaffman)]

J’ai soumis ceci :

Fix: add pluginId to modifyClass

Cela devrait corriger une dépréciation avec un pluginId manquant. Je ne l’ai pas testé , mais cela me semble correct.

EDIT : Mais ce n’est pas du tout correct.

[umbergerba (B.A. Umberger)]

FYI BUG >>> Si j’ajoute ce qui suit… « Community, Tags List, /tags, self, List of all Tags »… une ligne horizontale s’affiche sur le frontend. Si je supprime l’espace entre « Tags List » et que je le change en « TagsList », la ligne horizontale disparaît.

[mkschulze (M. Schulze)]

Bonjour, j’ai deux problèmes avec les liens sociaux et les icônes Fontawesome.

1. J’essaie de configurer d’autres icônes Fontawesome 5 dans la zone Social, mais elles n’apparaissent pas.
   Je veux <i class="fad fa-home"></i>

2. J’ai configuré le lien GitHub et il affiche déjà l’icône sur la page, bien que je n’aie pas réellement ajouté l’icône dans la liste des icônes svg.

EDIT : J’ai résolu le problème en utilisant simplement le nom de l’icône “home”

[AquaL1te]

Lorsque j’utilise ce composant de thème sur mon téléphone, la largeur n’est pas définie sur la largeur de l’écran. La largeur s’étend, presque à la taille d’un moniteur de bureau.

Les tests peuvent être effectués ici : https://forum.tzm.community/

Assurez-vous de l’ouvrir sur un téléphone (ou utilisez l’option de débogage dans votre navigateur, dans Firefox, vous pouvez déclencher le bug en utilisant le profil Linux Galaxy Note 20).

[dax (Daniela)]

Le composant a été corrigé. Vous devez le mettre à jour.