Login or Sign Up to become a member!
LessThanDot Sit Logo

LessThanDot

Web Developer

Less Than Dot is a community of passionate IT professionals and enthusiasts dedicated to sharing technical knowledge, experience, and assistance. Inside you will find reference materials, interesting technical discussions, and expert tips and commentary. Once you register for an account you will have immediate access to the forums and all past articles and commentaries.

LTD Social Sitings

Lessthandot twitter Lessthandot Linkedin Lessthandot friendfeed Lessthandot facebook Lessthandot rss

Note: Watch for social icons on posts by your favorite authors to follow their postings on these and other social sites.

Your profile

    Tools

    Tag cloud

    .net ajax asp.net asp.net mvc c# chrome firefox google html ie8 iis internet explorer javascript jquery jtable lessthandot mvc nancy node.js perl rails razor ria ruby rubymine signalr silverlight sql server 2008 vb.net webmatrix

    Authors

    Main Categories

    Search

    XML Feeds

    What is RSS?

    Google Ads

    « What Does a Web Developer Need To KnowThe Many Functions of WebMatrix »
    5
    comments

    Making a jQuery Mobile style for a PHPBB forum

    by Christiaan Baes (chrissie1) on Jun 26, 2011 in categories PHP, Javascript
    Instapaper

    Introduction

    At Lessthandot we use PHPBB3 as our forum software and it's no secret. It has it's quirks and I don't like the codebase very much but after using it for so long you get used to it. So I decided to make a mobile part for it. The aim was to make it simple and less bandwidth heavy.

    I have style, baby

    The first thing to do is to create a new style. For this you go to the styles forlder and add a new folder. Then you add 3 more folders to that. Namely: Imageset, template and theme. And you copy the cfg files from another style over and change them a little. You need 4 cfg files. you nees style.cfg in your new style folder and you need imageset.cfg, template.cfg and theme.cfg in their respective folders.
    Then you need at least a few templates to make this work. Let's start with overall_header.html and overall_footer.html.

    text
    Line number Off | Hide | Select all
    1. <html>
    2. <head>
    3.     <link rel="shortcut icon" href="{SITE_URL_MASTER}favicon.ico" type="image/vnd.microsoft.icon" />
    4.     <link href="{T_STYLESHEET_LINK}" rel="stylesheet" type="text/css" media="screen, projection" />
    5.     <link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
    6.     <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
    7.     <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
    8.     <script type="text/javascript" src="{SITE_URL_MASTER}includes/geshicode.js"></script>
    9.     <title>{PAGE_TITLE}</title>
    10. </head>
    11. <div id="content"><a name="start_here"></a>
    12.     <div data-role="page" data-theme="b">
    13.             <div data-role="header">
    14.                 {LOGINMOBILE}
    15.                 <h1>Lessthandot - Forum</h1>
    16.             </div>
    17.             <div data-role="navbar">
    18.                 <ul>
    19.                   <li><a href="search.php?search_id=newposts&style=5">New posts</a></li>
    20.                   <li><a href="search.php?search_id=active_topics&style=5">Active posts</a></li>
    21.                   <li><a href="viewonline.php?style=5">View online</a></li>
    22.                 </ul>
    23.             </div>
    24.             <div data-role="content">
    text
    Line number Off | Hide | Select all
    1. </div> <!-- content -->
    2.             <div data-role="footer" class="ui-bar">
    3.                 <a href="index.php?style=5" data-role="button">Forum</a>
    4.                 <a href="{SITE_URL_MASTER}mobileindex.php" data-role="button">Blogs</a>
    5.             </div>
    6.         </div> <!-- page -->
    7.     </body>
    8. </html>

    The first thing people see when they enter phpbb is the forumlist. So we add that to the mix. Here is index_body.html and forumlist_body.html.

    text
    Line number Off | Hide | Select all
    1. <!-- INCLUDE overall_header.html -->
    2.  
    3. <!-- INCLUDE forumlist_body.html -->
    4.  
    5. <!-- INCLUDE overall_footer.html -->
    text
    Line number Off | Hide | Select all
    1. <h3>Forums</h3>
    2. <ul data-role="listview" data-theme="a">
    3. <!-- BEGIN forumrow -->
    4.     <!-- IF not forumrow.S_IS_CAT -->
    5.         <li><a href="{forumrow.U_VIEWFORUM}">{forumrow.FORUM_NAME}</a></li>
    6.     <!-- ENDIF -->
    7. <!-- END forumrow -->
    8. </ul>

    And here is the result.

    I pick the above style by adding style= and it's id to the URL. The above does not work when I'm not logged in however which is a shame but I'm looking in to that. So first I had to install and activate the style. you can do that in the administrator part of PHPBB.

    If you then look at the URL of preview of the mobile style you will see a parameter style= and an id, that's the id you want.

    What you then also need is a viewforum_body.html.

    text
    Line number Off | Hide | Select all
    1. <!-- INCLUDE overall_header.html -->
    2. <h2>{FORUM_NAME}</h2>
    3. <!-- IF S_HAS_SUBFORUM -->
    4.     <!-- INCLUDE forumlist_body.html -->
    5. <!-- ENDIF -->
    6.  
    7. <h3>Posts</h3>
    8. <ul data-role="listview" data-theme="b">
    9. <!-- BEGIN topicrow -->
    10.     <li><!-- IF topicrow.S_UNREAD_TOPIC --><a href="{topicrow.U_NEWEST_POST}">{NEWEST_POST_IMG}</a> <!-- ENDIF --><a href="{topicrow.U_VIEW_TOPIC}">{topicrow.TOPIC_TITLE}</a></li>
    11. <!-- END topicrow -->
    12. </ul>
    13. <br />
    14. <!-- IF PAGINATION_MOBILE -->
    15. <div data-role="navbar">
    16.     <ul>
    17.         {PAGINATION_MOBILE}
    18.     </ul>
    19. </div>
    20. <!-- ENDIF -->
    21.    
    22. <!-- INCLUDE overall_footer.html -->

    And you need aonther way for the pagination to work. So I added a function to functions.php.

    Which looks like this.

    php
    Line number Off | Hide | Select all
    1. function generate_mobile_pagination($base_url, $num_items, $per_page, $start_item)
    2. {
    3.     global $template, $user;
    4.  
    5.     // Make sure $per_page is a valid value
    6.     $per_page = ($per_page <= 0) ? 1 : $per_page;
    7.  
    8.     $total_pages = ceil($num_items / $per_page);
    9.  
    10.     if ($total_pages == 1 || !$num_items)
    11.     {
    12.         return false;
    13.     }
    14.  
    15.     $on_page = floor($start_item / $per_page) + 1;
    16.     $url_delim = (strpos($base_url, '?') === false) ? '?' : '&amp;';
    17.  
    18.     $page_string = ($on_page == 1)? '<li><a href="' . $base_url . '"  class="ui-btn-active">1</a></li>': '<li><a href="' . $base_url . '">1</a></li>';
    19.    
    20.     if ($total_pages > 4)
    21.     {
    22.         $start_cnt = min(max(1, $on_page - 2), $total_pages - 4);
    23.         $end_cnt = max(min($total_pages, $on_page + 2), 5);
    24.  
    25.         for ($i = $start_cnt + 1; $i < $end_cnt; $i++)
    26.         {
    27.             $page_string .= ($i == $on_page) ? '<li><a href="' . $base_url . '"  class="ui-btn-active">'. $i .'</a></li>' : '<li><a href="' . $base_url . "{$url_delim}start=" . (($i - 1) * $per_page) . '">' . $i . '</a></li>';
    28.         }
    29.     }
    30.     else
    31.     {
    32.         for ($i = 2; $i < $total_pages; $i++)
    33.         {
    34.             $page_string .= ($i == $on_page) ? '<li><a href="' . $base_url . '"  class="ui-btn-active">'. $i .'</a></li>' : '<li><a href="' . $base_url . "{$url_delim}start=" . (($i - 1) * $per_page) . '">' . $i . '</a></li>';
    35.         }
    36.     }
    37.  
    38.     $page_string .= ($on_page == $total_pages) ? '<li><a href="' . $base_url . '"  class="ui-btn-active">'. $total_pages .'</a></li>' : '<li><a href="' . $base_url . "{$url_delim}start=" . (($total_pages - 1) * $per_page) . '">' . $total_pages . '</a></li>';
    39.  
    40.     return $page_string;
    41. }

    you need to add the variable PAGINATION_MOBILE also to viewtopic.php and viewforum.php since they both will use it and hand it over to the template.

    Here is a view of viewtopic.

    And here is a view of the pagination.

    Now all we need to do is show the topic. We will need to copy bbcode.html for that (just copy it from one of the other themes). And we need a viewtopic_body.html.

    text
    Line number Off | Hide | Select all
    1. <!-- INCLUDE overall_header.html -->
    2. <h2>{TOPIC_TITLE}</h2>
    3. <!-- BEGIN postrow -->
    4.     <h3>{postrow.POST_SUBJECT}</h3>
    5.     <p class="author"><strong>{postrow.POST_AUTHOR}</strong> {L_POSTED_ON_DATE} {postrow.POST_DATE} </p>
    6.     <div class="content">{postrow.MESSAGE}</div>
    7.     <!-- IF postrow.SIGNATURE --><div class="signature">{postrow.SIGNATURE}</div><!-- ENDIF -->
    8.     <hr class="divider" />
    9. <!-- END postrow -->
    10. <!-- IF PAGINATION_MOBILE -->
    11. <div data-role="navbar">
    12.     <ul>
    13.         {PAGINATION_MOBILE}
    14.     </ul>
    15. </div>
    16. <!-- ENDIF -->
    17.  
    18. <!-- INCLUDE overall_footer.html -->

    With this as the result.

    And now all that is left to do is to make styles for new posts, active posts and view online. Which are easy once you understand what I did above.

    So this was the readonlyversion of the mobile style, next up will be the to add post reply to it all and login/logout.

    Conclusion

    Making a new mobile style for phpbb was reasonably easy so go ahead make your own ;-).

    About the Author

    User bio imageChris is awesome.
    Social SitingsTwitterHomePageLTD RSS Feed
    4084 views
    Read More Posts by Christiaan Baes (chrissie1)
    InstapaperVote on HN

    5 comments

    Comment from: Freeman [Visitor] · http://www.androidsrbija.com
    Freeman Nice tutorial. Thanks for the tips.
    I've started creating mobile theme for my forum, and I had problem with styling pagination. I'll try your solution.
    07/21/11 @ 04:14
    Comment from: Bob [Visitor]
    Bob I tried this and it seems promising. The only thing is that the viewtopic_body.html page seems to be having issues.

    Most 90 percent of them don't show up. I get a blank entry instead. Clicking on it takes me back to the forum page.

    A few do show up and work when clicked. I'm using 3.0.8 as the site foundation. Any thoughts on why it wouldn't work?
    08/07/11 @ 10:33
    Comment from: Christiaan Baes (chrissie1) [Member]
    Christiaan Baes (chrissie1) no idea I should see the html it produces for that.
    08/07/11 @ 10:41
    Comment from: Bob [Visitor]
    Bob Ok. I think I found the problem. In viewforum_body.html,

    I had to change this:

    {NEWEST_POST_IMG} {topicrow.TOPIC_TITLE}

    to this:


    {topicrow.TOPIC_TITLE} {topicrow.TOPIC_TITLE}{topicrow.TOPIC_TITLE}

    Note: I had to use the escape character (/) in front of all the anchor tags. (it wouldn't let me post otherwise.)
    08/07/11 @ 11:32
    Comment from: Bob [Visitor]
    Bob Not sure if I'm helping or being a pain... :)

    But it will help if you add the following meta tags to overall_header.html. These will ensure the app sizes appropriately for any iOS devices.







    Without these tags, the page looks like a standard web page (needing pinching and scrolling) on iOS devices.

    Note: I had to escape the meta tags to be able to post this.
    08/07/11 @ 11:38

    Leave a comment


    Your email address will not be revealed on this site.

    To mislead the spambots.

    Your URL will be displayed.
    (Line breaks become <br />)
    (Name, email & website)
    (Allow users to contact you through a message form (your email will not be revealed.)

    Powered by B2Evolution
    Valid XHTML | Valid CSS