Integrating the forum into your site...

mike16889 · June 20, 2008, 04:48:43 AM

well for one if you'v got a header.php you might want to combine the 2. second when i follow the link all i see is a login screen and some forums no sidebar. also you may want to make the "include('C:\xampp\htdocs/left.php');" relative to the forum so it will work on pritty much any server without having to modify the directory structure all the time.

SA™ · June 20, 2008, 04:58:09 AM

well that just lost me

why would i want to combine the header and left ? doesnt make sence to me yes i commented it out for now cos it looks crap

mike16889 · June 20, 2008, 05:45:47 AM

well usualy a website loads left to right top to bottom. so putting the left in the head section will just prevent you from having all these files that need including.

not being able to see the site i can't rly help you much.

also waynes world is also the name of an Australian kids TV show...

SA™ · June 21, 2008, 01:38:36 AM

Quote from: [Unknown] 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 Expand
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"></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 Expand
<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 Expand
echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

To:
Code Select Expand
<body>';

And then removing:
Code Select Expand
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 Expand
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 Expand
<?php error_reporting(E_ALL); $ssi_theme = that pesky number again; $ssi_layers = array('site'); // If you want SSI.php to start gzipping for you ;). $ssi_gzip = true; require('forum/SSI.php'); echo 'some stuffs go here.'; 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]

i understand i have to remove some stuff from my index.template.php

ie this

Code Select

echo '<!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"', $context['right_to_left'] ? ' dir="rtl"' : '', '><head>
	<meta http-equiv="Content-Type" content="text/html; charset=', $context['character_set'], '" />
	<meta name="description" content="', $context['page_title'], '" />
	<meta name="keywords" content="PHP, MySQL, bulletin, board, free, open, source, smf, simple, machines, forum" />
	<script language="JavaScript" type="text/javascript" src="', $settings['default_theme_url'], '/scripts/script.js?b21"></script>
	<script language="JavaScript" type="text/javascript" src="', $settings['default_theme_url'], '/scripts/theme.js?b21"></script>
	<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
		var smf_theme_url = "', $settings['theme_url'], '";
		var smf_default_theme_url = "', $settings['default_theme_url'], '";
		var smf_images_url = "', $settings['images_url'], '";
		var smf_scripturl = "', $scripturl, '";
		var smf_iso_case_folding = ', $context['server']['iso_case_folding'] ? 'true' : 'false', ';
		var smf_charset = "', $context['character_set'], '";', $context['show_pm_popup'] ? '
		if (confirm("' . $txt['show_personal_messages'] . '"))
			window.open("' . $scripturl . '?action=pm");' : '', '
		var ajax_notification_text = "', $txt['ajax_in_progress'], '";
		var ajax_notification_cancel_text = "', $txt['modify_cancel'], '";
	// ]]></script>
	<title>', $context['page_title'], '</title>';

	// Please don't index these Mr Robot.
	if (!empty($context['robot_no_index']))
		echo '
	<meta name="robots" content="noindex" />';

	// The ?b21 part of this link is just here to make sure browsers don't cache it wrongly.
	echo '
	<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/style.css?b21" />
	<link rel="stylesheet" type="text/css" href="', $settings['default_theme_url'], '/css/print.css?b21" media="print" />';

	/* Internet Explorer 4/5 and Opera 6 just don't do font sizes properly. (they are big...)
		Thus, in Internet Explorer 4, 5, and Opera 6 this will show fonts one size smaller than usual.
		Note that this is affected by whether IE 6 is in standards compliance mode.. if not, it will also be big.
		Standards compliance mode happens when you use xhtml... */
	if ($context['browser']['needs_size_fix'])
		echo '
	<link rel="stylesheet" type="text/css" href="', $settings['default_theme_url'], '/css/fonts-compat.css" />';



	// Show all the relative links, such as help, search, contents, and the like.
	echo '
	<link rel="help" href="', $scripturl, '?action=help" />
	<link rel="search" href="' . $scripturl . '?action=search" />
	<link rel="contents" href="', $scripturl, '" />';

	// If RSS feeds are enabled, advertise the presence of one.
	if (!empty($modSettings['xmlnews_enable']))
		echo '
	<link rel="alternate" type="application/rss+xml" title="', $context['forum_name'], ' - RSS" href="', $scripturl, '?type=rss;action=.xml" />';

	// If we're viewing a topic, these should be the previous and next topics, respectively.
	if (!empty($context['current_topic']))
		echo '
	<link rel="prev" href="', $scripturl, '?topic=', $context['current_topic'], '.0;prev_next=prev" />
	<link rel="next" href="', $scripturl, '?topic=', $context['current_topic'], '.0;prev_next=next" />';

	// If we're in a board, or a topic for that matter, the index will be the board's index.
	if (!empty($context['current_board']))
		echo '
	<link rel="index" href="' . $scripturl . '?board=' . $context['current_board'] . '.0" />';

	// We'll have to use the cookie to remember the header...
	if ($context['user']['is_guest'])
		$options['collapse_header'] = !empty($_COOKIE['upshrink']);

	// Output any remaining HTML headers. (from mods, maybe?)
	echo $context['html_headers'], '

	<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
		// Create the main header object.
		var mainHeader = new smfToggle("upshrink", ', empty($options['collapse_header']) ? 'false' : 'true', ');
		mainHeader.useCookie(', $context['user']['is_guest'] ? 1 : 0, ');
		mainHeader.setOptions("collapse_header", "', $context['session_id'], '");
		mainHeader.addToggleImage("upshrink", "/upshrink.gif", "/upshrink2.gif");
		mainHeader.addTogglePanel("upshrinkHeader");
		mainHeader.addTogglePanel("upshrinkHeader2");
	// ]]></script>';

	echo '

	</head>
