[SMF 2.0xx] Integrating the forum into your site using SMF's layer system

Started by mulder1094, December 30, 2010, 05:23:02 PM

Previous topic - Next topic
Print
Go Down Pages1
User actions

mulder1094

December 30, 2010, 05:23:02 PM
Following on from the excellent layer workaround listed below on how to get SMF integrated into your site I have now made the necessary changes so that the code works with SMF 2.0.

The instructions on the original post below are exactly the same - and the edited index.template file is attached.

Quote from: Daniel15 on January 27, 2007, 02:49:11 AM



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:

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 :).
When 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. 

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 template
The 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:
Code Select

<!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 />
&copy;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.htm. For the purpose of this tutorial, this code would be used:
Code Select

<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:
Code Select

<hr />
&copy;2007 Your site




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.php
Since 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.htm'); and include('footer.htm');, 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:
Code Select

// ]]></script>
</head>
<body>';

Replace with:
Code Select

// ]]></script>
<link rel="stylesheet" type="text/css" href="http://www.example.com/style.css" />
</head>
<body>';

Replace with your correct URL (this can be found in your site's template, usually near the top).

Database Modifications
There'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.  Open phpMyAdmin, go to the SQL tab, and enter this in:
Code Select

REPLACE INTO smf_themes
(ID_THEME, variable, value)
VALUES (0, 'theme_layers', 'site,main');

You need to do this 3 times. (notice the number in the VALUES row changes.

Code Select

REPLACE INTO smf_themes
(ID_THEME, variable, value)
VALUES (1, 'theme_layers', 'site,main');


Code Select

REPLACE INTO smf_themes
(ID_THEME, variable, value)
VALUES (2, 'theme_layers', 'site,main');


Code Select

REPLACE INTO smf_themes
(ID_THEME, variable, value)
VALUES (3, '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  the theme's ID number


SSI stuff
Now 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:
Code Select

<?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();
?>

Now, go to the page. If successful, it will show the text "See? SMF is cool :)" with your header and footer :D. You can use this to power anything from a few pages, up to a whole site  Have fun! :D

Feel free to reply here if you have any problems with this :D

Deaks

#1
January 10, 2011, 05:23:30 PM
for 2.0 you will find that the ssi doesnt work as the layers are different
~~~~
Former SMF Project Manager
Former SMF Customizer

"For as lang as hunner o us is in life, in nae wey
will we thole the Soothron tae owergang us. In truth it isna for glory, or wealth, or
honours that we fecht, but for freedom alane, that nae honest cheil gies up but wi life
itsel."

GTWelsh

#2
April 28, 2011, 04:26:16 PM
Hello, where do I put the theme ID in the SQL code ?
Plus if the SSI stuff is wrong, what should I/we change to make it right ?

Sorry I'm new to this !

Thanks for the tutorial :)

ascaland

#3
April 28, 2011, 04:38:44 PM
Quote from: GTWelsh on April 28, 2011, 04:26:16 PM
Hello, where do I put the theme ID in the SQL code ?
Plus if the SSI stuff is wrong, what should I/we change to make it right ?

Sorry I'm new to this !

Thanks for the tutorial :)

You dont need to set a themeID with SQL or anything when using SSI. In the page you want to have SSI load the theme you want, you would use the $ssi_theme variable and give it the theme id. Here is an example of an SSI page using a SMF 2.0 forum,
Code Select
<?php

// Theme id
$ssi_theme = 1;
// Layers from the theme selected (html and body are found in index.template.php)
$ssi_layers = array('html', 'body');
// Enable gzip'd output
$ssi_gzip = true;
// Include SSI.php
require('smf2/SSI.php');

echo 'Hello world!';

// Show the template footer and shut down SSI
ssi_shutdown();

?>

NP90

#4
June 27, 2011, 01:42:09 PM
How do I undo this? I've replaced my old index.template.php file but what SQL commands would I need to reverse the changes?

Willie

#5
June 27, 2011, 02:27:46 PM
Quote from: Runic on January 10, 2011, 05:23:30 PM
for 2.0 you will find that the ssi doesnt work as the layers are different

The thread title is    (SMF 2.0xx) Integrating the forum into your site using SMF's layer system

That excludes 2.0, but it will work in all other 2.0xxs?

Is there another similar thread for 2.0?  I am trying to integrate SMF into my Joomla site.
Print
Go Up Pages1
User actions
Advertisement: