Advertisement:

Author Topic: Integrating the forum into your site...  (Read 263770 times)

Offline [Unknown]

  • SMF Friend
  • SMF Master
  • *
  • Posts: 36,102
  • Gender: Male
Integrating the forum into your site...
« on: November 09, 2004, 11:18:05 PM »
Update: An extended version of this guide is now available at http://www.simplemachines.org/community/index.php?topic=145838.0


In many cases, people want their forum to look like their main site.  To make this possible might take a little bit of work, but it really isn't all that difficult.

The first step is to know some basic CSS and HTML.  If you don't know these, and cannot bother to learn them, I hope you're willing to pay someone to help you.  Learning just basic CSS and HTML isn't that difficult, and the benefits are wonderful and great; I'm not writing this for those who want things handed to them on silver platters.  Sorry to those who don't for having to say that.

Some guides on CSS and HTML are available here:
http://www.w3schools.com/html
http://www.w3schools.com/xhtml
http://www.w3schools.com/css

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.  For more information on them and their differences, see the tutorials above.

Next, you'll want to make a copy of the default theme.  To do this, go into your administration center, and select "Theme and Layout Settings".  From there, under "Install a New Theme", type a name for your theme next to "Create a copy of Default named" and click Install!  You will be prompted to click OK - please do so.

Now you have a copy of the default theme.  If you want to customize the images for your theme, go to the theme's settings and change the URL from default/images to "yourname"/images, and use an FTP client to copy the files from default into your theme.

After this is done, you can use the style.css in your theme's directory to customize most of the colors.  Of course, this isn't exactly what you're looking for, but bare with me and get those customized.  There are comments in the file, but the main ones to worry about are titlebg (blue), windowbg and windowbg2 (shades of gray), and bordercolor/tborder. (backgrounds for tables, grid lines, etc.)

Moving to Your Layout

The next step is, of course, to make it look like your site.  I assume that, to do this, you already have a "template" of sorts made out of html - your site without the main content.  If you don't, making one would help markedly, but you may be able to wing it too.

Once you have this done, you'll want to split it into two parts: the header, and the footer.  Doing this makes it much easier to customize things, and can even make it easier to design your own site (with basic shtml or PHP includes.)  Put these two parts in a "header.php" and "footer.php" - don't worry, they don't have to have HTML in them at all, but they can.

The next step can be done in two separate ways.  One is cleaner, and makes it easier to use SSI to power your site (as is done here.)  The other is notably simpler and easier.  I'll cover the simpler one first.

You may notice that there's a lot of stuff in the header of the index template.  Much of this can be omitted, which is what we're going to do for simplicity's sake.  So, what we need to do is find the following:

Code: [Select]
<html
And keep going down until:
Code: [Select]
<body>
Delete it all.  We're going to start fresh, and simpler.  All you really need is: (note that this will screw up mutliple language support!)

Code: [Select]
<html><head>
<script language="JavaScript" type="text/javascript" src="', $settings['default_theme_url'], '/script.js"></script>
<script language="JavaScript" type="text/javascript"><!--
var smf_theme_url = "', $settings['theme_url'], '";
var smf_images_url = "', $settings['images_url'], '";
// --></script>
<title>', $context['page_title'], '</title>
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/style.css?rc1" />';

if ($context['browser']['needs_size_fix'])
echo '
<link rel="stylesheet" type="text/css" href="', $settings['default_theme_url'], '/fonts-compat.css" />
', $context['html_headers'], '
</head>
<body>

That's probably less scary, right?  If you want the things we just took out (which make browsing better in cases, and internationalization better, etc.) it can be left in.  Now, after the <body> should be a ';.  Make sure to leave that there.  After that line, add:

Code: [Select]
include('header.php');
If you didn't put header.php in the same place as the forum, you may need to make it '../header.php'.  After that, we're going to remove the upshrink part (assuming you remove the above part) because it won't work anymore.  That means removing:

Code: [Select]
<a href="#" onclick="shrinkHeader(!current_header); return false;"><img id="upshrink" src="', $settings['images_url'], '/', empty($options['collapse_header']) ? 'upshrink.gif' : 'upshrink2.gif', '" alt="*" title="', $txt['upshrink_description'], '" style="margin: 2px 0;" border="0" /></a><img id="upshrinkTemp" src="', $settings['images_url'], '/blank.gif" alt="" style="margin-right: 2ex;" />


Again, don't remove that last '; because it makes things work.  Okay, so we're almost done now.  The next step is to add the footer.  To do that, look for:
Code: [Select]
</body>
Above that, you will see a line that says echo ' - and, above that, we want to add:

