Subsilver theme - phpBB 3.1/2 - column colored - via jQuery

Post by **axew3** » Tue Aug 22, 2017 7:25 pm

OBSOLETE, check this instead:
viewtopic.php?f=17&t=889

This topic improve the code and the concept of this starting topic in another forum, where you may will look for the first script snippet, and reports, into this post: https://www.axew3.com/w3/index.php/foru ... =2296#2296

These are steps and procedure to have Forum list main page and Topics lists of the phpBB template Subsilver, colored as vertical columns, and which result you can see in this online working test (at time of this post) -

Open your style/prosilver/template/overall_footer.html file
search for:

Code: Select all

<!-- EVENT overall_footer_after -->

immediately after add the follow:

Code: Select all

<script type="text/javascript">
// w3all resizer

function w3all_resizer() {
// x ul.topiclist.topics
$('ul.topiclist.topics li.row dl.row-item').each(function () {
// cross problem fix about nodes check, first version, no dt vertical align, no table injection into dt
	//var hb1 = ($(this.childNodes[1].childNodes[3]).height());
  //var hb2 = ($(this.childNodes[1].childNodes[1]).height());
  
  // search for list-inner height that is wrapped into table ... see onload more below
  // on phpBB template viewforum_body.html has been removed the follow line to get this work:
  //		<!-- IF topicrow.S_UNREAD_TOPIC and not S_IS_BOT --><a href="{topicrow.U_NEWEST_POST}" class="row-item-link"></a><!-- ENDIF -->
  // because if not the follow will fail. Reason: the wrapAll on window load, will exclude this line, because it is outside list-inner
  // so if it is a new post row, a new element will result on DOM, and childnodes traverse here will fail to check and return (TypeError: this.childNodes[1].childNodes[1].childNodes[0] is undefined)
  // can be improved, but i not like to go more deep right now :)
 var hb1 = $(this.childNodes[1].childNodes[1].childNodes[0].childNodes[0].childNodes[0].childNodes[0]).height();
 var hb3 = $(this.childNodes[1].childNodes[1].childNodes[0].childNodes[0].childNodes[0].childNodes[0].childNodes[11]).height();
  var hbr = hb1; //Math.max(hb1, hb2);

 	if (hbr < 55){ hbr = 55; } // the needed min height for form list rows
 	if(hbr > 55 && hb3 !== null){ hbr += hb3+6; } // this may fail, for same reasons (about elements that are or not present): needed min height, more the pagination row height ... if there is one on this row and is detected in this way: to be improved
 	
      $(this).children().css({
          height: hbr + 'px',
          'padding':'0px'
        });
});

// x ul.topiclist.forums
$('ul.topiclist.forums li.row dl.row-item').each(function () {
// cross problem fix about nodes check, first version, no dt vertical align, no table injection into dt
	//var hb1 = ($(this.childNodes[1].childNodes[3]).height());
  //var hb2 = ($(this.childNodes[1].childNodes[1]).height());
  
 var hb1 = $(this.childNodes[1].childNodes[1].childNodes[0].childNodes[0].childNodes[0].childNodes[0]).height();
 
  var hbr = hb1; //Math.max(hb1, hb2);

 	if (hbr < 55){ hbr = 55; } // the needed min height for form list rows
      $(this,'ul.topiclist.forums li.row dl').children().css({
          height: hbr + 'px',
          'padding':'0px'
        });
});
}

$( window ).load(function() {
 $('ul.topiclist.forums li.row dl.row-item').each(function () {
 
  $(this.childNodes[3]).wrapInner( "<table 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 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 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 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 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 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\"></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;height:100%;width:100%\"><tbody><tr><td style=\"margin:0px;padding:0px;vertical-align:middle\"></td></tr></tbody></table>" );
 });
 w3all_resizer();
});

(function() {

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

  var resizeTimeout;
  function resizeThrottler() {
    // ignore resize events as long as an actualResizeHandler execution is in the queue
    if ( !resizeTimeout ) {
      resizeTimeout = setTimeout(function() {
        resizeTimeout = null;
        w3actualResizeHandler();
       // The actualResizeHandler will execute at a rate of 45fps
       }, 198);
    }
  }

function w3actualResizeHandler() {
    // handle the resize event
     w3all_resizer();
}

}());

</script>

For reasons explained on this post, https://www.axew3.com/w3/index.php/foru ... =2296#2296 to vertical align all elements, included first dt elements, it is necessary to remove (or as explained on linked post, the same could be achieved in different, several ways) into two template files the follow in this way:

Open your style/prosilver/template/viewforum_body.html file, search and REMOVE the following line:

Code: Select all

<!-- IF topicrow.S_UNREAD_TOPIC and not S_IS_BOT --><a href="{topicrow.U_NEWEST_POST}" class="row-item-link"></a><!-- ENDIF -->

Open your style/prosilver/template/forumlist_body.html file, search and REMOVE the following line:

Code: Select all

<!-- IF forumrow.S_UNREAD_FORUM --><a href="{forumrow.U_VIEWFORUM}" class="row-item-link"></a><!-- ENDIF -->

Save all files, replace and remember to Recompile phpBB template.
This work only into a default phpBB subsilver theme, while the concept can be applied with easy to any template, changing nodes to fit the needed.
It also can be improved, so any hint and/or comment will be nice.

To obtain the same colored theme as you see in this example and get the idea of what i've on fly change to get columned colors, this is the file (which you can compare with a text editor to see what i've add or comment out, that are few lines), or just replace into:
/styles/prosilver/theme/colours.css