Vers 3 - Prosilver theme column colored, vertical aligned - JS/jQuery only
Posted: 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 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:
ADD this snippet:
Recompile template.
Can be improved, so next time will be vers 4!
Cheers to all lovely and cool people!
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 -->
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>
Can be improved, so next time will be vers 4!
Cheers to all lovely and cool people!