Code: [Select]
include('footer.php');
Again, if you put the outside the forum's directory, you'll want to use ../ to "get to it".  That was the basic method.

I'll post the more advanced method in a reply.

-[Unknown]



(Edit: Stickied topic. - Motoko)
« Last Edit: February 09, 2007, 03:08:08 AM by Daniel15 »

Offline [Unknown]

  • SMF Friend
  • SMF Master
  • *
  • Posts: 36,102
  • Gender: Male
Re: Integrating the forum into your site...
« Reply #1 on: November 09, 2004, 11:36:22 PM »
The Cooler Way

This other way, we're going to use what are called "layers".  Because of this, we will need to make a small change to the database.  If you don't have a way to get to the database, such as phpMyAdmin, you may wish to install and learn how to use it (phpMyAdmin, I mean.)

So, the first step is to create the "layer" itself.  A layer is simply two sub templates that go above and below the content.  For example, by default the 'main' layer is used, which means that above the main part of the page 'main_above' will be shown... and below, 'main_below' will be shown.  Not too difficult, right?

So, creating the layer only means creating two sub templates.  At the end of index.template.php, right before the ?>, add:
Code: [Select]
function template_site_above()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;

echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<script language="JavaScript" type="text/javascript" src="', $settings['default_theme_url'], '/script.js"></script>
<script language="JavaScript" type="text/javascript"><!--
var smf_theme_url = "', $settings['theme_url'], '";
var smf_images_url = "', $settings['images_url'], '";
// --></script>
<title>', $context['page_title'], '</title>
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/style.css?rc1" />';

if ($context['browser']['needs_size_fix'])
echo '
<link rel="stylesheet" type="text/css" href="', $settings['default_theme_url'], '/fonts-compat.css" />
', $context['html_headers'], '
</head>
<body>';

include('header.php');
}

function template_site_below()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;

include('footer.php');

echo '
</body></html>';
}

Again, if you have the header.php and footer.php files outside of your forum directory, you may have to change those lines slightly to point things to them.  So, if they're in your site's directory, just outside the forum directory, use ../header.php and ../footer.php.

The next step is to remove the shrink thing, since it won't work.  As said above, find and remove:

Code: [Select]
<a href="#" onclick="shrinkHeader(!current_header); return false;"><img id="upshrink" src="', $settings['images_url'], '/', empty($options['collapse_header']) ? 'upshrink.gif' : 'upshrink2.gif', '" alt="*" title="', $txt['upshrink_description'], '" style="margin: 2px 0;" border="0" /></a><img id="upshrinkTemp" src="', $settings['images_url'], '/blank.gif" alt="" style="margin-right: 2ex;" />


Again, don't remove that last '; because it makes things work.

Now, in the templates it was using before, you need to remove the header and footer parts.  This means removing everything from:
Code: [Select]
echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
To:
Code: [Select]
<body>';
And then removing:
Code: [Select]
echo '
</body>
</html>';

Now, if you did this, and went to your forum, it'd look REALLY CRAPPY.  There's one last vital thing that needs to be done for it to work.  And to do that, we need the id of the theme we're working with.

