Why don't background codes work in full screen chat page?

Development

AI-generated summary

The discussion revolves around why background codes don’t work in the full-screen chat page. ogulcan1787 shares their issue, providing screenshots and code snippets. The code works on a normal page but not in full-screen chat mode. Arkshine suggests that other CSS codes might be overwriting the background code. Lilly recommends uploading the image to the theme’s assets folder and using a variable in CSS to avoid issues with the image path.

After trying the suggestions, ogulcan1787 encounters another issue with a space at the bottom of the chat area and problems with the bottom code in the body:before code. However, they eventually find a working solution using the code snippet:

.has-full-page-chat:not(.discourse-sidebar) #main-outlet {
  height: auto;
  position: absolute;
  left: 50%;
  right: 0;
  top: auto;
  bottom: auto;
  transform:  translate(-50%, 0);
  box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.3);
}

ogulcan1787 shares this solution and asks for confirmation if it’s correct.

1

Hi everyone.
Why don’t the codes that work for the home page work in the background of the chat room?

Ekran görüntüsü 2024-06-01 183315
Ekran görüntüsü 2024-06-01 1833152548×1040 435 KB

Ekran görüntüsü 2024-06-01 183322
Ekran görüntüsü 2024-06-01 1833222537×1256 58.2 KB

There is a bad view right now, when the chat room is in full screen.

My codes for background and body

body {
  background-color: #1a1a2b;
}

body:before {
  display: inline-block;
  border-radius: 10px;
  width: 1125px;
  height: inherit;
  background-color: #26263B;
  content: " ";
  position: absolute;
  left: 50%;
  right: 0;
  top: 72px;
  bottom: 11px;
  transform: translate(-50%, 0);
  box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.3);  
}

body {
  position: relative;
}

body {
  background-image: url("https://pvpfarm.com/uploads/default/original/1X/1b5dd68a865855193164193f21e08630a3ed6da6.png");
  background-size: 240px;
  background-repeat: repeat;
  background-attachment: local;
}
2

I don’t want to spam this topic but can anyone help?
I tried many ways but it doesn’t work.

3

I wanted to look at your site, but the chat seems to be disabled for me.

I tested locally, and your CSS seems to work fine.

image
image1460×594 59.1 KB

It might be possible that some other CSS code overwrites your background or prevents it from displaying properly.

4

I had a look and I couldn’t get that image path to work properly. You should instead upload that image into your assets folder for the theme, and then as a variable in CSS use:

background-image: url($image_variable_name);

where image_variable_name is what you give it when you upload it.

5

Thank you for spending your precious time on my problem. @Arkshine @Lilly
I set your member level to 2. You can enter the chat area.

Yes, a few CSS codes were causing problems.
I edited it, but this time there was a space at the bottom of the chat area.

Ekran görüntüsü 2024-06-04 085015
Ekran görüntüsü 2024-06-04 0850152551×362 37.3 KB

And the bottom code in the body:before code does not work.
I can’t fix this right now.

@Lilly If I understood what you wrote correctly, this is how I uploaded the photo.

Ekran görüntüsü 2024-06-04 085453

By the way, I made this design with zero CSS knowledge. That’s why I may make many mistakes. Thanks to you, I am learning from my mistakes. :pray:

6 
.has-full-page-chat:not(.discourse-sidebar) #main-outlet {
  height: auto;
  position: absolute;
  left: 50%;
  right: 0;
  top: auto;
  bottom: auto;
  transform: translate(-50%, 0);
  box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.3);
}

I am currently using these codes and they are working.
Please correct me if I’m wrong. Thanks