Vers 4 - Prosilver theme items vertical aligned - jQuery only

[axew3]

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 -->

ADD this snippet:

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.