XF 2.2 Forum list narrow view - how to reposition threads/messages counts?

gogo

Well-known member
How to change the position from (1) to (2), same line with the Title?

1601078879492.png

I tried to put <span style="float: right; font-size: 12px;">23/355</span> behind the </h3> tag but it's forced to be placed on next line. Seems <h3> tags always take up a whole line?

1601079956984.png

Is template (forum_list I guess) modification the only way to do it? Can it be done with CSS changes in extra.less?
 
Solution
Fun little challenge - here's what I came up with messing around on the XF site:

Screen Shot 2020-09-25 at 8.51.10 PM.png

CSS:
@media all and (min-width: 900px) {
  .node-main { position: relative; }
   .node-statsMeta {
        position: absolute;
            top: 18px;
            right: 6px;
    }
    .node-statsMeta .pairs dt { display: none; } 
    .node-statsMeta .pairs:first-child dd:after { content: " /"; }
}

This works up to 900px screen width, then falls back to the expected XF display. You can bring the .pairs classes out of the media query so the labels will always stay hidden. A template edit is still probably ideal but this seems worth a shot!
Fun little challenge - here's what I came up with messing around on the XF site:

Screen Shot 2020-09-25 at 8.51.10 PM.png

CSS:
@media all and (min-width: 900px) {
  .node-main { position: relative; }
   .node-statsMeta {
        position: absolute;
            top: 18px;
            right: 6px;
    }
    .node-statsMeta .pairs dt { display: none; } 
    .node-statsMeta .pairs:first-child dd:after { content: " /"; }
}

This works up to 900px screen width, then falls back to the expected XF display. You can bring the .pairs classes out of the media query so the labels will always stay hidden. A template edit is still probably ideal but this seems worth a shot!
 
Solution
It works beautifully! Just like what I wanted.

I changed it to @media all { and it works for smaller viewport too. I didn't delete it just in case I'll need to apply the view restriction later.

All my forums titles are short so I can use it in all width of views.

Thanks @Mangini!
 
@Mangini I tried to understand the code you provided. But curious about how you got to the number "top: 18px;". It seems it's not specified in the original code.
That is the amount of spacing the stats are pushed down from the top of the forum node. I came up with 18px as it made it look the most vertically centered, and depending on your theme you may have to use a different number to keep it centered.
 
Top Bottom