Vers 4 - Prosilver theme items vertical aligned - jQuery only
Posted: Tue Dec 02, 2025 3:43 pm
At the date of this post, you can see the phpBB template js code applied on this installation.
See the index and viewtopics pages how looks with centered items inside dl dd dt elements that display forums and posts items. Respect to the old example it has been shortened, work better, do not use a resizer throttler, is faster and wrap all items that can or cannot exist into the li row.
To get the look on prosilver or any other theme that respect the same DOM it can be done like this:
On phpBB prosilver overall_footer.html, immediately after this code:
ADD this snippet:
Remember to recompile Stale Templates into ACP after applied and re-set to NO when you see the result is ok on frontend layout.
About font size: i just changed the font-size to be 12px into the CSS for the body selector.
File:
/styles/prosilver/theme/common.css
That's all to make it almost decent this template without going to change nothing else on template files.
See the index and viewtopics pages how looks with centered items inside dl dd dt elements that display forums and posts items. Respect to the old example it has been shortened, work better, do not use a resizer throttler, is faster and wrap all items that can or cannot exist into the li row.
To get the look on prosilver or any other theme that respect the same DOM it can be done like this:
On phpBB prosilver overall_footer.html, immediately after this code:
Code: Select all
<!-- EVENT overall_footer_body_after -->Code: Select all
<script>
$( document ).ready(function() {
$('ul.topiclist.forums li.row dl.row-item').each(function () {
let h = $(this).parent().get(0).offsetHeight;
$(this.childNodes).wrapInner( "<table class=\"w3tab\" style=\"height:"+h+"px;margin:0px;padding:0px;border-collapse:collapse;width:100%\"><tbody style=\"margin:0px;padding:0px;\"><tr><td style=\"margin:0px;padding:0px;vertical-align:middle\"></td></tr></tbody></table>" );
});
let a = document.querySelectorAll('ul.topiclist.forums li.row dd.lastpost');
a.forEach((e) => e.setAttribute("style", "padding:0 5px"));
$('ul.topiclist.topics li.row dl.row-item').each(function () {
let h = $(this).parent().get(0).offsetHeight;
$(this.childNodes).wrapInner( "<table class=\"w3tab\" style=\"height:"+h+"px;margin:0px;padding:0px;border-collapse:collapse;width:100%\"><tbody style=\"margin:0px;padding:0px;\"><tr><td style=\"margin:0px;padding:0px;vertical-align:middle\"></td></tr></tbody></table>" );
});
let b = document.querySelectorAll('ul.topiclist.topics dd.lastpost');
b.forEach((e) => e.setAttribute("style", "padding:0 5px"));
});
</script>
About font size: i just changed the font-size to be 12px into the CSS for the body selector.
File:
/styles/prosilver/theme/common.css
Code: Select all
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
color:#000;
font-size: 12px;
line-height: normal;
margin: 0;
padding: 12px 0;
word-wrap: break-word;
-webkit-print-color-adjust: exact;
}