2013-09-06, 08:28 PM
Edit: The patch is too much of a hack to use with anything besides my own forum. People who want to use MyBB on a mobile site should look at MyBB-GoMobile; I have made a copy of the program (70k zipfile) should that website ever go down.
A cursory glance shows that there isn't a formal project undergoing active development getting MyBB to look decent on a smartphone (for example, http://community.mybb.com/thread-76078.html ) (Edit MyBB Go Mobile’s web page is closed, but here’s a GitHub copy of the software: https://github.com/jasonliehr/MyBB-GoMobile )
That in mind, I just went ahead and hacked smartphone support in to MyBB this morning.
What I did requires a working knowledge of HTML and CSS. First of all, I hacked the MyBB source to change the selector for the "global.css" file so that smart phones do not see it:
http://samiam.org/software/MyBB-1.6-smartphone.patch
Once I did that, I then did some template hacking. The goal of the hacks was to:
This code tells smartphones to load the alternative forum_smartphone.css file, and to not be small text with pinch zoom enabled.
The forum_smartphone.css file has CSS like this:
Here, we see it hiding some things (like my logo, which is too big for a smart phone, as well as the menu at the top) and providing alternate simplified versions of other elements.
I then modified some templates to not clutter a small smartphone screen with too much information. For example, here is the forumdisplay_subforums template:
The important thing to note is the "nomobile" in most table columns; only the forum name is visible on a smartphone screen.
I made similar edits in forumdisplay_threadlist, forumdisplay_threadlist_rating, forumdisplay_thread_rating, forumdisplay_thread, showthread, showthread_quickreply, and possibly some other templates.
The point being: While MyBB was developed before the explosion of smartphones, its templating system is flexible enough to look nice on smartphones once a small patch is applied to the source code to change how the global CSS selector looks.
A cursory glance shows that there isn't a formal project undergoing active development getting MyBB to look decent on a smartphone (for example, http://community.mybb.com/thread-76078.html ) (Edit MyBB Go Mobile’s web page is closed, but here’s a GitHub copy of the software: https://github.com/jasonliehr/MyBB-GoMobile )
That in mind, I just went ahead and hacked smartphone support in to MyBB this morning.
What I did requires a working knowledge of HTML and CSS. First of all, I hacked the MyBB source to change the selector for the "global.css" file so that smart phones do not see it:
http://samiam.org/software/MyBB-1.6-smartphone.patch
Once I did that, I then did some template hacking. The goal of the hacks was to:
- Have an alternate stylesheet visible to mobile users
- Reduce the clutter on small screens by hiding some fields from smartphone users.
<link rel="stylesheet" type="text/css" href="/forum_smartphone.css"
media="only screen and (max-width: 640px)" />
<meta name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"
>
This code tells smartphones to load the alternative forum_smartphone.css file, and to not be small text with pinch zoom enabled.
The forum_smartphone.css file has CSS like this:
.logo { display: none; }
.nomobile { display: none; }
.hidden { display: none; }
.trow_sep {
background: #e5e5e5;
color: #000;
font-size: 10pt;
font-family: Verdana, "Bitstream Vera Sans", Geneva, "DejaVu Sans", sans-serif;
font-weight: normal;
}
.menu {
display: none;
}
#panel {
font-family: Verdana, "Bitstream Vera Sans", Geneva, "DejaVu Sans", sans-serif;
background: #8fc1f2;
font-size: 10pt;
padding: 2px;
}
#panel .remember_me input {
vertical-align: middle;
margin-top: -1px;
}
Here, we see it hiding some things (like my logo, which is too big for a smart phone, as well as the menu at the top) and providing alternate simplified versions of other elements.
I then modified some templates to not clutter a small smartphone screen with too much information. For example, here is the forumdisplay_subforums template:
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="thead" colspan="5" align="center"><strong>{$lang->sub_forums_in}</strong></td>
</tr>
<tr>
<td class="tcat" width="2%"> </td>
<td class="tcat" width="59%"><span class="smalltext"><strong>{$lang->forumbit_forum}</strong></span></td>
<td class="nomobile tcat" width="7%" align="center" style="white-space: nowrap"><span class="smalltext"><strong>{$lang->forumbit_threads}</strong></span></td>
<td class="nomobile tcat" width="7%" align="center" style="white-space: nowrap"><span class="smalltext"><strong>{$lang->forumbit_posts}</strong></span></td>
<td class="nomobile tcat" width="15%" align="center"><span class="smalltext"><strong>{$lang->forumbit_lastpost}</strong></span></td>
</tr>
{$forums}
</table>
<br />
The important thing to note is the "nomobile" in most table columns; only the forum name is visible on a smartphone screen.
I made similar edits in forumdisplay_threadlist, forumdisplay_threadlist_rating, forumdisplay_thread_rating, forumdisplay_thread, showthread, showthread_quickreply, and possibly some other templates.
The point being: While MyBB was developed before the explosion of smartphones, its templating system is flexible enough to look nice on smartphones once a small patch is applied to the source code to change how the global CSS selector looks.