É possível adicionar uma quebra de linha ou espaço aqui e criar uma nova caixa CSS?

[45thj5ej]

Não tenho ideia de como explicar isso, então aqui está uma foto:

Onde está a caixa vermelha, eu gostaria de ter uma “caixa/bolha” separada para a área de “Tópicos Novos e Não Lidos”. Onde está a linha vermelha ondulada, eu gostaria que essa área fosse um espaço, e então abaixo do ícone do sino “Acompanhando”, que essa fosse sua própria “caixa/bolha” também. Basicamente, estou tentando fazer com que isso seja duas bordas arredondadas com espaço entre elas. Essencialmente, estou apenas tentando destacar a área “Tópicos Novos e Não Lidos” do que está logo acima dela. Isso é possível? Se sim, por favor, me diga como.

Parece que a área de Tópicos tem um ID de div de suggested-topics com uma classe de div de more-topics__list e acredito que toda a caixa arredondada que já envolve tudo isso é main-outlet, mas não consigo dizer qual é a área acima onde está o ícone do sino Acompanhando.

Então, eu quero que fique assim:

Caixas vermelhas indicam as “caixas/bolhas” que mencionei acima. A linha laranja entre elas é onde quero o espaço entre elas. E sim, eu li todos os tópicos de CSS e outros relacionados que são geralmente recomendados. Não consigo descobrir depois de umas 6 horas. De mexer, parece que se eu fizer:

.more-topics__list{
  display:none;
}

então ele basicamente remove todas as coisas entre o ícone do sino Acompanhando e “Quer ler mais?..” na parte inferior, mas isso realmente não me ajuda em nada quando quero manter o conteúdo, apenas dividir as seções.

[manuel (Manuel Kostka)]

Para dividir as seções em dois contêineres, você precisaria alterar o template subjacente. Não acho que você possa ajustar o padrão apenas com CSS, porque:

@45thj5ej

tudo ao redor é main-outlet

e não há outro wrapper no template padrão.

[pfaffman (Jay Pfaffman)]

Você pode verificar se há um ponto de extensibilidade de plugin lá

[Don]

Olá

Presumo que você esteja usando o Discourse Air Theme.

Algo assim, você pode conseguir.

CSS Comum

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

[manuel (Manuel Kostka)]

Haha, essa é a opção que eu não consideraria pela quantidade de trabalho! Bom trabalho @Don

[45thj5ej]

Muito obrigado por esta resposta!