No idea how to explain this, so here’s a photo: [fffff] 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] 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.

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

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: [image] 45thj5ej: surrounding all of it is main-outlet and there’s no other wrapper on the default template.

You can check if there is a plugin outlet there

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

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

Development

45thj5ej March 28, 2024, 1:06pm 6

Thanks a ton for this reply!

Topic		Replies	Views
Separating comments, topics and forums Product Support	1	852	September 18, 2015
How do I space out topics from each other? Product Support	6	1216	August 13, 2018
Howto add a GAP between Categories Product Support	2	866	November 13, 2020
CSS selector separating posts Development css	4	297	September 21, 2024
How to split the categories into sections with titles? Development	3	1205	March 14, 2023

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

Related topics