Chat look customization

Development

AI-generated summary

Chat Look Customization Discussion Summary

User agf1997 is trying to customize the desktop chat window in full-screen mode by injecting custom CSS. Despite trying various file locations within their theme (my_theme/desktop/chat.scss, my_theme/desktop/chat_desktop.scss, my_theme/common/chat.scss, and my_theme/common/chat_desktop.scss), none seem to override the default CSS.

agf1997 shared their CSS code, which aims to adjust the full-screen chat appearance.

merefield suggested that the folder/file name structure is incorrect, pointing to the Beginner’s Guide to Developing Discourse Themes for clarification.

After some discussion about the correct file structure, awesomerobot advised that the CSS can be placed in theme/desktop/desktop.scss to impact the chat, as long as the relevant classes are targeted. merefield also suggested using @import "chat" to import chat-specific styles into the main file.

1

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

Your folder/file name structure is incorrect.

Take a read through: Developing Discourse Themes & Theme Components

3

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

This is my folder structure.

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

4

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

image
image318×127 1.55 KB

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

5

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.

6

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.

7

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