Pour ce que ça vaut, entrer en mode sans échec pour effectuer les actions groupées pourrait être une alternative à la désactivation du composant du thème pour tout le monde. Évidemment, c’est toujours une complication supplémentaire, mais potentiellement avec moins d’impact sur les autres ?
Oui, c’est ce que j’ai découvert après avoir appris le mode sans échec…
1 « J'aime »
Bonjour,
Merci pour votre composant ! Nous avons remarqué un problème lors de l’utilisation de votre composant sur le forum https://community.escapecollective.com/. Si vous cliquez sur le titre du sujet, le SPA se recharge (j’ai joint un gif avec ce problème), mais si vous cliquez sur la carte en dehors du titre, tout fonctionne correctement. Le problème a été découvert car le composant Guest Gate ne fonctionnait pas correctement en raison du rechargement de la page.
Voici une suggestion : Guest Gate Theme Component - #154 by Don
Pourriez-vous s’il vous plaît examiner ce problème ?
Merci,
Denis D.
2 « J'aime »
Il semble donc que quelque chose ait changé avec la dernière série de mises à jour de Discourse.
Seul le bord le plus à gauche de mes cartes de sujet respecte désormais ce CSS. J’ai essayé de trouver ce qui pourrait le corriger, mais jusqu’à présent, je n’ai pas réussi.
Quelqu’un d’autre peut-il confirmer et essayer de trouver les modifications nécessaires ?
Le problème est la variable récemment ajoutée pour la couleur d’arrière-plan des sujets que vous avez lus.
Je ne pense pas qu’il y ait un dev-news à propos de ce changement. Mais vous pouvez trouver quelques informations ici :
Existe-t-il un moyen de supprimer cette feuille de style CSS ? Cela a détruit l’apparence de mon site et, comme je ne suis pas du tout un codeur, je ne sais pas comment m’en sortir.
J’ai regardé dans l’inspecteur d’éléments et j’ai vu le mot « visited » sur tous les sujets cassés et j’ai vu qu’il manquait sur celui qui a toujours l’air correct.
Comment puis-je résoudre ce problème ?
Sujet que je n’ai pas encore visité (sans survol) :
Et avec un survol de souris :
Et les autres sont cassés.
Cela a été plus difficile à trouver que prévu. (Je suis tout à fait sûr que c’est dû à mes lacunes, mais quand même…)
Il semble que l’ajout de :
.topic-list-item-background-color--visited {
background: none
}
L’ait résolu sans aucun effet secondaire indésirable.
Dans vos styles, vous n’avez maintenant qu’à modifier ces deux variables :
--topic-list-item-background-color
--topic-list-item-background-color--visited
Donc, quelque chose comme ceci devrait fonctionner :
:root {
--topic-list-item-background-color: VOTRE COULEUR ICI ;
--topic-list-item-background-color--visited: VOTRE COULEUR ICI ;
}
Comment cela expliquerait-il les différences lors du passage entre la lumière et l’obscurité ?
Vous pouvez utiliser la fonction CSS light-dark()
--nom-de-la-variable : light-dark(#efedea, #223a2c);
Vous pouvez les définir tous les deux sur la même chose.
Rien n’a été fait pour :hover dans le cœur. Vous devrez simplement vous assurer de définir la variable sur ce que vous voulez lors du survol.
1 « J'aime »
Cela ne fonctionne toujours pas pour moi.
C’est ce qui fonctionnait à l’origine :
// Mélanger les couleurs des cartes de sujet avec le thème
@media (prefers-color-scheme: dark) {
.topic-card.has-max-height {
background: #223c44 !important;
}
.topic-card.has-max-height:hover {
background: #163d51 !important;
}
}
@media (prefers-color-scheme: light) {
.topic-card.has-max-height {
background: #e6ecf2 !important;
}
.topic-card.has-max-height:hover {
background: #ddecf7 !important;
}
}
Puis, après la dernière mise à jour, j’ai ajouté ceci, et cela semblait fonctionner, mais a ensuite cessé de fonctionner :
.topic-list-item-background-color--visited {
background: none
}
Ensuite, d’après ce que vous avez dit ici, j’ai essayé d’ajouter aux variables actuelles et de tout remplacer par ceci :
:root {
--topic-list-item-background-color: light-dark(#e6ecf2, #223c44);
--topic-list-item-background-color--visited: light-dark(#e6ecf2, #223c44);
--topic-list-item-background-color--hover: light-dark(#ddecf7, #163d51);
}
Il doit y avoir une autre variable que je dois couvrir pour hover-visited, car les fils non lus fonctionnent correctement, mais les fils visités sont cassés.
Cette variable n’existe pas.
.topic-card.has-max-height:hover {
--topic-list-item-background-color: AJOUTER UNE COULEUR ICI
--topic-list-item-background-color--visited: AJOUTER UNE COULEUR ICI
}
Ceci devrait être ce dont vous avez besoin, j’espère que cela vous aidera !
Ceci est le moins de lignes que j’ai pu trouver qui semble fonctionner correctement.
// Mélanger les couleurs des cartes de sujet avec le thème
.topic-card.has-max-height {
--topic-list-item-background-color: light-dark(#e6ecf2, #223c44);
--topic-list-item-background-color--visited: light-dark(none, none);
}
.topic-card.has-max-height:hover {
--topic-list-item-background-color: light-dark(#ddecf7, #163d51);
--topic-list-item-background-color--visited: light-dark(none, none);
}
@media (prefers-color-scheme: dark) {
.topic-card.has-max-height {
background: #223c44 !important;
}
.topic-card.has-max-height:hover {
background: #163d51 !important;
}
}
@media (prefers-color-scheme: light) {
.topic-card.has-max-height {
background: #e6ecf2 !important;
}
.topic-card.has-max-height:hover {
background: #ddecf7 !important;
}
}
J’ai créé une PR pour ce composant de thème avec deux ajouts :
Fonctionnalité : Commutateur de sujets suggérés
Ajoute le paramètre Afficher pour les sujets suggérés
Rend l’utilisation des cartes de sujets pour les sujets suggérés facultative (comme décrit dans cette demande de fonctionnalité)
Fonctionnalité : Limiter aux catégories
Ajoute le paramètre Afficher sur les catégories
Si non vide, utilise les cartes de sujets uniquement sur les catégories sélectionnées.
5 « J'aime »
Super ajout @RGJ, nous l’avons testé sur notre instance et cela fonctionne à merveille, il devrait absolument être fusionné à mon avis.
1 « J'aime »
J’ai trouvé un autre petit bug CSS avec ce tc sur Discourse 3.5.0 :
Une bordure est ajoutée autour de plusieurs éléments de l’interface utilisateur tels que l’historique des modifications et les éléments de citation étendue.
Cela est dû à l’absence des classes btn no-text dans les éléments de bouton.
Revu et fusionné, merci pour l’ajout !
2 « J'aime »
Honnêtement, je n’ai pas réussi à le faire fonctionner, regardez à quel point c’est moche, j’utilise le thème Horinzon, aidez-moi.
Ce composant n’est pas répertorié comme compatible avec le thème Horizon.
Je ne pense pas qu’il sera facile de changer cela car les deux personnalisent la liste des sujets, et comme indiqué dans le premier message :
2 « J'aime »
Comment puis-je ajouter le CSS, que je vois ici les fils, beaucoup de CSS