Logo
Web site home page

Old forum index

New forum

Advertising in moderation

Satellite forum archive

How to put images into forum

Cookie policy

VSAT information

Index of miscellaneous pages

Maps index

Use of satsig logo

Space and Satellite Communications forum

Making YaBB work responsive to mobile screens


I've just installed a new forum using 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.  See Space and Satellite Communications forum

I am not quite there yet but 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 &nbsp;  to space out the Social bookmarks, like this.

$show_bookmarks .=
qq~&nbsp;&nbsp;&nbsp;<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 4 Feb 2018  Eric Johnston