Is is possible to add a break/space here and make a new CSS box?

Development

AI-generated summary

The user 45thj5ej asks how to separate the “New & Unread Topics” section from the rest of the content on a Discourse forum, creating a distinct “box/bubble” with space between sections. They want to visually split the layout into two rounded containers, referencing specific HTML elements like main-outlet and more-topics__list. manuel explains that CSS alone may not suffice due to the lack of a wrapper in the default template. pfaffman suggests checking for a plugin outlet. Don provides a detailed CSS solution using SCSS to style the main-outlet and related components, achieving the desired separation with custom borders and spacing. manuel praises the effort, and 45thj5ej thanks Don for the help.

1

No idea how to explain this, so here’s a photo:

fffff
fffff1069×420 26.1 KB

Where the red box is, I would like to have a separate “box/bubble” for the “New & Unread Topics” area. Where the squiggly red line is, I would like that area to be space, and then under the “Tracking” bell icon, have that be its own “box/bubble” too. Basically, trying to make this be two rounded borders with space between them. Essentially, just trying to detach the “New & Unread Topics” area from what’s right above it. Is this possible? If so, please tell me how.

It looks like the Topics area has a div ID of suggested-topics with a div class of more-topics__list and I believe the entire rounded box that’s already surrounding all of it is main-outlet but I can’t tell which one the above area is where the Tracking bell icon is.

So, I want it to look like this:

bbbb
bbbb1105×520 28.8 KB

Red boxes indicate the “boxes/bubbles” I referred to above. Orange line between them is where I want the space between them to be. And yes, I’ve read all the usually-recommended CSS topics and whatnot. I cannot figure it out after like 6hrs. From messing around, it looks like if I do:

.more-topics__list{
  display:none;
}

then it basically gets rid of all the stuff between Tracking bell icon and “Want to read more?..” at the bottom, but that doesn’t really help me get anywhere when I want to keep the content, just have the sections split.

2

To split the sections into two containers you’d need to change the underlying template. I don’t think you can tweak the default one with CSS only, because:

and there’s no other wrapper on the default template.

3

You can check if there is a plugin outlet there

4

Hello :wave:

I assume you are using the :cloud: Discourse Air Theme.

Something like this, you can achieve it.

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

Haha, that’s the option I wouldn’t consider for the amount of work! Well done @Don :tada:

6

Thanks a ton for this reply!