How to move the Threads/Replies/Created By/Replies/Views up?

[alex3003]

Is there a way to move the caption that says Threads/Replies/Created By/Replies/Views up into the bar above, and then get rid of the empty space below? Something like this before/after picture:



Thanks in advance!

[Nscalerr]

Yes this can be done and can be seen in action on my forum. Link in my signature.


I am sure I have seen a thread about this here on Support, but I can't seem to be able to find it right now. The following I had saved in a text file. Any problems post back here.


Move Threads, Posts, Last Post Into Title Bar


Similarly to how many v4 forums had their columns.
This works on a default forum, but I'm sure it can be customized to anyone's needs. Let me know if you have troubles by posting below!

First, add these lines of CSS at the bottom of your stylesheet:

/* Move Threads, Posts, Last Post into title bar CSS */
.boards table.list th.main {
padding-left: 0px !important;
}
table.list th.main {
padding: 0px !important;
}
table.list > thead > tr > th {
border-width: 0px !important;
}
.container > .title-bar.bbcode h2 {
width: auto !important;
}
/* Hide Boards, Threads, Post, Last Post */
.container.boards .content > table thead th {
display: none;
}


Next, replace this line of code in your Layout Template > Home (should be line 5 on the default template):

<div class="title-bar bbcode"><h2><div class="title_wrapper">$[category.display_name]</div></h2></div>


With this code:


<div class="title-bar bbcode">
<table class="list">
<thead>
<tr>
<th class="main"><h2><div class="title_wrapper">$[category.display_name]</div></h2></th>
<th class="icon"> </th>
<th class="threads"><h2>Threads</h2></th>
<th class="posts"><h2>Posts</h2></th>
<th class="latest"><h2>Last Post</h2></th>
</tr>
</thead>
</table>
</div>

[alex3003]

Thanks for your kind help.

Just one small issue though, it doesn't seem to apply to sub-boards? Is there a way to format the sub-boards (containing folders, not threads) the same way as the home page (see mock-up image below)?



My forum is here: link

[Nscalerr]

Not sure about sub-boards as I haven't really tried to modify them at all.

Chris any ideas if the above code could be adapted for sub-boards ?

[Chris]

Nscalerr , a few quickly constructed CSS rules reveal it can be accomplished using pure CSS and affect all .board.containers including sub-boards, the advantage being you are not modifying the HTML structure so everything is still where it should be just in case some code comes along looking for document.querySelectorAll('.latest')for example and not finding it where it is supposed to be thus leading to some unexpected error (the majority of theme-coding incompatibility stems from these seemingly innocuous changes).

Just drop the following CSS into the themes Stylesheet:

.container.boards {
position: relative;
}
.container.boards .list > thead {
position: absolute;
top: 0;
width:100%; /* for firefox */
}
.container.boards .list > thead tr {
color:transparent;
}
.container.boards .list > thead th{
border: 0 transparent none;
}
.container.boards .list > thead th:nth-of-type(n+3) {
color:@title_text_color;
}


SPOILER: Click to show

1. Unmodified Main Page

   
   
   
   

2. Main Page (CSS Applied)

   
   
   
   

3. Sub-boards (CSS Applied)

   
   

[alex3003]

Jul 31, 2022 19:38:01 GMT -8 Chris said:

Nscalerr , a few quickly constructed CSS rules reveal it can be accomplished using pure CSS and affect all .board.containers including sub-boards, the advantage being you are not modifying the HTML structure so everything is still where it should be just in case some code comes along looking for document.querySelectorAll('.latest')for example and not finding it where it is supposed to be thus leading to some unexpected error (the majority of theme-coding incompatibility stems from these seemingly innocuous changes).

Just drop the following CSS into the themes Stylesheet:

.container.boards {
position: relative;
}
.container.boards .list > thead {
position: absolute;
top: 0;
width:100%; /* for firefox */
}
.container.boards .list > thead tr {
color:transparent;
}
.container.boards .list > thead th{
border: 0 transparent none;
}
.container.boards .list > thead th:nth-of-type(n+3) {
color:@title_text_color;
}

Thanks very much Chris, however, while it looks correct at 110% browser zoom, at 100% or anything else the text doesn't align correctly? Also, how could I match the font style with the headings?

Thanks in advance!

[Chris]

@title_text_font would be the font to match font in title bar

[Nscalerr]

Thanks Chris, I now have this version set up in my forums main theme. A much better way of doing it.

[alex3003]

Chris Nscalerr were both of you able to get the text to align? I get this at <=100% browser zooms (only works >=110% browser zoom for some reason):



My site: jpopgirls.boards.net/

[Nscalerr]

No problem with alignment on my forum, or on your forum when I view it at 100%.I also have Threads and Posts center aligned and Last Post left aligned, not sure if it makes any difference or not.

[alex3003]

Aug 1, 2022 2:10:50 GMT -8 Nscalerr said:

No problem with alignment on my forum, or on your forum when I view it at 100%.I also have Threads and Posts center aligned and Last Post left aligned, not sure if it makes any difference or not.

I can't get it to work
I've tried in Chrome and Firefox, both give the same results. Here's the misalignment at 80% zoom:

[Chris]

alex3003,
the issue here is trying to get responsive behavior on a platform that was never built to be that responsive. The next iteration of Proboards (V6) is being rebuilt from the ground up to be responsive (release date unknown), but V5 uses tables for formatting which was discouraged almost two decades ago.

You can probably get your zoom to align if you change the table.list from its natural display:table to the more modern display:grid


.boards table.list {
   display: grid;
}

[alex3003]

Aug 1, 2022 2:26:09 GMT -8 Chris said:

alex3003 ,
the issue here is trying to get responsive behavior on a platform that was never built to be that responsive. The next iteration of Proboards (V6) is being rebuilt from the ground up to be responsive (release date unknown), but V5 uses tables for formatting which was discouraged almost two decades ago.

You can probably get your zoom to align if you change the table.list from its natural display:table to the more modern display:grid


.boards table.list {
   display: grid;
}

Hi Chris, thanks for the code, it aligns perfectly now, but now there's another issue, there is a gap at the right end?



Here is my code just in case I did something wrong? Or should we go back to the template code and modify it for Sub-Boards instead?


/*Place heading into green area*/

.container.boards {
position: relative;
}
.container.boards .list > thead {
position: absolute;
top: 0;
width:100%; /* for firefox */
}
.container.boards .list > thead tr {
color:transparent;
}
.container.boards .list > thead th{
border: 0 transparent none;
}
.container.boards .list > thead th:nth-of-type(n+3) {
color:@title_text_color;
font:@title_text_font;
}
.boards table.list {
display: grid;
}


[Chris]

alex3003 ,

Subgrids would solve this, but unfortunately, only Firefox currently has support for that so let's try falling back to the slightly older display:flex


.container.boards {
position: relative;
}
.container.boards .list > thead {
position: absolute;
top: 0;
width:100%; /* for firefox */
}
.container.boards .list > thead tr {
color:transparent;
display:flex;
}
.container.boards .list > thead th{
border: 0 transparent none;
}
.container.boards .list > thead th:nth-of-type(n+3) {
color:@title_text_color;
font:@title_text_font;
}


SPOILER: Click to show

• jpopgirls.boards.net

  
  
  

• jpopgirls.boards.net