<body>
	';

but when i remove it the forum tabs dont work i have my forum tabbed what is it?

mike16889 · June 21, 2008, 09:20:46 AM

removing the stuff is optinal. if it isnt working properly dont remove it.

Foxylucious · July 21, 2008, 06:46:13 PM

Hello i tryed this integrating thing, it almost worked

But, well, i run version 1.1.5, and that code is a bit differnt from what is shown here in the examples... tryed to do it anyway with some logic.

Anyway after finnishing this and looking at the source code, the </head>and<body> tags where are missing...
looked like the part; from the line...

Code Select


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

from the 'function template_site_above()' doesn't work great... any idea how to solve this, and could it be that i removed to much by doing everything that was told in the second post in this topic... (for version 1.1.5)
Thanks for any reply's

tryed the updated post put there was the index.template.php attachment missing or i couldn't find it

Thanks so far for this great helping post thing

Greetings Foxman eh.. Foxylucious

Kindred · July 21, 2008, 09:28:26 PM

that code can't be right....

what that code says is "... show everything in that echo statement, only if the browser needs_size_fix."

Code Select


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

echo '
<link rel="stylesheet" href="http://www.chatkamer.com/ckcom.css" type="text/css" />
</head>
<body>';

Foxylucious · July 22, 2008, 12:47:33 AM

Yes, thanks. that's what i thought to.
i did change it like that, and it indeed solves that problem, but wasn;t sure if there was more in that statement that needed to be shown, whitout the "if"

Xaneth · October 13, 2008, 02:05:37 AM

This does not seem to work on SMF 2.0 Beta 4. I recently upgraded from a working 1.1.5. My old theme (created in 1.1.x) still works, but I can't really install any mods because my theme is using old code. Any update for those that are running 2.x?

Xaneth · October 13, 2008, 01:04:33 PM

Not sure why I was having trouble, but got it sorted out using the method at:

http://www.simplemachines.org/community/index.php?topic=19638.0

Works great for fully integrating the forum into your website. Pretty sure it was because I was using Firefox at home without the web developer tools, which disable cached settings like I have on my other computer

Kleidi · December 27, 2009, 05:23:35 AM

Hello every1 !
I was looking around for a tutorial how to integrate the smf 2.0 rc2 into my existing site that is made in php/html. I have searched and found some tutorials but they are 2 old and doesn't worked for smf 2.0 . They r made for smf 1.+ version. (Like this one)
Can some1 help me with any "How to..." tutorial to integrate smf 2.0 on an existing site, pleaseeeeeeeeeeeeee?
Thank you in advance!

Tyrsson · December 27, 2009, 08:58:48 PM

I have used most of the tutorial on the 2.x version and most of it is still useful, the templates changed a little between versions but the principle is still sound.

Kindred · December 27, 2009, 11:38:54 PM

and, as a side note, I suggest that you learn to write in proper English...

Kleidi · December 29, 2009, 06:11:06 AM

OK, thank you for your reply.

It was a little hard for me bcz I'm a starter in php but i think i have made some progresses

I have integrated (tried

) smf on my existing site with "layer" mode but i receive this msg when i access my forum:
Unable to load the 'main_above' template.

I have attached the index.template.php file that i'm using.
Thank you for your help!

Kleidi · December 29, 2009, 10:41:08 AM

help plssssssssssss

Kindred · December 29, 2009, 11:15:52 AM

please do not bump... and please do not whine.
the support staff and others are scattered all over the world, so just because someone does not respond immediately is not a reason to bump.

Legend Zero · January 01, 2010, 05:55:57 PM

I tried doing this with a non-default theme and DAMN was that a mistake, apparently now only the first teeny tiny bit of content is acceptable, as it breaks the table after the first post of ANY thread.

Just thought you would all want to know that.

Kleidi · January 06, 2010, 08:18:13 PM

Hello there,

I made all the modification that Unknown provide on this thread and i received the msg that is unable to load the 'main_above' template. I have provided the index.template source on a post some times ago, and now i have attached with this post an printscreen how the site looks like with the modification made.

Thank you for your support!

Tyrsson · January 07, 2010, 02:42:49 AM

Well see there has been some changes in the templates that need to be taken into consideration. If I get time in the next few days I will write up an addition to the topic that is linked in the first post and expand this to the new version of smf. Its still about the same as the old tutorial but there are more layers that need to be accounted for.

We are now using two layers in a default template which are html, body. So site needs to be added to this in the themes table, column layers. To test this you can manually change this in the database via phpmyadmin. Keep in mind that you should ideally, if your going to use the "site" layer then you will need a site_above and a site_below function (subtemplate) in the theme file iirc (its been awhile since I did this myself). As a short example you can have this in the template file.

This will go between the html layer and the body layer (the below layer will go after the body below layer etc)

Code Select

function template_site_above(){
echo '<div>This is just so we can see where this will show up</div>';

Code Select

function template_site_below(){
echo '<div>This is just so we can see where this will show up</div>';

Look in the themes table and find the column which corresponds with the correct theme ID and add the site layer to the column. Reload the page and see if you still get the same error. Please understand I am writing this from memory......

Tyrsson · January 07, 2010, 02:49:57 AM

I took a look at the file and there is no need to change anything with the default functions. Just add the two functions. If I find time I will try to edit the file you have attached so that it will work (as long as the db changes have been made).

News:

Integrating the forum into your site...