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

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

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

Post by axew3 »

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


This script improve the previous one, where was necessary to edit the viewforum_body.html template file, due to a fail on check childNodes if an element a was present on output, produced by phpBB template may due to an unread post.

The columned result with vertical aligned elements you can see in action at date of this post into this online forum, can be viewed on main index-forum-list page and into view-forum page.

Nothing need to be changed on default phpBB template files except one: it is needed to add the following code into overall_footer.html file of the default Prosilver theme (or you may need to change the childNodes to search for, for any other different template.
If able, please post any suggestion to improve this wild on fly code.

Open overall_footer.html and maybe just before this line:

Code: Select all

<!-- IF S_PLUPLOAD --><!-- INCLUDE plupload.html --><!-- ENDIF -->
or just before the closing body tag add the following code:

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 () {
  // search now for list-inner height that is wrapped into table ... see onload more below
  // on phpBB template viewforum_body.html nothing been removed in this (little) improved version
try {
var hb1 = $(this.childNodes[1].childNodes[1].childNodes[0].childNodes[0].childNodes[0].childNodes[0]).height();
if (typeof hb1 !== 'undefined') {
	//console.log(hb1);
}
}
catch (e) {
	//console.log(e);
}
try {
var hdnp = $(this.childNodes[1].childNodes[3].childNodes[0].childNodes[0].childNodes[0].childNodes[0]).height();
if (typeof hdnp !== 'undefined') {
		hb1=hdnp;
} 
}
catch (e) {
	//console.log(e);
}
try {
var hb2 = $(this.childNodes[1].childNodes[1].childNodes[0].childNodes[0].childNodes[0].childNodes[0]).height();
}
catch (e) {
	//console.log(e);
}
try {
 var hb3 = $(this.childNodes[1].childNodes[1].childNodes[0].childNodes[0].childNodes[0].childNodes[0].childNodes[11]).height();
}
catch (e) {
	//console.log(e);
}
if (typeof hb2 == 'undefined') {
	 hb2 = hb1;
	}
 var hbr = Math.max(hb1, hb2);
 	if (hbr < 50){ hbr = 50; } // the needed min height for form list rows
 	if(hbr > 50 && hb3 !== null){ hbr += hb3+6; } //  the needed min height, more the pagination row, if there is one on this row
 	
      $(this).children().css({
          height: hbr + 'px',
          'padding':'0px'
        });    
});

// x ul.topiclist.forums
$('ul.topiclist.forums li.row dl.row-item').each(function () {
// cross fix node check
  // same above: search now for list-inner height that is wrapped into table ... see onload more below
	var hb1 = ($(this.childNodes[1].childNodes[3]).height());
  var hb2 = ($(this.childNodes[1].childNodes[1]).height());
  var hbr = 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>
Related ready CSS files edited on fly (so maybe to be improved) to use in conjunction and achieve the same result you see here, which are
common.css, content.css and colors.css of the default Prosilver theme are in the attachment. Remember to recompile phpBB template to changes take effect.
prosilver_css_column_colors.zip
(13.43 KiB) Downloaded 330 times