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.
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.
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.