Threads Visual Layout

[danteblackmetal]

Forum URL: (private)
Is it possible to change the forum layout, so instead of several lines, it auto-organizes threads in rows + lines?

Here's how it is originally


And here's a mockup I did in PhotoShop



My idea is to have the forum separate boards in 3 or maybe 4 rows, so threads look beautiful with the custom icons I add, etc.

Is this possible at all? Can it be customized in the settings of the boards? Does it require an "already existing" plugin, or maybe actual coding (Javascript, or maybe CSS takes care of this visual aspect)?

Edit: it would be ideal if all threads had the same size, and the image in the icon were resized if smaller or bigger to be seen in the same height

[Michael]

I know this was possible and has been done with boards/categories in some custom themes, I'm not sure if anyone has done this with threads though.

This would require customization of the thread list page.

[Chris]

• Preview

  SPOILER: Click to show

  

• Code

  SPOILER: Click to show

  
.list{
   --board-width: 300px;
   --board-padding: 1rem;
   --border-color: #e8b0af;

   > thead{display:none;}
}

.list > tbody {
   display:flex;
   align-items: center;
   flex-flow: row wrap;
   gap:1rem;
   flex:1;
   width:100%;
   min-height:fit-content;
   padding: var(--board-padding);
   
}
.list tr.item.thread {
   display:inline-grid;
   width:var(--board-width);
   height:var(--board-width);
   padding: var(--board-padding);
   border: var(--border-color) 1px solid;
   justify-content:center;
   >td {
       width:var(--board-width);
border-style:none;
margin:0!important;
display:flow-root;
   }
 
   .main{
order:-1;
width:var(--board-width);
       > .description {
display:none;
       }
       > table{
           width:100%;
       }
   }
   .created-by{
text-align:right;
padding:0 2rem;
       &::before{
           content: 'Created By:   ';
font-weight:700;
display:inline-block;
float:left;
       }
       
   }
   .views{
text-align:right;
padding:0 2rem;
       &::before{
           content: 'Views:';
font-weight:700;
display:inline-block;
float:left;
       }
   }
   }
   .replies.replies{
       text-align:right;
       padding:0 2rem;
       &::before{
           content: 'Replies:   ';
           font-weight:700;
           display:inline-block;
           float:left;
       }
   }
   .latest.last{
       text-align:left;
       font-weight:700;
       padding:0 2rem;
       a,span[itemtype="http://schema.org/Person"]{
           float:right;
       }
        &::before{
           content: 'Last post\a0';
           font-weight:700;
           display:inline-block;
           float:left;
       }
       abbr.time{
           display:inline-block;
           white-space:nowrap;
           clear:both;
           float:right;
       }
   }
   .icon{
       padding:0;
       justify-self:center;
position:relative;
       img{
           min-width:calc(var(--board-width) - var(--board-padding)*2);
min-height:calc(var(--board-width) - 2.3rem - var(--board-padding)*2);
margin: 3px auto;
           &:hover{
               opacity:0;
               pointer-events:bounding-box;
           }
       }
>img{ /* no custom image */
position:absolute;
top:-.5rem;
left:1rem;
}
   }
   .checkbox{
order:1;
}
}
  
  

  Warning: Code written on the fly so not tested for proper forum functionality Intended for use with the Thread Icon plugin but should also work with standard Recommend disabling full size preview on hover in the plugin to prevent page jumps Not responsive

  
  

[danteblackmetal]

1. Where exactly should I paste this code?
2. Can I make so title of threads are bold and have a bigger font?
3. What if I want 4 rows instead of 3? Is it simple to change something in the code? Like a number or something?

[danteblackmetal]

I went into "Themes", then Advanced Styles & CSS and Style Sheet.
Scrolled all the way down and paste it there, but I got this notification:

[Chris]

There's an extra closing bracket preceding the .replies.replies{ line that is likely the cause of the syntax error.
The selector is also not specific enough to apply only to thread lists (e.g., .list:has(.item.thread) would be better).

I'll take a look on my day off this week to ensure that the code is properly vetted and address any other concerns you may have.

[danteblackmetal]

Now I got this message after pasting the code.



Can you tell me (or show in a gif/video) where and how I should paste/save this code so it applies to the forum?

[danteblackmetal]

Asking again cuz this is probably unreachable among other questions.

[Chris]

I apologize, danteblackmetal ; it's been a hectic several weeks for me.

I did paste the code in the Advanced CSS on a forum theme, only to be reminded that the CodeMirror plugin currently in use on these forums is over a decade old and has no idea about the more recent innovations in CSS, such as nesting, grid, etc.

The easiest way would be to edit the plugin itself and add a board header (see this post on how) then paste the code between <style> and </style> tags in the header component. You will then be able to configure in which boards this newly added component will be activated on the about tab when back in manage plugin (configuration mode). Remember to turn off the "keep old icon" option as well.

SPOILER: Click to show

Keep in mind that posted the code is a PoC and may still be in need of polishing by me or someone acquainted with more recent CSS additions.

I had also begun to work on a more resilient version using grid/calcs/media/container queries which would allow specifying columns but also be responsive on smaller screens but I simply have not found the time. I will post it here whenever I finally get around to it.

[danteblackmetal]

I'll explain what I did, so you can tell where I did mess up.

I went to the post you said "Dynamically Tabbed Table only one One Page", then:

1. Installed the plugin mentioned;
2. Went to Plugins\Build\Dynamically Tabbed Table\Component
3. Deleted the "Main Header & Footer"
4. Clicked on "Board" from the 6 components to choose
5. Pasted the code you gave me and added that extra information  /* JASP! ontainer_outer_border_color */ in the 5th line
6. Added <style> before the first line of the code, and after the last line.

Then I click to enable the plugin, and when I open the board I selected, it shows the entire area greyed.