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

User avatar
axew3
w3all User
w3all User
Posts: 1539
Joined: Fri Jan 22, 2016 5:15 pm
Location: Italy
Contact:

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

Post by axew3 » Tue Jan 01, 2019 3:36 pm

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 new version that never fail into any default Subsilver template, despite elements added due to different options active or not (so some element on html output will exists or not).

Shorter and faster
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 further more improved ... next time will be vers 4 then!
Cheers to all lovely and cool people!