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;
}
1 Like
Your folder/file name structure is incorrect.
Take a read through: Beginner's guide to developing Discourse Themes
3 Likes
I must be missing something. What is incorrect about it?
This is my folder structure.
1 Like
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.
2 Likes
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.
1 Like
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.
6 Likes
You can use @import "chat" or equivalent to import them into your main file.
2 Likes
