Nur mal so als Gedanke: Das Starten im abgesicherten Modus, um die Massenaktionen durchzuführen, könnte eine Alternative zum Deaktivieren der Theme-Komponente für alle sein. Offensichtlich immer noch ein zusätzlicher Aufwand, aber möglicherweise mit weniger Auswirkungen auf alle anderen?
Ja, das habe ich herausgefunden, nachdem ich vom abgesicherten Modus erfahren hatte…
1 „Gefällt mir“
Hallo,
Vielen Dank für Ihre Komponente! Wir haben ein Problem festgestellt, als wir Ihre Komponente im Forum https://community.escapecollective.com/ verwendet haben. Wenn Sie auf den Thema-Titel klicken, wird die SPA neu geladen (ich habe ein GIF mit diesem Problem angehängt), aber wenn Sie außerhalb des Titels auf die Karte klicken, funktioniert alles einwandfrei. Das Problem wurde entdeckt, weil die Guest Gate-Komponente aufgrund des Seitenumbruchs nicht richtig funktionierte.
Hier ist ein Vorschlag: Guest Gate Theme Component - #154 by Don
Könnten Sie sich bitte dieses Problem ansehen?
Vielen Dank,
Denis D.
2 „Gefällt mir“
Es scheint also, dass sich mit der letzten Runde der Discourse-Updates etwas geändert hat.
Nur der äußerste linke Rand meiner Themenkarten beachtet dieses CSS noch. Ich habe versucht herauszufinden, was es beheben wird, aber bisher ohne Erfolg.
Kann das jemand anderes bestätigen und nachsehen, ob er die notwendigen Änderungen finden kann?
Das Problem ist die kürzlich hinzugefügte Variable für die Hintergrundfarbe von Themen, die Sie gelesen haben.
Ich glaube nicht, dass es eine dev-news zu dieser Änderung gibt. Aber Sie können hier einige Informationen finden:
Gibt es also eine Möglichkeit, dieses CSS zu unterdrücken? Das hat das Aussehen meiner Website zerstört, und da ich kein Coder bin, weiß ich nicht, wie ich das beheben kann.
Ich habe den Element-Inspektor durchsucht und sehe das Wort „visited“ bei allen defekten Themen und sehe, dass es bei dem Thema fehlt, das noch richtig aussieht.
Wie behebe ich das?
Thema, das ich noch nicht besucht habe (kein Hover):
Und mit Mauszeiger:
Und die anderen sind kaputt.
Das war schwieriger zu finden, als es hätte sein sollen. (Ich bin mir ziemlich sicher, dass es an meinen Unzulänglichkeiten liegt, aber trotzdem…)
Es scheint, dass das Hinzufügen von:
.topic-list-item-background-color--visited {
background: none
}
hat es ohne unerwünschte Nebenwirkungen behoben.
In Ihren Stilen müssen Sie jetzt nur noch diese beiden Variablen ändern:
--topic-list-item-background-color
--topic-list-item-background-color--visited
Etwas wie das hier sollte also funktionieren:
:root {
--topic-list-item-background-color: IHRE FARBE HIER;
--topic-list-item-background-color--visited: IHRE FARBE HIER;
}
Wie würde sich das auf die Unterschiede auswirken, wenn man zwischen Hell und Dunkel wechselt?
Sie können die CSS-Funktion light-dark() verwenden.
--variable-name: light-dark(#efedea, #223a2c);
Sie können beide auf dasselbe setzen.
Am :hover wurde im Kern nichts geändert. Sie müssen nur sicherstellen, dass Sie die Variable beim Hovern auf das gewünschte setzen.
1 „Gefällt mir“
Das funktioniert bei mir immer noch nicht.
Das ist es, was ursprünglich funktioniert hat:
// Blend topic card colors with theme
@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;
}
}
Dann habe ich nach dem letzten Update Folgendes hinzugefügt, und es schien zu funktionieren, aber dann hörte es auf:
.topic-list-item-background-color--visited {
background: none
}
Dann habe ich, basierend auf dem, was Sie hier gesagt haben, versucht, beides zu meinem aktuellen hinzuzufügen und alles durch Folgendes zu ersetzen:
: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);
}
Es muss eine weitere Variable geben, die ich abdecken muss, hover-visited, denn ungelesene Threads funktionieren richtig, aber besuchte sind kaputt.
Diese Variable existiert nicht.
.topic-card.has-max-height:hover {
--topic-list-item-background-color: ADD COLOR HERE
--topic-list-item-background-color--visited: ADD COLOR HERE
}
Das sollte alles sein, was Sie brauchen. Ich hoffe, das hilft!
Dies ist die geringste Anzahl von Zeilen, die ich finden konnte und die korrekt zu funktionieren scheint.
// Blend topic card colors with theme
.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;
}
}
Ich habe einen PR für diese Theme-Komponente mit zwei Ergänzungen vorgenommen:
Funktion: Umschalter für vorgeschlagene Themen
Fügt die Einstellung Für vorgeschlagene Themen anzeigen hinzu.
Macht die Verwendung von Themenkarten für vorgeschlagene Themen optional (wie in diesem Feature-Request beschrieben).
Funktion: Auf Kategorien beschränken
Fügt die Einstellung Auf Kategorien anzeigen hinzu.
Wenn nicht leer, werden Themenkarten nur in ausgewählten Kategorien verwendet.
5 „Gefällt mir“
Fantastische Ergänzung @RGJ, wir haben sie auf unserer Instanz getestet und sie funktioniert einwandfrei, meiner Meinung nach sollte sie definitiv zusammengeführt werden.
1 „Gefällt mir“
Einen weiteren kleinen CSS-Fehler mit diesem tc auf Discourse 3.5.0 gefunden:
Ein Rahmen wird um mehrere UI-Elemente wie Bearbeitungshistorie und Zitat-Erweiterungselemente hinzugefügt.
Dies liegt daran, dass die Klassen btn no-text den Button-Elementen fehlen
Überprüft und zusammengeführt, danke für die Ergänzung!
2 „Gefällt mir“
Ich konnte es ehrlich gesagt nicht zum Laufen bringen, es sieht super hässlich aus, ich benutze das Horinzon-Thema, helfen Sie mir.
Diese Komponente ist nicht als kompatibel mit dem Horizon-Theme aufgeführt.
Ich glaube nicht, dass es einfach sein wird, das zu ändern, da beide die Themenliste anpassen und wie im ersten Beitrag angegeben:
2 „Gefällt mir“
Wie kann ich das CSS hinzufügen, das ich hier in den Threads sehe, viel CSS