Mise à jour a changé les bannières de section individuelles en les réduisant énormément, comment revenir en arrière ?

Soutien
1

Après la mise à jour vers la dernière version il y a 20 minutes, toutes les bannières des sections individuelles ont été reléguées dans une sorte de boîte étrange et réduites à une taille impossiblement petite. S’il y avait aussi du texte, le texte est d’une taille lisible à côté (bien que cela ait également été redessiné). Je n’ai modifié aucun paramètre autre que la mise à niveau

Screenshot 2025-08-08 042512
Screenshot 2025-08-08 0425121179×121 2.09 KB

En regardant dans les paramètres maintenant, il est indiqué qu’il faut un rapport d’aspect de 1:1. Était-ce toujours ce qui était « recommandé » ou est-ce un changement ? J’ai l’impression que ce n’est pas ce qui était dit, mais je ne sais pas. Ce n’était certainement pas obligatoire. Parce que toutes les miennes correspondent à celle du site principal qui est résolument conçue pour être rectangulaire. C’est un changement plutôt déroutant à imposer, j’en ai créé environ 40 uniques individuellement.

2

Que voulez-vous dire par « bannières de section individuelles » ?

3

« Logos de catégorie » chaque tableau en a un. Ce site a une boîte rose géante qui dit support

4

Avez-vous un problème avec le composant de bannière de catégorie (celui qui utilise la couleur de la catégorie, comme le support ici sur Meta) ou avec la description et l’image de la catégorie qui sont affichées par le cœur de Discourse lorsque vous téléchargez une image de catégorie ?

screenshot showing both banners
screenshot showing both banners1777×979 158 KB

Avez-vous essayé le mode sans échec ?

1 « J'aime »
5

Les en-têtes de catégorie ont été récemment redessinés, UX: Category header restyle by jordanvidrine · Pull Request #34081 · discourse/discourse · GitHub

Vous pouvez modifier la taille de l’image avec du CSS, peut-être que quelque chose comme ceci vous aidera :

.category-heading__logo.category-logo.aspect-image {
  width: auto;
  height: 100px; 
}
3 « J'aime »
6

Cela n’a rien à voir avec ce que j’ai fait, quelque chose a été modifié dans le cœur du système avec l’une des dernières mises à jour, je n’utilise aucun plugin. La conception entière a été modifiée. Je ne sais pas comment mieux l’expliquer et je n’ai pas de capture d’écran de l’ancien style, mais quiconque a vu les deux saura ce que je demande. Le rapport du logo a été entièrement modifié, la façon dont le texte apparaît est différente, il est maintenant encadré dans une boîte. Cela a complètement détruit la façon dont nous l’avions configuré en utilisant les options par défaut.

Edit : Vous pouvez voir dans les captures d’écran publiées dans le lien ci-dessus UX: Category header restyle by jordanvidrine · Pull Request #34081 · discourse/discourse · GitHub l’ancien style était à gauche, sauf qu’un rapport 1:1 n’était pas requis (ou demandé) pour le logo et tout le format était différent. Il a maintenant forcé tous les logos dans un carré réduit et reformate le tout, faisant du texte la caractéristique dominante, ce qui a détruit tous nos logos pour nous.

Ce ne serait pas un problème si cela disait initialement d’utiliser un rapport 1:1, ce n’est pas le cas, nous avons donc créé des versions individuelles de l’image de bannière principale (et non du logo carré) en conservant la même forme et le même design, pour chaque section.

Cela semble fonctionner, je devrai juste jouer avec la taille, merci !

Edit : Cela ne fonctionne pas sur mobile car cela pousse le texte hors de la boîte et étire la page horizontalement. J’ai corrigé cela avec

@media (max-width: 768px) {
  .category-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.3em; /* Ajoute un espacement minimal entre le logo et le texte */
  }

  .category-heading__logo.category-logo.aspect-image {
    height: 140px;
    width: auto;
    margin-bottom: 0; /* Supprime l'espacement supplémentaire */
  }

  .category-heading__title {
    font-size: 1.4em;
    margin-top: 0; /* Empêche l'espacement supplémentaire au-dessus du texte */
  }
}

Cela pousse le texte sous le logo. Si quelqu’un d’autre en a besoin…

2 « J'aime »