To find this id (which, if you've only created one theme, will be 3) you will need to check the link to "preview" it in your profile.  You'll see it say "theme=xyz".  The number (I put xyz but it should be a number) is the id.  Once you have that, you want to write the following query in phpMyAdmin - go to your database and pick the SQL tab, and type in the box:

Code: [Select]
REPLACE INTO yourprefix_themes
   (ID_THEME, variable, value)
VALUES (that number, 'theme_layers', 'site,main');
(where yourprefix_ is your prefix, often 'smf_' and that number is the theme id we found.)

By the by, if you're wanting to distribute your theme, and use layers, look in the file named "theme_info.xml".  It has a special spot just for this information.  Remember that the layers are loaded in the order listed - in this case, it goes site_above -> main_above -> content -> main_below -> site_below.

Wonderful.  You're done, and everything looks fancy.  But, now, you probably did this to use it with SSI - how does one do that?  Try the following code, in a PHP file:

Code: [Select]
<?php

error_reporting
(E_ALL);

$ssi_theme that pesky number again;
$ssi_layers = array(&#39;site&#39;);

// If you want SSI.php to start gzipping for you ;).
$ssi_gzip true;

require(&
#39;forum/SSI.php&#39;);

echo &#39;some stuffs go here.&#39;;

ssi_shutdown();

?>
(where that pesky number again is the theme id, and forum/SSI.php is where ever SSI.php is - not a URL.)

I'll admit a more complicated system is used for this site, but the example given should be more than enough to help you power everything through SMF and its template system, should you wish to.

Good luck!  Tell me if you have problems... (in this topic please, I get too many pms...)

-[Unknown]

Offline TLM

  • Full Member
  • ***
  • Posts: 420
  • Gender: Male
    • MindlessTux
Re: Integrating the forum into your site...
« Reply #2 on: November 14, 2004, 01:57:03 PM »
I figured another way before I saw this thread but not sure if its any better.

In the forums index, I added the "outside" of the forum, menu, headers, etc...

Then in index.php in the root folder I used,

Code: [Select]
<?php
require(&#39;./smf/SSI.php&#39;);
template_header();

//Site content goes here
include "../includes/content.php";

template_footer();
?>


Just looking at what you said vrs what I figured out, I dont see a diffrence.  Is there a problem doing it the way I currently am?

Offline [Unknown]

  • SMF Friend
  • SMF Master
  • *
  • Posts: 36,102
  • Gender: Male
Re: Integrating the forum into your site...
« Reply #3 on: November 14, 2004, 05:59:37 PM »
You're using functions that may or may not exist in the next version of SMF.

-[Unknown]

Offline scorpionusa

  • Newbie
  • *
  • Posts: 1
Re: Integrating the forum into your site...
« Reply #4 on: November 19, 2004, 10:06:09 PM »
how do I integrate the left column or right column into the template along with header and footer?

Offline [Unknown]

  • SMF Friend
  • SMF Master
  • *
  • Posts: 36,102
  • Gender: Male
Re: Integrating the forum into your site...
« Reply #5 on: November 20, 2004, 12:37:41 AM »
how do I integrate the left column or right column into the template along with header and footer?

Table, float, etc - basic HTML and CSS.  Just because it's named "above" doesn't mean it can't be to the right - look at the admin layer.

-[Unknown]

Offline ThaJester

  • Semi-Newbie
  • *
  • Posts: 31
  • Gender: Male
  • Webmaster/Graphics Designer
    • Your Fate
Re: Integrating the forum into your site...
« Reply #6 on: January 16, 2005, 08:11:05 PM »
[Unknown], I posted a topic here. I didn't want to post it as a reply in this thread because it wasn't directly related to your instructions.
jester@your-fate.com

Website | Forums | Public Directory

"People's desires a powerful. The stronger they grow the more beyond ones control they become. Perhaps the gap between love and hate is paper thin."
- Kenshin

Offline Bliss

  • Newbie
  • *
  • Posts: 1
Re: Integrating the forum into your site...
« Reply #7 on: February 24, 2005, 09:40:36 PM »
Has anyone successfully integrated the left column/right column (or even just the left column) using the "layers" system? It is giving me fits! Much thanks.

JER

how do I integrate the left column or right column into the template along with header and footer?

Offline [Unknown]

  • SMF Friend
  • SMF Master
  • *
  • Posts: 36,102
  • Gender: Male
Re: Integrating the forum into your site...
« Reply #8 on: February 25, 2005, 01:30:31 AM »
I have, look at this site :P.  What problems are you having?

-[Unknown]

Offline goluboy

  • Newbie
  • *
  • Posts: 8
Re: Integrating the forum into your site...
« Reply #9 on: March 02, 2005, 11:52:01 PM »
Hi there,

I was wondering if the simple technique you described above can be made to work with site skinning.  I am currently using a skinning tool using cookies.  Basically, when my site is loaded, it checks for the cookie present on the user's machine and loads the "look" accordingly. 

An average page would look like this:

<? include("/path/to/cookiecheck.php"); ?>

<? include($headervar.$skin.$extension); ?>

<? include("/path/to/content.php"); ?>

<? include($footervar.$skin.$extension); ?>

I tried using these includes as is with the technique above, but I get nasty errors. 

The code in the cookiecheck is as follows:

<?
  if (isset($newskin)) {
    $newskin=(int)$newskin;
    if ($newskin<1) $newskin=1;
    if ($newskin>2) $newskin=1;
  } elseif (isset($skin)) {
    $newskin=(int)$skin;
    if ($skin<1) $newskin=1;
    if ($skin>2) $newskin=1;
  } else {
    $newskin=1;
  }
  $skin=$newskin;
  setcookie ('skin', "", time() - 3600);
  setcookie('skin', $newskin,time()+(86400*365),'/');
  setcookie('skin', $newskin,time()+(86400*365),'/','2xy.org');
      $skin=$newskin;

    $headervar = "/path/to/header";
    $footervar = "/path/to/footer";
    $extension = ".php";
?>

If anyone has any idea how to go around this, it would be much appreciated.

Thanks!

Offline [Unknown]

  • SMF Friend
  • SMF Master
  • *
  • Posts: 36,102
  • Gender: Male
Re: Integrating the forum into your site...
« Reply #10 on: March 05, 2005, 04:28:16 AM »
That is very very insecure and dependent on register_globals.  I strongly recommend using super-globals.

-[Unknown]

Offline goluboy

  • Newbie
  • *
  • Posts: 8
Re: Integrating the forum into your site...
« Reply #11 on: March 05, 2005, 10:25:02 AM »
Hi,

I'm really new to PHP...  What do you mean by super-globals?

Offline Foden

  • Semi-Newbie
  • *
  • Posts: 27
Re: Integrating the forum into your site...
« Reply #12 on: March 13, 2005, 06:04:06 AM »
Hey.

I used this, but I get an error message saying 'headers already sent'  :o

I figured another way before I saw this thread but not sure if its any better.

In the forums index, I added the "outside" of the forum, menu, headers, etc...

Then in index.php in the root folder I used,

Code: [Select]
<?php
require(&#39;./smf/SSI.php&#39;);
template_header();

//Site content goes here
include "../includes/content.php";

template_footer();
?>


Just looking at what you said vrs what I figured out, I dont see a diffrence.  Is there a problem doing it the way I currently am?

Offline [Unknown]

  • SMF Friend
  • SMF Master
  • *
  • Posts: 36,102
  • Gender: Male
Re: Integrating the forum into your site...
« Reply #13 on: March 13, 2005, 06:07:58 AM »
Hi,

I'm really new to PHP...  What do you mean by super-globals?

http://www.php.net/reserved.variables

Foden, make sure to put it at THE VERY BEGINNING before ANYTHING else.

-[Unknown]

Offline gabriele

  • Newbie
  • *
  • Posts: 4
Re: The Cooler Way
« Reply #14 on: March 15, 2005, 09:10:28 AM »
I have integrated the forum in my site but the source page doesn't include the </head><body> tags.

thanks!

Gabriele

Offline [Unknown]

  • SMF Friend
  • SMF Master
  • *
  • Posts: 36,102
  • Gender: Male
Re: The Cooler Way
« Reply #15 on: March 15, 2005, 06:18:52 PM »
I have integrated the forum in my site but the source page doesn't include the </head><body> tags.

Can you provide a link?  Are you sure you didn't delete them from the template?

-[Unknown]

Offline gabriele

  • Newbie
  • *
  • Posts: 4
Re: Integrating the forum into your site...
« Reply #16 on: March 16, 2005, 07:22:58 AM »
I am positive!

I had to get rid of the "if..." part to be able to see those tags in the source sento to the browser.

now it looks like this:

Code: [Select]
   

// added by Gabriele
   
function template_site_above()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;

echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<script language="JavaScript" type="text/javascript" src="', $settings['default_theme_url'], '/script.js"></script>
<script language="JavaScript" type="text/javascript"><!--
var smf_theme_url = "', $settings['theme_url'], '";
var smf_images_url = "', $settings['images_url'], '";
// --></script>
<title>', $context['page_title'], '</title>
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/style.css?rc1" />
<link href="/style.css" rel="stylesheet" type="text/css">
    <script language="JavaScript" src="/includes/mouseover.js"></script>
</head>
<body ONLOAD="preloadImages();>';

include('../header.php');
}

function template_site_below()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;

include('../footer.php');

echo '
</body></html>';
}
// end of added

URL: hxxp:www.pescarein.com/forum [nonactive]

Offline [Unknown]

  • SMF Friend
  • SMF Master
  • *
  • Posts: 36,102
  • Gender: Male
Re: Integrating the forum into your site...
« Reply #17 on: March 16, 2005, 03:00:46 PM »
Looks fine to me, although there are tabs before the doctype which Internet Explorer can't handle.

-[Unknown]

Offline checkmeout

  • Newbie
  • *
  • Posts: 1
Re: Integrating the forum into your site...
« Reply #18 on: March 22, 2005, 03:26:34 AM »
I was hoping I could just "warp" my site around it with a simple include.
<?php include('foum/index.php'); ?> but I get session header errors is doing this even possable my site is very basic html nothing special at all.

Offline [Unknown]

  • SMF Friend
  • SMF Master
  • *
  • Posts: 36,102
  • Gender: Male
Re: Integrating the forum into your site...
« Reply #19 on: March 22, 2005, 03:54:14 AM »
I'm afraid that even if you did it the right way, you'd still have problem with error messages.  The way outlined here is better...

-[Unknown]