Ist es möglich, hier einen Umbruch/Abstand einzufügen und eine neue CSS-Box zu erstellen?

Entwickler
1

Ich habe keine Ahnung, wie ich das erklären soll, also hier ist ein Foto:

fffff
fffff1069×420 26.1 KB

Wo die rote Box ist, hätte ich gerne eine separate „Box/Blase“ für den Bereich „Neue & ungelesene Themen“. Wo die geschlängelte rote Linie ist, möchte ich dort Platz haben, und dann unter dem Glockensymbol „Tracking“ sollte das auch seine eigene „Box/Blase“ sein. Im Grunde versuche ich, dies in zwei abgerundete Ränder mit Platz dazwischen zu verwandeln. Im Wesentlichen versuche ich nur, den Bereich „Neue & ungelesene Themen“ von dem direkt darüber zu trennen. Ist das möglich? Wenn ja, sagen Sie mir bitte, wie.

Es sieht so aus, als ob der Themenbereich eine div-ID von suggested-topics mit einer div-Klasse von more-topics__list hat, und ich glaube, die gesamte abgerundete Box, die alles umgibt, ist main-outlet, aber ich kann nicht erkennen, welche die obere Fläche ist, wo sich das Tracking-Glockensymbol befindet.

Ich möchte also, dass es so aussieht:

bbbb
bbbb1105×520 28.8 KB

Rote Boxen kennzeichnen die oben genannten „Boxen/Blasen“. Die orangefarbene Linie dazwischen ist, wo ich den Abstand dazwischen haben möchte. Und ja, ich habe alle üblicherweise empfohlenen CSS-Themen und dergleichen gelesen. Ich kann es nach etwa 6 Stunden nicht herausfinden. Durch Herumspielen sieht es so aus, als ob, wenn ich mache:

.more-topics__list{
  display:none;
}

dann werden im Grunde alle Dinge zwischen dem Tracking-Glockensymbol und „Möchten Sie mehr lesen?..“ am Ende entfernt, aber das hilft mir nicht wirklich weiter, wenn ich den Inhalt behalten, aber die Abschnitte aufteilen möchte.

2

Um die Abschnitte in zwei Container aufzuteilen, müssten Sie die zugrunde liegende Vorlage ändern. Ich glaube nicht, dass Sie die Standardvorlage nur mit CSS anpassen können, denn:

und es gibt keine andere Wrapper-Vorlage in der Standardvorlage.

3

Sie können dort prüfen, ob eine Plugin-Steckdose vorhanden ist

4

Hallo :wave:

Ich gehe davon aus, dass Sie das :cloud: Discourse Air Theme verwenden.

So etwas können Sie erreichen.

Gemeinsames CSS

body.archetype-regular,
body.archetype-banner,
body.archetype-private_message {
  #main-outlet {
    margin-top: 30px;
    margin-bottom: 0px;
    background: transparent !important;
    box-shadow: none;
    padding: 0em 0em 5%;
    width: 100% !important;
  
    #topic-title {
      margin-bottom: 0;
      background: var(--secondary);
      padding: 3em 3em 1em;
      border-radius: 1em 1em 0 0;
    }
  
    .container.posts {
      margin-bottom: 0;
      background: var(--secondary);
      padding: 0 3em var(--below-topic-margin);
    }
  
    .topic-above-footer-buttons-outlet.presence {
      margin: 0;
      padding: var(--below-topic-margin) 0;
      background: var(--secondary);
    }
  
    #topic-footer-buttons {
      max-width: 100%;
      background: var(--secondary);
      border-radius: 0 0 1em 1em;
      margin: 0;
      padding: var(--below-topic-margin) 3em 1em;
    }
  
    .more-topics__container {
      border-radius: 1em;
      background: var(--secondary);
      max-width: 100%;
      padding: 3em;
    }
  }
}
4 „Gefällt mir“
5

Haha, das ist die Option, die ich für den Arbeitsaufwand nicht in Betracht ziehen würde! Gut gemacht @Don :tada:

2 „Gefällt mir“
6

Vielen Dank für diese Antwort!

1 „Gefällt mir“
7

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.