Integrating SMF with your website: Difference between revisions From Online Manual

Jump to: navigation, search
(Undo revision 16933 by Illori (talk))
m (Removed link to Bridging)
 
(9 intermediate revisions by 4 users not shown)
Line 1: Line 1:
{{ambox|text=If  you want to bridge your forum with another software installation on your server, please see [[Bridging]]}}
=Integrating Your Site and Forum - Visually=
=Integrating Your Site and Forum - Visually=


== Introduction ==
== Introduction ==


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.
If you already have a main site and are now adding a forum, you would probably like it to look like your main site. This might take a little work, but it is not all that difficult. This tutorial assumes you want to begin with a copy of the default theme.  If you want to make a copy of a different theme, the process is not all that different.


The first step is to know some basic CSS and HTML.  If you do not know these, and do not want 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. Before reading any further, please visit your [[How_can_I_learn_html_css_javascript_SQL_or_php|favorite tutorial site]] and learn about HTML, XHTML, and CSS.
The first step is to know some basic CSS and HTML.  Pick a tutorial site and visit often as you work through this little project. SMF uses XHTML, which has only a few differences from older flavors of HTML. Your favorite tutorial will explain the differences, and you can always use the [http://validator.w3.org/ W3C markup validation service] to check your work. Use your browser's "F12" developers' tools to select an element on the page to figure out which CSS classes have been applied so you can figure out which color, image, or other CSS tool has been applied to it.


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.
Second, make a [[{{Latest docs}}Themes_and_Layout#Install_a_New_Theme|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", click Install!, and then choose "OK" when prompted.


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 themes 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.


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.
Third, do a little work on the colors, in your main CSS file.  In SMF 2.0, you will find this in css/index.css. (in SMF 1.1.x, this was in style.css).  Most of the colors you are interested are found in classes catbg and catbg2 (category titles) titlebg, titlebg2 (title bars), windowbg, windowbg2, windowbg3 (post contents), and tborder (table grid lines).  Choose colors that match the "skin" of your main site.


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.)
Of course, that will not do it all.  If you have started with the SMF 2.0 CURVE theme, you will notice that some colors have not changed at all.  That is because the CURVE theme uses background images to show rounded corners and gradients even on older browsers. You can seek out these background images in your CSS files and recolorize them yourself. Or you can find a tool to do it for you. There are several tools out there for this.  Among these are the [http://www.colorizeit.com/styles/smf-20-themes/216.smf-curve.html  Curve colorizer] and the [http://www.colorizeit.com/browse/24/smf-20-themes.html Any SMF 2.0 theme colorizer].


== Moving to Your Layout ==
== 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 do not, making one would help markedly, but you may be able to wing it too.
The next step is, of course, to make it look like your site.  I assume that you already have a "template" of sorts made out of html - your site without the main content.  If you do not, making one would help, 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" - do not worry, they do not have to have HTML in them at all, but they can.
Once you have this done, you will 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" - do not worry, they do not 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.
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 will 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:
You may notice that there is a lot of stuff in the header of the index template.  Much of this can be omitted, which is what we are going to do for simplicity's sake.  So, what we need to do is find the following:


{{code|1=<nowiki><html></nowiki>}}
{{code|1=<nowiki><html></nowiki>}}
Line 32: Line 30:
{{code|1=<nowiki><body></nowiki>}}
{{code|1=<nowiki><body></nowiki>}}


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!)
Delete it all.  We are going to start fresh, and simpler.  All you really need is: (note that this will screw up mutliple language support!)


{{code|1=<nowiki>    <html>
{{code|1=<nowiki>    <html>
Line 51: Line 49:
     <body></nowiki>}}
     <body></nowiki>}}


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 <nowiki><body></nowiki> should be a <tt>';</tt>.  Make sure to leave that there.  After that line, add:
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 <nowiki><body></nowiki> should be a <code>';</code>.  Make sure to leave that there.  After that line, add:


{{code|1=<nowiki>include('header.php');</nowiki>}}
{{code|1=<nowiki>include('header.php');</nowiki>}}


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:
If you did not put header.php in the same place as the forum, you may need to make it '../header.php'.  After that, we are going to remove the upshrink part (assuming you remove the above part) because it will not work anymore.  That means removing:


{{code|1=<nowiki><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;" /></nowiki>}}
{{code|1=<nowiki><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;" /></nowiki>}}


Again, do not remove that last [tt]';[/tt] 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:
Again, do not remove that last <code>';</code> because it makes things work.  Okay, so we are almost done now.  The next step is to add the footer.  To do that, look for:
{{code|1=<nowiki></body></nowiki>}}
{{code|1=<nowiki></body></nowiki>}}


Above that, you will see a line that says <tt>echo '</tt> - and, above that, we want to add:
Above that, you will see a line that says <code>echo '</code> - and, above that, we want to add:


{{code|1=<nowiki>include('footer.php');</nowiki>}}
{{code|1=<nowiki>include('footer.php');</nowiki>}}


Again, if you put the outside the forum's directory, you'll want to use ../ to "get to it".  That was the basic method.
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.


== The Cooler Way - Layers ==
== The Cooler Way - Layers ==


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 do not 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.)
This other way, we are going to use what are called "layers".  Because of this, we will need to make a small change to the database.  If you do not have a way to get to the database, such as phpMyAdmin, you may wish to install and learn how to use it (phpMyAdmin).


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, 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.   


So, creating the layer only means creating two sub templates.  At the end of index.template.php, right before the <tt>?></tt>, add:
So, creating the layer only means creating two sub templates.  At the end of index.template.php, right before the <code>?></code>, add:


{{code|1=<nowiki>
{{code|1=<nowiki>
Line 119: Line 115:
{{code|1=<nowiki><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;" /></nowiki>}}
{{code|1=<nowiki><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;" /></nowiki>}}


Again, do not remove that last <tt>';</tt> because it makes things work.
Again, do not remove that last <code>';</code> 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:
Now, in the templates it was using before, you need to remove the header and footer parts.  This means removing everything from:
Line 132: Line 128:
     </html>';</nowiki>}}
     </html>';</nowiki>}}


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.
Now, if you did this, and went to your forum, it would look REALLY CRAPPY.  There is 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:
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:
Line 141: Line 137:
(where yourprefix_ is your prefix, often 'smf_' and that number is the theme id we found.)
(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.
By the way, if you are 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:
You are 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|1=<nowiki><?php
{{code|1=<nowiki><?php
Line 164: Line 160:
(where that pesky number again is the theme id, and forum/SSI.php is where ever SSI.php is - not a URL.)
(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.
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.


[http://www.simplemachines.org/community/index.php?topic=19638.0 Original Post by [Unknown]]
[http://www.simplemachines.org/community/index.php?topic=19638.0 Original Post by [Unknown]]

Latest revision as of 20:22, 26 November 2016

Integrating Your Site and Forum - Visually

Introduction

If you already have a main site and are now adding a forum, you would probably like it to look like your main site. This might take a little work, but it is not all that difficult. This tutorial assumes you want to begin with a copy of the default theme. If you want to make a copy of a different theme, the process is not all that different.

The first step is to know some basic CSS and HTML.  Pick a tutorial site and visit often as you work through this little project. SMF uses XHTML, which has only a few differences from older flavors of HTML. Your favorite tutorial will explain the differences, and you can always use the W3C markup validation service to check your work. Use your browser's "F12" developers' tools to select an element on the page to figure out which CSS classes have been applied so you can figure out which color, image, or other CSS tool has been applied to it.

Second, 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", click Install!, and then choose "OK" when prompted.

Now you have a copy of the default theme.  If you want to customize the images for your theme, go to the themes 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.

Third, do a little work on the colors, in your main CSS file. In SMF 2.0, you will find this in css/index.css. (in SMF 1.1.x, this was in style.css). Most of the colors you are interested are found in classes catbg and catbg2 (category titles) titlebg, titlebg2 (title bars), windowbg, windowbg2, windowbg3 (post contents), and tborder (table grid lines). Choose colors that match the "skin" of your main site.

Of course, that will not do it all. If you have started with the SMF 2.0 CURVE theme, you will notice that some colors have not changed at all. That is because the CURVE theme uses background images to show rounded corners and gradients even on older browsers. You can seek out these background images in your CSS files and recolorize them yourself. Or you can find a tool to do it for you. There are several tools out there for this. Among these are the Curve colorizer and the Any SMF 2.0 theme colorizer.

Moving to Your Layout

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

Once you have this done, you will 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" - do not worry, they do not 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 will cover the simpler one first.

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

<html>

And keep going down until: 

<body>

Delete it all.  We are going to start fresh, and simpler.  All you really need is: (note that this will screw up mutliple language support!) 

    <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>

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: 

include('header.php');

If you did not put header.php in the same place as the forum, you may need to make it '../header.php'.  After that, we are going to remove the upshrink part (assuming you remove the above part) because it will not work anymore.  That means removing: 

<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, do not remove that last '; because it makes things work.  Okay, so we are almost done now.  The next step is to add the footer.  To do that, look for: 

</body>

Above that, you will see a line that says echo ' - and, above that, we want to add: 

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.

The Cooler Way - Layers

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

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.

So, creating the layer only means creating two sub templates. At the end of index.template.php, right before the ?>, add: 


    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 are 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: 

<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, do not 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: 

    echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

To: 

    <body>';

And then removing: 

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

Now, if you did this, and went to your forum, it would look REALLY CRAPPY. There is 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: 

    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 way, if you are 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.

You are 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: 

<?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.)

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.

Original Post by [Unknown]

Additional/Updated information by Daniel15

Retrieved from "https://wiki.simplemachines.org/w/index.php?title=Integrating_SMF_with_your_website&oldid=30934"


Advertisement: