by axew3 » 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:
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>
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
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;
}
That's all to make it almost decent this template without going to change nothing else on template files.
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 [i]dl dd dt[/i] 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 [i][b]li row[/b][/i].
To get the look on prosilver or any other theme that respect the same DOM it can be done like this:
On phpBB prosilver [b]overall_footer.html[/b], [size=120]immediately after this code:[/size]
[code]<!-- EVENT overall_footer_body_after -->[/code]
[size=150][b]ADD this snippet:[/b][/size]
[code]<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>
[/code]
Remember to recompile Stale Templates into ACP after applied and re-set to NO when you see the result is ok on frontend layout.
[b]About font size:[/b] i just changed the font-size to be 12px into the CSS for the [b][i]body selector[/i][/b].
File:
[i]/styles/prosilver/theme/[b]common.css[/b][/i]
[code]
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;
}[/code]
That's all to make it almost decent this template without going to change nothing else on template files.