Posts from the 'Web Design' Category

Customize a SMF forum to look like your site

SMF (Simple Machines Forum) is a standard install for many users of Fantastico. It’s a robust, easy to configure, PHP/MySQL-based discussion forum that is common all over the web. What’s more, there are lots of templates available to allow you to customize the look of your SMF forum. These templates vary greatly from the austere to the plain bizarre, but what if you want your SMF forum to fit nicely into your existing website? Read on…

[Note: this article requires familiarity with HTML/CSS and a bit of PHP]

A client of ours recently asked us to do precisely that – take the SMF back end and fit it into the site we had built for him. Well, after some rummaging around in the SMF installed files we discovered that you only need to modify one PHP file and add a few CSS tweaks in order to get the forum fitting into your website. (We’ll show you our own results here as soon as the site in question goes live.) Meanwhile, here’s how you do it.

Step 1: set up SMF with a new theme

  • Install a SMF forum on your site (use Fantasico if you can – it’s really easy)
  • Now find a forum theme that is close to what you want for your site. There are hundreds of themes here. Many more can be found by doing a quick internet search.
  • Download the .ZIP file of the theme you like then login into your SMF administrator interface.
  • In the sidebar click on “Themes and Layouts” and follow the instructions to install your theme from the .ZIP file (no need to decompress). The options are at the bottom of the page.
  • Set the newly installed theme as the default theme for your site: “Overall forum default” and “Reset everyone to” [name of your theme]. At the same time, make sure users can’t chose to modify their viewing theme or they might break out of your modifications. This is done by unchecking “Allow members to select their own themes” and “Allow members to select the “Default” theme.” Now they can only use your theme.

Step 2: modify the index.template.php file

  • FTP into your web site and navigate to the location where you installed SMF. In there is a folder called “Themes” and in it you should see a file called “index.template.php” This is the only file you’ll need to modify to get your SMF forum wrapped up in you site.
  • The HTML of you document is buried quite deep in PHP tags but it should be navigable. Start by adding links to your CSS file(s) in the head of the page.
  • To modify the HTML, we wrapped the whole content of the body tag in our standard page template and it worked great. Give it a go!
  • If you’re using a CSS file for your site with a global reset that removes all padding and margins from HTML elements, including table, tr and td’s, you may find that it ruins the formatting of your tables in your forum. The solution? Create a separate stlye sheet for your forum that does not include table, tr and td zeroing.
  • Your forum should now look like your site

Step 3: final adjustments

  • Return to the SMF admin interface and click on “Current Theme” in the sidebar. Rename your theme to the name of your site.
  • Walk through the SMF admin interface setting up any other options you require – it’s pretty simple.

And that’s it. Your forum is now wrapped up in your site template – it’s really that simple!

Get web design training in New York