Vers 3 - Prosilver theme column colored, vertical aligned - JS/jQuery only

[axew3]

At date of this post, you see phpBB column colored template js code applied on this installation.
See index and forum page how looks.

This is the version that never fail into default Subsilver template, despite elements added due to different options active or not (so some element on html output will exists or not).

On phpBB prosilver overall_footer.html, immediately after this code:

Code: Select all

<!-- IF S_ALLOW_CDN -->
	<script type="text/javascript">
		(function($){
			var $fa_cdn = $('head').find('link[rel="stylesheet"]').first(),
				$span = $('<span class="fa" style="display:none"></span>').appendTo('body');
			if ($span.css('fontFamily') !== 'FontAwesome' ) {
				$fa_cdn.after('<link href="{T_ASSETS_PATH}/css/font-awesome.min.css" rel="stylesheet">');
				$fa_cdn.remove();
			}
			$span.remove();
		})(jQuery);
	</script>
<!-- ENDIF -->

ADD this snippet:

Code: Select all

<script type="text/javascript">
// just a simple js template snippet swapper for default phpBB prosilver theme // axew3.com
function w3all_resizer() {
// x ul.topiclist.topics
$('ul.topiclist.topics li.row dl.row-item dt').each(function () {
 $($(this).siblings()).children().css({
   'height': $(this).height() + 'px'
  });
});
// x ul.topiclist.forums
$('ul.topiclist.forums li.row dt').each(function () {
 $($(this).siblings()).children().css({
   'height': $(this).height() + 'px'
  });
});
}// close w3all_resizer

$( document ).ready(function() {
 $('ul.topiclist.forums li.row dl.row-item').each(function () {
  $(this.childNodes[3]).wrapInner( "<table class=\"w3tab\" style=\"margin:0px;padding:0px;border-collapse:collapse;height:100%;width:100%\"><tbody><tr><td style=\"text-align:center;margin:0px;padding:0px;vertical-align:middle\"></td></tr></tbody></table>" );
  $(this.childNodes[3,5]).wrapInner( "<table class=\"w3tab\" style=\"margin:0px;padding:0px;border-collapse:collapse;height:100%;width:100%\"><tbody><tr><td style=\"text-align:center;margin:0px;padding:0px;vertical-align:middle\"></td></tr></tbody></table>" );
  $(this.childNodes[3,5,7]).wrapInner( "<table class=\"w3tab\" style=\"margin:0px;padding:0px;border-collapse:collapse;height:100%;width:100%\"><tbody><tr><td style=\"margin:0px;padding-left:6px;vertical-align:middle\"></td></tr></tbody></table>" );
 });
  $('ul.topiclist.topics li.row dl.row-item').each(function () {
  $(this.childNodes[3]).wrapInner( "<table class=\"w3tab\" style=\"margin:0px;padding:0px;border-collapse:collapse;height:100%;width:100%\"><tbody><tr><td style=\"text-align:center;margin:0px;padding:0px;vertical-align:middle\"></td></tr></tbody></table>" );
  $(this.childNodes[3,5]).wrapInner( "<table class=\"w3tab\" style=\"margin:0px;padding:0px;border-collapse:collapse;height:100%;width:100%\"><tbody><tr><td style=\"text-align:center;margin:0px;padding:0px;vertical-align:middle\"></td></tr></tbody></table>" );
  $(this.childNodes[3,5,7]).wrapInner( "<table class=\"w3tab\" style=\"margin:0px;padding:0px;border-collapse:collapse;height:100%;width:100%\"><tbody><tr><td style=\"margin:0px;padding-left:6px;vertical-align:middle\"></td></tr></tbody></table>" );
 });
$('ul.topiclist.topics li.row dl.row-item dt div.list-inner').each(function () {
   $(this).wrapAll( "<table style=\"margin:0px;padding:0px;border-collapse:collapse;height:100%;width:100%\"><tbody><tr><td style=\"margin:0px;padding:0px;vertical-align:middle;height:40px;\"></td></tr></tbody></table>" );
 });
$('ul.topiclist.forums li.row dl.row-item dt div.list-inner').each(function () {
   $(this).wrapAll( "<table style=\"margin:0px;padding:0px;border-collapse:collapse;width:100%;\"><tbody><tr><td style=\"margin:0px;padding:0px;vertical-align:middle;height:45px;\"></td></tr></tbody></table>" );
 });
 
  w3all_resizer();
});

(function() {
// CSS that will not change
$('ul.topiclist.forums li.row dl.row-item dd.topics,ul.topiclist.forums li.row dl.row-item dd.lastpost,ul.topiclist.topics li.row dl.row-item dd.posts,ul.topiclist.topics li.row dl.row-item dd.lastpost').css({
'background-color':'#e6e0f0'
});
$('ul.topiclist.forums li.row dl.row-item,ul.topiclist.topics li.row dl.row-item').css({
'margin':'0px'
});
$('ul.topiclist.forums li.row dl.row-item dt div.list-inner').css({
'padding-top':'10px'
});
$('ul.topiclist.forums li.row,ul.topiclist.topics li.row.bg1,ul.topiclist.topics li.row.bg2').css({
 'background-color':'#f0ecf5',
 'margin':'0px'
});
$('ul.topiclist.topics li.row.bg1.sticky,ul.topiclist.topics li.row.bg2.sticky,ul.topiclist.topics li.row.bg1.sticky dd.posts,ul.topiclist.topics li.row.bg2.sticky dd.posts,ul.topiclist.topics li.row.bg1.sticky dd.lastpost,ul.topiclist.topics li.row.bg2.sticky dd.lastpost').css({
'background-color':'#fffef2'
});
$('.rtl li.row dd, li.row dd').css({
'border-color':'#ffffff'
});

 window.addEventListener("resize", resizeThrottler, false);

  var resizeTimeout;
  function resizeThrottler() {
    if ( !resizeTimeout ) { // ignore as we are on queue
      resizeTimeout = setTimeout(function() {
        resizeTimeout = null;
        w3actualResizeHandler();
       }, 198); // execution rate
    }
  }
// handle resizer
function w3actualResizeHandler() {
     w3all_resizer();
}
}());
</script>

Recompile template.
Can be improved, so next time will be vers 4!
Cheers to all lovely and cool people!