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/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.
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 LayoutThe 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:
<htmlAnd keep going down until:
<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!)
<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:
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:
<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:
</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.
I'll post the more advanced method in a reply.
-[Unknown]
(Edit: Stickied topic. - Motoko)
