How do I make the topic list more compact?

Support
1

jjjj
jjjj1846×855 91.2 KB

There’s too much white space. (Don’t worry, I will be editing the dividing line color).

I saw some other threads from like 2017 where they were editing it with CSS, but it seems like that CSS doesn’t work anymore.

2

Try this as a basis.

3

Oh that looks awesome

4

Here is some CSS for that… (let me know if it works!)

.topic-list .topic-list-data {
    padding: .1em .5em 0 !important;
    line-height: normal !important;
}

.topic-list-main-link,
.latest-topic-list-item .main-link,
.topic-list .main-link {
    font-size: var(--font-0) !important;
}

.topic-list-main-link a.title,
.latest-topic-list-item .main-link a.title,
.topic-list .main-link a.title {
    padding: 0 !important;
}

.topic-list .num.posts a,
.topic-list .num .badge-posts {
    padding: 0 !important;
}

.topic-list .link-bottom-line {
    display: inline !important;
}

.topic-list .excerpt {
    margin: 0 !important;
    line-height: normal !important;
}

.topic-list .posters {
    width: auto !important;
    max-width: 146px !important;
}
5

Thank you so much, it looks incredible! Exactly what I was looking for.

Would you happen to know how to make the individual posts more compact as well?

6

Great!

What exactly do you want the individual posts to look like?

7

ggggg
ggggg1585×1027 136 KB

How do I eliminate the whitespace? I like the dense, compact look you provided earlier.

8

Which are the white spaces you want reduced?

You could draw arrows and write in the spaces to show me, or a before and after picture.

Also a link to the live page if possible.

9

Can you provide an after picture to see the css changes to the topic listings?

10

imageedit_7_5002977264
imageedit_7_50029772641000×648 61.6 KB

How do I get rid of this whitespace?

11

Screenshot at 2025-01-26 22-06-18
Screenshot at 2025-01-26 22-06-181825×469 103 KB

12

This should cover what you highlighted. Feel free to adjust based on the original value.

.topic-post {
  .topic-body {
   padding-top: 0;  /* 0.8em */
  }
  
  .cooked {
     padding-bottom: 0;  /* 1em */
  }
  
  .post-menu-area {
    margin-top: 0; /* 20px */
    margin-bottom: 0; /* 20px */
  }
}
13

Thank you.