¿Es posible agregar un salto/espacio aquí y crear una nueva caja CSS?

Desarrollador
1

No tengo idea de cómo explicar esto, así que aquí tienes una foto:

fffff
fffff1069×420 26.1 KB

Donde está el cuadro rojo, me gustaría tener un “cuadro/burbuja” separado para el área de “Temas nuevos y no leídos”. Donde está la línea roja ondulada, me gustaría que esa área fuera un espacio, y luego debajo del icono de la campana “Seguimiento”, que sea su propio “cuadro/burbuja” también. Básicamente, estoy tratando de hacer que esto sean dos bordes redondeados con espacio entre ellos. Esencialmente, solo estoy tratando de separar el área de “Temas nuevos y no leídos” de lo que está justo encima. ¿Es esto posible? Si es así, por favor, dime cómo.

Parece que el área de Temas tiene un ID de div de suggested-topics con una clase de div de more-topics__list y creo que todo el cuadro redondeado que ya rodea todo es main-outlet, pero no puedo decir cuál es el área anterior donde está el icono de la campana de Seguimiento.

Entonces, quiero que se vea así:

bbbb
bbbb1105×520 28.8 KB

Los cuadros rojos indican los “cuadros/burbujas” a los que me referí anteriormente. La línea naranja entre ellos es donde quiero el espacio entre ellos. Y sí, he leído todos los temas de CSS y demás que se recomiendan habitualmente. No puedo resolverlo después de unas 6 horas. Por lo que he experimentado, parece que si hago:

.more-topics__list{
  display:none;
}

entonces básicamente elimina todo el contenido entre el icono de la campana de Seguimiento y “Quieres leer más?..” en la parte inferior, pero eso realmente no me ayuda a avanzar cuando quiero mantener el contenido, solo dividir las secciones.

2

Para dividir las secciones en dos contenedores, necesitarías cambiar la plantilla subyacente. No creo que puedas modificar la predeterminada solo con CSS, porque:

y no hay otro contenedor en la plantilla predeterminada.

3

Puedes comprobar si hay una salida de plugin allí.

4

Hola :wave:

Supongo que estás utilizando el :cloud: Discourse Air Theme.

Algo como esto, puedes lograrlo.

CSS común

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

Jaja, ¡esa es la opción que no consideraría por la cantidad de trabajo! Bien hecho @Don :tada:

6

¡Muchas gracias por esta respuesta!