Grow your CSS skills. Land your dream job.

#48: Skinning phpBB

Creating a completely custom theme for the popular forums software phpBB would be a monster job. Fortunately, to get up and running quickly, we can simply wrap a default installation of phpBB into the skin of an existing site pretty easily. We do just that in this screencast, and work out the kinks that pop up.

Links from Video:

Comments

  1. Permalink to comment#

    Woot! Nice, I really wanted to know how to do this work, thanks Chris :)

  2. Hey, to fix the cache log in to the admin control panel and click purge cache and go to your styles and click refresh for everything.

    If you want to learn more there is startrekguide.com (not trying to advertise but its helpful)

    • Permalink to comment#

      About the Cache issues.. There is an option within the Admin Control Panel that allows you to avoid having to refresh the theme. This is not recommended as it causes more load on the server that can otherwise be avoided, but is certainly a temporary solution that makes editing a much smoother process.

      ACP / General / Load Settings / Recompile Stale Style Components / Yes

      With that enabled, no refresh/deleting is necessary.

      Just remember to turn it back off once finished.

  3. I could never figure phpBB out. Thank you so much.

  4. Permalink to comment#

    THANK YOU!

  5. Manko10
    Permalink to comment#

    Thanks, great Screecast!
    Long time ago I tried to make my own phpBB 3 theme and gave it up, thanks to show us how to make a theme. A little suggestion: you should also change the ugly default theme of phpBB 3 and its icons to match it to your site. ;-)

    But I really have to say: I would never use phpBB 3, because I dislike its “feature war”. It’s extremely oversized, I think.

    Anyway… Great podcast, thanks again!

  6. Libby
    Permalink to comment#

    Excllent thank you. I have to do this for a client and was muddling through. I especially like the live troubleshooting… and not I’m not kidding.

  7. Steve Robillard
    Permalink to comment#

    I am glad to see I am not the only one whose dog makes his presence known. I have been on more than one conference call when he barked or even better snored loud enough that the other person asked what that was. I finally gave up and named one of my software products after him (Digger).

  8. Permalink to comment#

    I can only watch ten minutes worth. Was looking forward to watching this :(

  9. Matt
    Permalink to comment#

    Great screen cast. How do you get rid of the top search bar to replace it with google search? or even just have the search bar in an better place, i.e. so it takes up less room.

    Would you say bbpress or PHPbb is better on a site using WP?

  10. Permalink to comment#

    Thanks a BAGILLION times! I was hoping you would cover this in one of your screencasts. I’ll love you forever for this.

  11. Permalink to comment#

    I preffer using MyBB since you can easly manage templates from the ACP ;) Actually skinning it and theme it is pretty pretty easy.

  12. This is a really nice tutorial, I am not a fan of PHPBB myself, I am a vbulletin man, maybe you could do one about that one day :)

  13. Permalink to comment#

    Id like to see one on bbPress :P Thanks for a great screencast, as always ;)

  14. Henry
    Permalink to comment#

    Nice videocast. For future editing, you can enable automatic style recompilation in the ACP (load settings). Also, for cleaner development of new styles it is an idea to use inheritance:

    http://www.phpbb.com/blog/2008/07/31/templating-just-got-easier/

    Cheers,

    H

  15. kayapsestinty
    Permalink to comment#

    Nothing seems to be easier than seeing someone whom you can help but not helping.
    I suggest we start giving it a try. Give love to the ones that need it.
    God will appreciate it.

  16. Shahzeb
    Permalink to comment#

    Brilliant ! Just used that to skin a phpBB forum into a wordpress site. Worked perfectly for me. Thanks a ton !

  17. Billy
    Permalink to comment#

    This tutorial describes how to put a static header and footer around phpbb. How does one wrap a dynamic wordpress header? My code in header.php contains all sorts of PHP that never gets rendered in a browser. Any help would be great. Thanks.

    • Permalink to comment#

      I agree, it needs an update (v2) with the times, trends of design etc if we are to use this with our WP Blogs/Front-Ends. Such as Responsive design BUT also fixed with but using new methods of customization instead of just waking the header and footer around phpBB Skin + use SubSilver instead of ProSilver as the skinning theme – a much better option and seen way more on Premium Skins also.

  18. Thanks so much for taking time to make this tutorial. It was just what I needed to point me in the right direction and get me started. Had to figure out a few things that where custom to my theme but after some hacking it looks great. Thanks again.

  19. Nihal Shaikh

    Thanks for this great tutorial…..appreciated!

  20. Permalink to comment#

    I like here!Because give me more knowlegdge!TKS!

  21. Adam
    Permalink to comment#

    I really like this tutorial! I am thinking about using it for a project that I am working on. However, I am using the WP Responsive theme that is pretty heavy on PHP integrated styling. Therefore, the straight-forward copying of the header and footer wrappers from WP becomes somewhat more tricky since the phpBB3 overall header and footer are both HTML files. So, I guess my question is… if I make the overall header and footer phpBB3 files into PHP files (from their standard html file), is this going to cause a lot of trouble with my links in the rest of phpBB3? I saw in the video that there were some extension re-writes of those files but you go through it pretty fast. I watched it a few times and didn’t quite understand what exactly happened. Can you help me out? Thanks!

  22. Permalink to comment#

    I think it’s time for a part 2 (or v2.0) of this screencast, it’s been 2yrs+ and how about a little more detail & how to start from scratch if you want to create a theme NOT using you’re site just put ontop, but more details as mentioned like colour changes to match you’re WP or whatever and creating header from scratch using your sites logo and color scheme only – the rest is customized by gfx (icons) and colour scheme using SubSilver instead of ProSilver this time – not enough people give the SubSilver a change, I think it has a much better layout and better customization options for the footer area etc.

    Well that’s my 2 cents.

    Thanks guys and Chris,
    @Code_Collective (Jay)

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".