This guide currently covers the default SMF theme. In the future, I'll extend it so it explains how to do this for custom themes as well 
I am currently rewriting sections of this, and will post a significantly improved version soon
This topic will aim to show you how to integrate your SMF installation into your current website, using SMF's layer system (in fact, this is how the SMF site itself is powered). This takes a little bit of work, but isn't overly hard to achieve. The end result is something like what I've done:
http://www.daniel15.com/forum/.
This guide assumes you have basic (X)HTML and CSS knowledge. If you've made your website, you probably already have enough knowledge in this area
. If not, some guides on CSS and HTML are available here:
http://www.w3schools.com/htmlhttp://www.w3schools.com/xhtmlhttp://www.w3schools.com/cssWhen I say HTML, I really mean XHTML, but the difference is more like a new version than a separate language. XHTML is preferred, but if you know HTML it should be fine. For more information on them and their differences, see the tutorials above
Overview:
Now, we'll begin with an explanation of the layer system
The layer system - What is it?SMF's templating system uses a thing called "layers". Essentially, a layer is simply two sub-templates, one that goes above the content, and another that goes below the content. For example, the default layer is called "main", which means that "main_above" is above the content, and "main_below" is below the content:
Since you're integrating the forum into your site, we'll add a new layer called "site". This layer will be before the "main" layer, so the order will be site_above --> main_above --> Content --> main_below --> site_below
Very first steps - Website templateThe first thing you need is get the contents for the new layer. I assume that you have a HTML template for your current site, so we'll use that. For the purposes of this tutorial, I'll be using this template:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
</head>
<body>
<h1 align="center">My really cool website</h1>
<div align="center"><a href="#">Link</a> | <a href="#">Link</a> | <a href="#">Link</a> | <a href="#">Link</a> | <a href="#">Link</a></div>
<hr />
This would be the actual content!<br />
bla bla bla
<hr />
©2007 Your site
</body>
</html>
You will need to split this into two files, one for the header and one for the footer. For the header, copy all text after the <body> tag until the point where the page content begins, and save this into a file called header.php. For the purpose of this tutorial, this code would be used:
<h1 align="center">My really cool website</h1>
<div align="center"><a href="#">Link</a> | <a href="#">Link</a> | <a href="#">Link</a> | <a href="#">Link</a> | <a href="#">Link</a></div>
<hr />
You also need to do a similar thing for the footer. Copy all the text from the end of the content until the </body> tag, and save it into a file called footer.php. Again, for the purpose of this tutorial, this code will be used:
<hr />
©2007 Your site
Once you've done this, the next thing you'll want to do is make a copy of the default theme. To do so, go to the Themes and Layout section of the admin panel. Under "Install a New Theme", type what you want to call the new theme into the
Create a copy of Default named box. You will get a prompt asking "Install a new theme?" - Please say yes. After doing this, the URL in your address bar will have something like
theme_id=4 in it... Remember this ID for later!
One of the very first things you may want to do is change some of the colours of your forum, to 'fit in' better with the colours used on your site. To do so, edit the Themes/[your theme name]/style.css file. There are comments in this file, but the main ones are catbg and titlebg (various headings), windowbg1, windowbg2 and windowbg3 (background colours for posts, etc.), and bordercolor/tborder (borders for tables, etc.).
Split up index.template.phpSince we've created the new theme, the next step is to edit the index.template.php file. I've attached a base index.template.php file which you may use (save it into Themes/[your theme name]). This is SMF 1.1.1's index.template.php, except it has been split into two layers (site and main). The site_above sub-template contains everything from the very start of the page to the <body> tag. The site_below sub-template contains everything directly under the body. The main_above and main_below sub-templates contain the top (info box, menu, etc.) and bottom (copyright) of the actual forum.
The index.template.php file assumes that header.php and footer.php are in your forum's directory. If they're not, either move them there, or edit the index.template.php file (search for
include('header.php'); and
include('footer.php');, and change the paths to suit
CSS stylesheets?If your site uses a CSS stylesheet, you'll need to add a link to the stylesheet to index.template.php (otherwise, the styles won't come up). To do this, open index.template.php, and find:
// ]]></script>
</head>
<body>';
Replace with:
// ]]></script>
<link rel="stylesheet" type="text/css" href="http://www.example.com/style.css" />
</head>
<body>';
Replace
http://www.example.com/style.css with the correct URL (this can be found in your site's template, usually near the top).
Database ModificationsThere's one very vital thing we need to do now. We've added a new layer, but SMF doesn't yet know about this. So, if you go to your forum, it would look really bad (no header or footer). To tell SMF about the layers, we need to run a MySQL query in phpMyAdmin (if you don't know what phpMyAdmin is, take a look at the
What is phpMyAdmin? topic). Open phpMyAdmin, go to the SQL tab, and enter this in:
REPLACE INTO smf_themes
(ID_THEME, variable, value)
VALUES (4, 'theme_layers', 'site,main');
This tells SMF that you want to use two layers: site, and then main. Replace
smf_ with your database prefix (smf_ by default), and
4 with the theme's ID number (you found this when adding the theme - If you don't remember it, go to the admin panel, go to Themes and Layout --> Themes and Settings, click on the name of the theme, and look for the th= in the URL [eg.
th=4]. This is the ID).
We're done!That's about all we need to do. In the "Themes and Layout" section of the admin panel, make this theme the default one (choose it in the "Overall forum default" dropdown box), and visit your forum. If everything worked correctly, it should look perfect
SSI stuffNow that you've done this, you can use SMF's SSI functions to power your site. Doing this is very simple. Try creating a file called test.php in your forum's directory, and place the following into it:
<?php
error_reporting(E_ALL);
// Theme we're going to use
$ssi_theme = 4;
// Layers we're going to use
$ssi_layers = array('site');
// Enable GZip compression (saves bandwidth)
$ssi_gzip = true;
require('SSI.php');
echo 'See? SMF is cool :)';
ssi_shutdown();
?>
Replace
4 with the theme ID (found earlier).
Now, go to the page. If successful, it will show the text "See? SMF is cool
" with your header and footer
. You can use this to power anything from a few pages, up to a whole site (as I've done at
http://www.daniel15.com/). Have fun!
Feel free to reply here if you have any problems with this
