|
|
Making YaBB work responsive to mobile screens
I modified a forum YaBB 2.6.11 and spent 4 hours trying to make it work better on mobile size screens. I have a Galaxy S3 with screen 360 x 640 pixels.
I would like to share what I have done so far for the forum home page, as follows. I use my sftp program to directly edit the relevant files and upload them while doing History Delete and page Refresh on Chrome browser with More Tools developer Tools turned on with responsive demo showing.
Forum home page
===================================
cgi-bin\yabb2611\Templates\default\default.html
Add:
<meta name="viewport" content="width=device-width, initial-scale=1">
under <head>
Amend:
<div id="maincontainer">
<div id="container">
<table class="menutop" style="table-layout:fixed">
<colgroup>
<col style="width:auto" />
<col style="width:250" /> << change 250 to auto
<col style="width:auto" />
</colgroup>
===================================
htdocs/yabbfiles/Templates/Forum/default.css
body
change min-width from 770px to 320px
img
add max-width:100%;
add height:auto;
#maincontainer
change width from 91% to 99%
.small
change from 10px to 12px
.nav, .nav a, .nav a:visited
change from 10px to 12px
.message, #message, .prevwin
change from 8px to 1em
=====================================
cgi-bin\yabb2611\Templates\default\Loginout.template
Find 600px
Find 550px
Find 600px
Find 600px
Change all to 100%
======================================
cgi-bin\yabb2611\Sources/Display.pm
Insert several to space out the Social bookmarks, like this.
$show_bookmarks .=
qq~ <a href="$bm_url
=========================================
Reduce file sizes for some images:
These save a few bytes
htdocs/yabbfiles/templates/default/search.png reduced from 343 to 218
htdocs/yabbfiles/templates/default/online.png reduced from 1087 to 955
htdocs/yabbfiles/templates/default/login.png reduced from 1206 to 955
htdocs/yabbfiles/templates/default/info.png reduced from 1042 to 813
htdocs/yabbfiles/templates/default/boards.png reduced from 870 to 704
htdocs/yabbfiles/templates/default/back_to_top.png reduced from 303 to 181
htdocs/yabbfiles/templates/default/closebutton.png reduced from to 1265 to 673
The next one requires that you modify cgi-bin/yabb2611/Templates/default/default.html: change perl.gif to perl.png
cgi-non/yabb2611/Templates/default/perl.png 577 reduced from 1111 perl.gif
===========================================
Avoid render blocking by javascript.
Modify cgi-bin/yabb2611/Templates/default/default.html by adding async in one place thus:
<script type="text/javascript" async src="{yabb html_root}/cache.js"></script>
Note that YaBB.js is needed urgently to make the real time clock available.
============================================
Optimising forum board page
Process images to minimise file sizes ( used in () and file location/name )
Admin/Manage Templates.pm(1) Templates/default/Micon.def(2)
htdocs/yabbfiles/templates/default/announcement.png 470 was 627 gif
Admin/Manage Templates.pm(1) Templates/default/Micon.def(2)
htdocs/yabbfiles/templates/default/announcementlock.png 470 was 649 gif
Admin/Manage Templates.pm(2) Templates/default/Micon.def(4)
htdocs/yabbfiles/templates/default/hotthread.png 502 was 633 gif
Admin/Manage Templates.pm(1) Templates/default/Micon.def(2)
htdocs/yabbfiles/templates/default/locked.png 460 was 622 gif
Admin/Manage Templates.pm(1) Templates/default/Micon.def(2)
htdocs/yabbfiles/templates/default/locked_moved.png 475 was 639 gif
Admin/Attachments.pm(2) Admin/Manage Templates.pm(1) Admin/MemberGroups.pm(1) Templates/default/Micon.def(1)
htdocs/yabbfiles/templates/default/paperclip.png 151 was 875 gif
Admin/Manage Templates.pm(5) Admin/MemberGroups.pm(1) Convert.pl(12) Convert2x.pl(9) Templates/default/Micon.def(2)
htdocs/yabbfiles/templates/default/thread.png 434 was 600 gif
Manage Templates.pm(1) and Templates/default/Micon.def(2)
htdocs/yabbfiles/templates/default/veryhotthread.png 486 was 631 gif
All down to here 4th June 2017
============================================
Over-large rectangular blue icons down left side of forum index pages
There is an over-wide column on the left side of the forum index page:
with large blue rectangular icons board.png
The problem is in cgi-bin\yabb2611\templates\default\BoardIndex.template
<colgroup><!-- <col style="width:${brdpicwidth}px" /> -->
<!-- <col style="width:auto" /> -->
<!-- eric 26 aug 2017 -->
<col style="width:1%" />
<col style="width:59%" />
<col style="width:8%" />
<col style="width:8%" />
<col style="width:24%" />
</colgroup>~;
This improves matters in Chrome, but still too wide in Galaxy s3 mini native blue "earth" browser..
26 Aug 2017
===================================
Over-wide, fixed width, left column on topic messages
Problem with 360px wide screens.
1. file: cgi-bin/yabb2611/default/Display.template
Left column was 13em wide. Works better with 8em.
<colgroup><!-- was <col style="width:13em" /> -->
<!-- eric 28aug2017 -->
<col style="width:8em" />
<col style="width:auto" />
<col style="width:auto" />
<col style="width:auto" />
</colgroup>
2. too much padding
file: htdocs\yabbfiles\Templates\Forum\default.css
was:
.postcontainer {
background-color: #d7dbea;
padding: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
is:
.postcontainer {
background-color: #d7dbea;
padding: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
28 Aug 2017
=======================================
file: cgi-bin/yabb2611/Templates/default/BoardIndex.template
replace 12px by 3px, in first 2 places
was
<span class="small" style="float: left; margin-left: 12px;">
is
<span class="small" style="float: left; margin-left: 3px;">
13 Sept 2017
==========================================
To do list:
1. Merge these two javascripts into one file:
/yabbfiles/YaBB.js (must not be made async)
/yabbfiles/cache.js
2. Merge these .js into one file:
/yabbfiles/shjs/sh_main.js
/yabbfiles/shjs/sh_cpp.js
/yabbfiles/shjs/sh_css.js
/yabbfiles/shjs/sh_html.js
/yabbfiles/shjs/sh_java.js
/yabbfiles/shjs/sh_javascript.js
/yabbfiles/shjs/sh_pascal.js
/yabbfiles/shjs/sh_perl.js
/yabbfiles/shjs/sh_php.js
/yabbfiles/shjs/sh_sql.js
/yabbfiles/AJS.js
/yabbfiles/AJS_fx.js
/yabbfiles/greybox/gb_scripts.js
3. Get rid of the login/register box from all index pages except the home page or maybe put the register/login on an entirely separate static html page. The reason to get rid of the security warning at the top of pages which display the login/register box. It would be ok on https sites but not my cheap http site.
======================================
|
Hope the above helps. Send queries to me at eric@satsig.net ► Page created 3 June 2017, amended 14 August 2023. |