Warum funktionieren Hintergrundcodes nicht auf der Vollbild-Chatseite?

Entwickler
1

Hallo zusammen.
Warum funktionieren die Codes, die für die Homepage funktionieren, nicht im Hintergrund des Chatraums?

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

Derzeit gibt es eine schlechte Ansicht, wenn der Chatraum im Vollbildmodus angezeigt wird.

Meine Codes für Hintergrund und 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

Ich möchte dieses Thema nicht zumüllen, aber kann mir jemand helfen?
Ich habe viele Wege versucht, aber es funktioniert nicht.

3

Ich wollte mir Ihre Website ansehen, aber der Chat scheint für mich deaktiviert zu sein.

Ich habe es lokal getestet, und Ihr CSS scheint gut zu funktionieren.

image
image1460×594 59.1 KB

Es ist möglich, dass anderer CSS-Code Ihren Hintergrund überschreibt oder verhindert, dass er richtig angezeigt wird.

1 „Gefällt mir“
4

Ich habe nachgesehen und konnte diesen Bildpfad nicht richtig zum Laufen bringen. Sie sollten dieses Bild stattdessen in Ihren Assets-Ordner für das Theme hochladen und dann in CSS als Variable verwenden:

background-image: url($image_variable_name);

wobei image_variable_name der Name ist, den Sie ihm beim Hochladen geben.

1 „Gefällt mir“
5

Vielen Dank, dass Sie sich die Zeit für mein Problem genommen haben. @Arkshine @Lilly
Ich habe Ihre Mitgliedsstufe auf 2 gesetzt. Sie können den Chatbereich betreten.

Ja, ein paar CSS-Codes verursachten Probleme.
Ich habe es bearbeitet, aber dieses Mal gab es einen Abstand am unteren Rand des Chatbereichs.

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

Und der bottom-Code im body:before-Code funktioniert nicht.
Ich kann das im Moment nicht beheben.

@Lilly Wenn ich richtig verstanden habe, was Sie geschrieben haben, habe ich das Foto so hochgeladen.

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

Übrigens habe ich dieses Design ohne CSS-Kenntnisse erstellt. Deshalb mache ich vielleicht viele Fehler. Dank Ihnen lerne ich aus meinen Fehlern. :pray:

1 „Gefällt mir“
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);
}

Ich verwende derzeit diesen Code, und er funktioniert.
Bitte korrigieren Sie mich, wenn ich falsch liege. Danke.