为什么在全屏聊天页面中后台代码不起作用？

[ogulcan1787]

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

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

[ogulcan1787]

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

[Arkshine]

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.

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

[Lilly (Lillian Louis)]

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.

[ogulcan1787]

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.

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.

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.

[ogulcan1787]

.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