Bannières de catégorie

Peut être corrigé avec du CSS

Créez un nouveau Theme component ajoutez ceci au CSS commun

// Who's Online Customization
.discovery-list-container-top-outlet.online_users_widget {
      margin-top: 0.75em;
      margin-bottom: 0.75em;
      padding-top: 0.5em
      padding-bottom: 0.5em;
}

Vous pouvez également ajouter une couleur de fond personnalisée, des bordures, etc.

3 « J'aime »

Merci beaucoup !

2 « J'aime »

Optionnellement, si vous souhaitez mettre cela en évidence comme ceci

Utilisez ce code à la place

// Personnalisation de Qui est en ligne
.discovery-list-container-top-outlet.online_users_widget {
      padding-top: 0.45em;
      padding-bottom: 0.05em;
      background-color: var(--secondary);
      border: 2.0px solid rgba(var(--primary-rgb), 0.2);
      border-radius: 0.65em;
      margin-top: 0.75em
      margin-bottom: 0.75em;
}
  • La marge ajuste l’espace au-dessus et en dessous de « Qui est en ligne »
  • Le rembourrage augmente l’espace à l’intérieur de la boîte de bordure. La bordure ajuste l’épaisseur du contour de la bordure.
2 « J'aime »

Hors sujet, mais quelle paire de polices de caractères est-ce @bekircem ? J’adore la façon dont elles fonctionnent ensemble !

1 « J'aime »

J’ai une petite demande de fonctionnalité qui, je pense, apporterait une grande amélioration à ce composant. J’aimerais avoir un lien « Lire la suite… » qui renverrait à la description de la catégorie. Une solution très élégante pour avoir une description longue sans encombrer la page de la catégorie. Je peux ajouter ce lien manuellement, mais il apparaît alors sur la page des Catégories, ce qui n’est pas très propre.

3 « J'aime »

Il manque un ; à la ligne 5 de ce code, ainsi que l’exemple qui suit.

Ce qui a fonctionné pour moi est ceci :

.discovery-list-container-top-outlet.online_users_widget {
  margin-top: 0.75em !important;
  margin-bottom: 0.75em !important;
  display: block !important;
}

Résultat :

3 « J'aime »

Génial. Malheureusement, mon message est trop ancien pour que je puisse corriger le code. Merci de m’avoir fait savoir que j’avais oublié le « ; »

3 « J'aime »

Il y a le même problème pour les liens des tags et des catégories. Pourriez-vous inclure la classe .hashtag-cooked dans cette correction ?

Pour une raison quelconque, cela ne fonctionne pas correctement pour moi.
Certaines catégories et sous-catégories affichent la bannière, d’autres non.
Ce n’est pas la description (ou son absence), car certaines ont une description et elle ne s’affiche pas.

Je ne sais pas si la nouvelle mise à jour de Discourse a cassé quelque chose ?

Avez-vous défini les ID des catégories dans le paramètre categories ?

1 « J'aime »

Oui, je les ai ajoutés dans l’éditeur de paramètres d’objets.
Je pense qu’il y a une sorte de bug lié à l’option de le masquer lorsqu’il n’y a pas de description.

Je vais effectuer quelques tests supplémentaires et voir comment cela se passe.

J’ai remarqué un bug.
Je suis dans la catégorie parente Tiago | Music et je clique sur la sous-catégorie Sir Giant. La bannière s’affiche. Ensuite, je clique sur l’un des liens de “documentation” dans la barre latérale pour aller sur une page de tags Announcements. Lorsque je clique sur le lien General Discussion qui me ramène à la racine de la sous-catégorie Sir Giant, la bannière a disparu.

La première fois que je suis allé sur Announcements, pas de bannière. Quand je vais sur la page de tags Music puis de retour sur Announcements, la bannière est maintenant visible.

J’ai aussi remarqué quelque chose : si je suis sur la page Announcements et que je ne vois pas de bannière, si je clique à nouveau sur le même lien (Announcements), la bannière s’affiche, ce qui est clairement un bug.

3 « J'aime »

2 problèmes supplémentaires :

