You are herephpBB3 Mobile Style / Theme

phpBB3 Mobile Style / Theme

By hagrin - Posted on 15 June 2010

Update 4/3/2012 - So, it looks like phpBB Mobile's website now HTTP 500s and there are much better options for phpBB3 now. Check out these mobile phpBB themes here.

One of my users pointed out to me while phpBB 3 renders fine on mobile browsers with the default template, there's too much pinching and zooming and the such to read a phpBB forum effectively. Therefore, he wondered if there was a style I could implement with some browser detection so that mobile users would have a better phpBB experience. To my surprise, phpBB 3 has no inherent support for mobile browsers and it doesn't seem as if phpBB 4 has any plans on implementing a mobile style/theme/MOD by default. After a lot of searching and some trial and error, I finally found a working solution and wanted to write out that post here so people could follow.

I found phpBB Mobile which was only just recently developed (good timing) less than a month ago. It is a MOD for phpBB that allows for user agent detection so that if one of your normal users browses from their mobile phone, their browser's user agent is detected and a mobile style is used to display your forum. While there is some documentation and a forum dedicated to this MOD, I wanted to add some notes to their documentation.

  1. Download the phpBB Mobile MOD.
  2. Extract the archive locally before uploading to your server for easier manipulation.
  3. Inside the archive open /phpbb_mobile_(version)/install_phpbb_mobile.xml in a browser so that you can read the instructions.
  4. The first "step" you are presented with is a SQL CREATE TABLE command to create the phpbb_mobile table. Note, if you used a different table prefix for your phpBB 3 install, you need to change the table name in this SQL query (for instance, I used phpbb3_*). Run this SQL command on your database server.
  5. The next section is a "File Copy". Copy the files from your extracted archive in the /phpbb_mobile_(version)/root/ folder to the root section of your forum installation on the web server.
  6. The next section is called "Edits". Download the /includes/constants.php and /includes/session.php files from your web server and make the necessary edits locally and then re-upload back to your web server.
  7. You will be at the "DIY Instructions" section. Log into your Admin Control Panel, Click on the System tab, click on "Administration Control Panel" link on the left side vertical menu, click on Styles, click on Style management, click on Styles, and then in the drop down to the right select phpBB Mobile and click Add module.
  8. You should now click "Enable" to enable the module.

At this point, the MOD is installed, but still doesn't do anything "useful" for your mobile users. You still need to install your mobile styles and then create the browser rules and associate them with your mobile styles. You might be wondering if anyone has developed any good mobile styles. The best one I found was an iPhone style also made by phpBB Mobile.

  1. If you need to install a new mobile theme at this point, you must go back to the System -> Admin CP -> Styles -> Style management -> Styles page and Delete the phpBB Mobile MOD. Why? Because, if you go to the Styles tab when this MOD is installed (doesn't matter if Disabled or Enabled), you can't properly install new styles/themes. After this is done, install your mobile style as normal. After you are done installing the style, re-add/re-enable the phpBB Mobile MOD.
  2. At this point, you need to know what your mobile style's Style ID is. If you go to your database, browse the data in the phpbb_styles table (replace phpbb with whatever prefix you used) and you'll want to take note of the ID for your mobile style.
  3. In the Admin CP, click on the Styles tab. You will now notice that phpBB Mobile options are displayed right there on the Styles page. Here, you will add the rules for which style is shown for which browser. The way the rules work is that the "Browser" box should include some unique text string found in a specific browser's User Agent and then the ID for the style you want should go into Style box. So, for instance I added the following - "Android", "iPhone", "webOS" all pointing to style "5" which is my mobile style.

That's all you need to do! Now, obviously, with every upgrade you make to the core phpBB installation, you will have to make sure that this MOD doesn't break. Good luck.