Por que os códigos de fundo não funcionam na página de chat em tela cheia?

Olá a todos.
Por que os códigos que funcionam para a página inicial não funcionam no plano de fundo da sala de chat?


Há uma visualização ruim no momento, quando a sala de chat está em tela cheia.

Meus códigos para plano de fundo e corpo

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

Não quero lotar este tópico, mas alguém pode ajudar?
Tentei de várias maneiras, mas não funciona.

Eu queria ver seu site, mas o chat parece estar desativado para mim.

Eu testei localmente e seu CSS parece funcionar bem.

Pode ser que algum outro código CSS esteja substituindo seu plano de fundo ou impedindo que ele seja exibido corretamente.

1 curtida

Eu dei uma olhada e não consegui fazer o caminho da imagem funcionar corretamente. Em vez disso, você deve fazer o upload dessa imagem para a sua pasta de assets para o tema e, em seguida, usar como variável em CSS:

background-image: url($image_variable_name);

onde image_variable_name é o nome que você dá a ela ao fazer o upload.

1 curtida

Obrigado por dedicar seu precioso tempo ao meu problema. @Arkshine @Lilly
Defini seu nível de membro para 2. Você pode entrar na área de chat.

Sim, alguns códigos CSS estavam causando problemas.
Eu editei, mas desta vez havia um espaço na parte inferior da área de chat.

E o código bottom no código body:before não funciona.
Não consigo consertar isso agora.

@Lilly Se entendi o que você escreveu corretamente, foi assim que fiz o upload da foto.

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

A propósito, fiz este design com zero conhecimento de CSS. É por isso que posso cometer muitos erros. Graças a vocês, estou aprendendo com meus erros. :pray:

1 curtida
.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);
}

Estou usando estes códigos atualmente e eles estão funcionando.
Por favor, corrija-me se eu estiver errado. Obrigado.