Chat look customization

[agf1997]

I’m trying to customize the new chat window (full screen mode) on desktop.

I have the css I’d like to use, but I can’t figure out where to put it in my theme to have it take effect.

I’ve tried …

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

None of those seem to override the default css.

For completeness, here’s the css I’m trying to inject.

// Adjust full screen chat appearance

.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;
}

[merefield (Robert)]

Your folder/file name structure is incorrect.

Take a read through: Beginner's guide to developing Discourse Themes

[agf1997]

I must be missing something. What is incorrect about it?

This is my folder structure.

[merefield (Robert)]

That’s different to what you shared in the OP:

If you want to name the chat mods as something different, you must reference them in the main file.

[agf1997]

Sorry for the confusion. In the OP I was trying to communicate what files I tried making, and the locations in which I placed them. I don’t want to name the chat mode differently, I’m just trying to figure out which scss file I should place the css in to effect only the desktop, full screen mode chat.

[awesomerobot (Kris)]

You can put your CSS in theme/desktop/desktop.scss — to impact chat it doesn’t have to be in a chat-specific file, you just have to target the relevant classes.

[merefield (Robert)]

You can use @import "chat" or equivalent to import them into your main file.