Chat-Look-Anpassung

Entwickler
1

Ich versuche, das neue Chatfenster (Vollbildmodus) auf dem Desktop anzupassen.

Ich habe das CSS, das ich verwenden möchte, aber ich kann nicht herausfinden, wo ich es in meinem Theme platzieren soll, damit es wirksam wird.

Ich habe versucht …

my_theme/desktop/chat.scss
my_theme/desktop/chat_desktop.scss
my_theme/common/chat.scss
my_theme/common/chat_desktop.scss

Keine davon scheint das Standard-CSS zu überschreiben.

Der Vollständigkeit halber hier das CSS, das ich einfügen möchte.

// Vollbild-Chat-Erscheinungsbild anpassen

.full-page-chat .chat-full-page-header {
	background: var(--primary-very-low);
}

.full-page-chat .chat-full-page-header {
	border-top: 0px;
}

:root {
	--d-max-width: 2000px;
}

.has-full-page-chat:not(.discourse-sidebar) {
	--max-chat-width: 2000px;
}

#main-outlet-wrapper {
	padding: 0 0px;
}
2

Ihre Ordner-/Dateinamensstruktur ist falsch.

Lesen Sie hier: Developing Discourse Themes & Theme Components

3

Ich muss etwas übersehen. Was ist daran falsch?

Das ist meine Ordnerstruktur.

Screenshot 2023-01-06 at 9.22.05 AM
Screenshot 2023-01-06 at 9.22.05 AM1714×612 116 KB

4

Das unterscheidet sich von dem, was du im OP geteilt hast:

image
image318×127 1.55 KB

Wenn du die Chat-Mods anders benennen möchtest, musst du sie in der Hauptdatei referenzieren.

5

Entschuldigen Sie die Verwirrung. Im OP habe ich versucht zu kommunizieren, welche Dateien ich erstellt habe und wo ich sie platziert habe. Ich möchte den Chat-Modus nicht anders benennen, ich versuche nur herauszufinden, in welcher SCSS-Datei ich die CSS-Datei platzieren soll, um nur den Chat im Desktop-Vollbildmodus zu beeinflussen.

6

Sie können Ihr CSS in theme/desktop/desktop.scss einfügen – um den Chat zu beeinflussen, muss es nicht in einer Chat-spezifischen Datei sein, Sie müssen nur die relevanten Klassen ansprechen.

7

Sie können @import "chat" oder ein Äquivalent verwenden, um sie in Ihre Hauptdatei zu importieren.