1 - Je suis sur une catégorie avec une description. Je vois la description dans la bannière. Cette description contient un lien externe vers ma boutique en ligne. Lorsque je clique dessus, même si j’ai le réglage pour ouvrir tous les liens externes dans un nouvel onglet, ce lien s’ouvre dans le même onglet. Et je peux confirmer que le réglage fonctionne, car le sujet lui-même qui définit la description de la bannière, ouvre le lien dans un nouvel onglet.

2 - Maintenant, lorsque je suis sur le site web de ce lien externe (qui s’est ouvert dans le même onglet), je dois appuyer sur Retour dans le navigateur pour revenir à la sous-catégorie. Cette fois, la description a complètement disparu. La bannière et son titre sont là, mais aucune description. Même si je rafraîchis et force le rafraîchissement du navigateur, elle ne revient pas. La seule façon de la revoir est de revenir à la catégorie principale, puis à la sous-catégorie à nouveau.


EDIT : Ok, j’ai trouvé quelque chose. Je ne sais pas ce qui se passe en coulisses, bien sûr, mais l’option rouge cause le problème. L’option verte fonctionne comme prévu (toujours à l’écran, peu importe où je clique, pas besoin de double-cliquer sur un menu latéral pour que la bannière revienne) :

3 « J'aime »

Je peux reproduire votre problème, mais je ne peux pas l’expliquer. :sweat_smile:

Techniquement (ignorez-moi), voici ce que j’observe avec cet élément header-list-container-bottom :

  • Si vous sélectionnez une sous-catégorie → une balise, le composant est inséré, et immédiatement après teardownComponent est appelé (?). Mais le composant n’est pas détruit. Avec la classe category-header retirée de \u003cbody\u003e depuis la fonction de nettoyage, certains CSS masquent la bannière. Vous pouvez sélectionner une autre balise pour réinsérer le composant.

    • Depuis la même page, si vous cliquez sur un lien de documentation dans la barre latérale, vous obtenez le même comportement.
    • Cela n’arrive pas si vous sélectionnez une catégorie dans la liste déroulante, par exemple.

C’est déroutant pourquoi, après avoir été inséré, will-destroy est appelé immédiatement.

2 « J'aime »

Eh bien, au moins je sais que je ne suis pas le seul… c’est une bonne chose.

Même si je ne voulais pas, je n’ai aucune idée de ce dont vous parlez dans votre explication haha Mais c’est bien que vous sachiez que quelque chose qui devrait fonctionner d’une certaine manière ne fonctionne pas. C’est probablement un pas dans la bonne direction pour le corriger.

Donc le problème semble être avec l’emplacement de la bannière, car comme je l’ai dit, l’une des options (au moins, car je n’ai pas essayé les deux autres) fonctionne.

1 « J'aime »

Lorsque je sélectionne ‘Afficher le logo de la catégorie’, le logo apparaît deux fois - une fois à partir du paramètre de la catégorie et une autre fois à partir de ce composant du thème. Est-ce que je fais une erreur ?

De plus, est-il possible de faire apparaître le titre et/ou la description ‘à propos’ en dessous du logo ?

Non, c’est un bug connu. Il y a aussi du CSS que vous pouvez ajouter pour masquer un logo dans ce sujet

Merci, Moin ! Le CSS a corrigé l’image pour moi.

Pour mettre le nom de la catégorie en dessous de l’image, cela a fonctionné pour moi :

.category-title-contents,
.category-title-header.category-banner-1slug .category-title-contents {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;}
.category-logo,
.category-title-header.category-banner-1slug .category-logo {
    width: 100%;
    margin-bottom: 10px;
    margin-right: 0;}
.category-title,
.category-title-header.category-banner-1slug .category-title {
    width: 100%;
    margin-top: 20px;
    text-align: left;}

Salut ! Quelqu’un peut peut-être m’aider à résoudre un problème assez étrange qui est survenu tout d’un coup.

Tous les titres des bannières étaient blancs, mais maintenant ils sont passés au noir et seulement dans certaines catégories… Est-ce un bug connu, ou devrais-je peut-être vérifier quelque chose de mon côté ?

Par ex :

Le lien vers notre communauté, au cas où : https://community.elfsight.com/

1 « J'aime »