Help with Thread List page

[homogenix]

Hello everyone! I was wondering if I could get my thread lists to look like this:



I want to hide the "Replies" and "Views" sections, make the "Created by" one larger and show the creator's avi in a circle with an orange border by the side of their Display Name. Is it possible?

[Chris]

Jul 6, 2023 14:31:26 GMT -8 homogenix said:

Hello everyone! I was wondering if I could get my thread lists to look like this:



I want to hide the "Replies" and "Views" sections, make the "Created by" one larger and show the creator's avi in a circle with an orange border by the side of their Display Name. Is it possible?

You should be able to accomplish this by editing the BOARD template (to remove the <TH> cells providing headings for the views and threads columns) and the THREAD LIST template (to remove the corresponding <TD> that provide the cells on each line of the unwanted columns).

1. Board Template (remove "Replies" and "Views" column headers):

   Add HTML comments (<!-- and -->) around these lines

   • Before:

     
<th class="replies">Replies</th>
<th class="views">Views</th>
     
     

   • After:

     
<!-- <th class="replies">Replies</th> -->
<!-- <th class="views">Views</th> -->
     

   SPOILER: Click to show

   

   
   
   

2. Thread List Template (remove "Replies" and "Views" column cells):

   Add HTML comments around these lines

   • Before:

     
<td class="replies clickable">$[thread.replies]</td>
<td class="views">$[thread.views]</td>
     
     

   • After:

     
<!-- <td class="replies clickable">$[thread.replies]</td> -->
<!-- <td class="views">$[thread.views]</td> -->
     

   SPOILER: Click to show

   

   
   

3. Thread List Template (add Avatar Variable):

   Add the $[thread.created_by.avatar_small] variable to the line that defines the cells in the created by column

   • Before:

     
<td class="created-by clickable"> $[thread.created_by]</td>
     

   • After:

     
<td class="created-by clickable">$[thread.created_by.avatar_small] $[thread.created_by]</td>
     

   SPOILER: Click to show

   

   
   
   

4. Advanced CSS (add Styling Rules):

   Add the following CSS to the bottom of the theme's Advanced Stylesheet .threads .created-by {
   width: 31%; /* default is 14% but added 17% from removed columns */
}
td.created-by.clickable .avatar-wrapper {
   --avatar-size: 25px; /* change avatar size here */
   display: inline-block;
   max-height:var(--avatar-size);

   /* Cannot use nested CSS yet because Firefox 115 still has it behind an experimental flag Aarghh!
   > img {
   max-width:var(--avatar-size);
   object-fit: scale-down;
   border-radius: 50%;
   height: var(--avatar-size);
   width: var(--avatar-size);
   border: 2px solid orange;
   } */
}
td.created-by.clickable .avatar-wrapper img {
   max-width:var(--avatar-size);
   object-fit: scale-down;
   border-radius: 50%;
   height: var(--avatar-size);
   width: var(--avatar-size);
   border: 2px solid orange;
}

SPOILER: Click to show

[homogenix]

Jul 7, 2023 22:34:46 GMT -8 Chris said:

Jul 6, 2023 14:31:26 GMT -8 homogenix said:

Hello everyone! I was wondering if I could get my thread lists to look like this:



I want to hide the "Replies" and "Views" sections, make the "Created by" one larger and show the creator's avi in a circle with an orange border by the side of their Display Name. Is it possible?

You should be able to accomplish this by editing the BOARD template (to remove the <TH> cells providing headings for the views and threads columns) and the THREAD LIST template (to remove the corresponding <TD> that provide the cells on each line of the unwanted columns).

1. Board Template (remove "Replies" and "Views" column headers):

   Add HTML comments (<!-- and -->) around these lines

   • Before:

     
<th class="replies">Replies</th>
<th class="views">Views</th>
     
     

   • After:

     
<!-- <th class="replies">Replies</th> -->
<!-- <th class="views">Views</th> -->
     

   SPOILER: Click to show

   

2. Thread List Template (remove "Replies" and "Views" column cells):

   Add HTML comments around these lines

   • Before:

     
<td class="replies clickable">$[thread.replies]</td>
<td class="views">$[thread.views]</td>
     
     

   • After:

     
<!-- <td class="replies clickable">$[thread.replies]</td> -->
<!-- <td class="views">$[thread.views]</td> -->
     

   SPOILER: Click to show

   

3. Thread List Template (add Avatar Variable):

   Add the $[thread.created_by.avatar_small] variable to the line that defines the cells in the created by column

   • Before:

     
<td class="created-by clickable"> $[thread.created_by]</td>
     

   • After:

     
<td class="created-by clickable">$[thread.created_by.avatar_small] $[thread.created_by]</td>
     

   SPOILER: Click to show

   

4. Advanced CSS (add Styling Rules):

   Add the following CSS to the bottom of the theme's Advanced Stylesheet .threads .created-by {
   width: 31%; /* default is 14% but added 17% from removed columns */
}
td.created-by.clickable .avatar-wrapper {
   --avatar-size: 25px; /* change avatar size here */
   display: inline-block;
   max-height:var(--avatar-size);

   /* Cannot use nested CSS yet because Firefox 115 still has it behind an experimental flag Aarghh!
   > img {
   max-width:var(--avatar-size);
   object-fit: scale-down;
   border-radius: 50%;
   height: var(--avatar-size);
   width: var(--avatar-size);
   border: 2px solid orange;
   } */
}
td.created-by.clickable .avatar-wrapper img {
   max-width:var(--avatar-size);
   object-fit: scale-down;
   border-radius: 50%;
   height: var(--avatar-size);
   width: var(--avatar-size);
   border: 2px solid orange;
}

SPOILER: Click to show

Thank you so much, Chris!

[Chris]

My pleasure!