News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

[SMF 1.1.x] Integrating the forum into your site using SMF\'s layer system

Started by Daniel15, January 27, 2007, 02:49:11 AM

Previous topic - Next topic
Print
Go Down Pages1 2 3 ... 13
User actions

Daniel15

January 27, 2007, 02:49:11 AM Last Edit: May 06, 2007, 01:59:05 AM by Daniel15
This guide currently covers the default SMF theme. In the future, I'll extend it so it explains how to do this for custom themes as well :)

I am currently rewriting sections of this, and will post a significantly improved version soon :)



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: http://www.daniel15.com/forum/.

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 :). If not, 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

Overview:

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


Once you've done this, the next thing you'll want to do is make a copy of the default theme. To do so, go to the Themes and Layout section of the admin panel. Under "Install a New Theme", type what you want to call the new theme into the Create a copy of Default named box. You will get a prompt asking "Install a new theme?" - Please say yes. After doing this, the URL in your address bar will have something like theme_id=4 in it... Remember this ID for later!

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.php'); and include('footer.php');, 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 http://www.example.com/style.css with the 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 (if you don't know what phpMyAdmin is, take a look at the What is phpMyAdmin? topic). Open phpMyAdmin, go to the SQL tab, and enter this in:
Code Select

REPLACE INTO smf_themes
(ID_THEME, variable, value)
VALUES (4, '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 4 with the theme's ID number (you found this when adding the theme - If you don't remember it, go to the admin panel, go to Themes and Layout --> Themes and Settings, click on the name of the theme, and look for the th= in the URL [eg. th=4]. This is the ID).

We're done!
That's about all we need to do. In the "Themes and Layout" section of the admin panel, make this theme the default one (choose it in the "Overall forum default" dropdown box), and visit your forum. If everything worked correctly, it should look perfect :)

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

Replace 4 with the theme ID (found earlier).
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 (as I've done at http://www.daniel15.com/). Have fun! :D

Feel free to reply here if you have any problems with this :D
Daniel15, former Customisation team member, resigned due to lack of time. I still love everyone here :D.
Go to smfshop.com for SMFshop support, do NOT email or PM me!

Minare

#1
January 29, 2007, 06:46:45 PM
Hi Daniel15

I checked through your work and now I appreciate what you prepared for us.The things you've told were like an entegration of Smf board into another system and then it hit my mind that if we could make an entegration Smf board into an existing php-nuke system.

I mean aren't they all the same? By using SSI and some entegration changes,isn't it possible to success it ?
Or is there any entegration forms of this ?

Waiting for your comments bro

Have a nice smf time

Daniel15

#2
January 29, 2007, 09:49:36 PM
Quotethen it hit my mind that if we could make an entegration Smf board into an existing php-nuke system.

I mean aren't they all the same? By using SSI and some entegration changes,isn't it possible to success it ?
Or is there any entegration forms of this ?
I haven't looked at phpNuke, so I have no idea how easy this would be to achieve ;)
Daniel15, former Customisation team member, resigned due to lack of time. I still love everyone here :D.
Go to smfshop.com for SMFshop support, do NOT email or PM me!

wcravens

#3
February 09, 2007, 05:12:46 PM
I'm getting strange non-printable characters output whenever an include ('file.php'); is used in the index.template.php theme file.  I've put details at:

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

I'm getting the exact same problems using this technique.

Daniel15

#4
February 09, 2007, 06:59:59 PM
Check my reply in the other topic:

Quote from: Daniel15 on February 09, 2007, 06:59:20 PM
QuoteIn using the 'simple' method I'm getting extra non-printable characters output any time I use an include('xyz.php') in the index.template.php.  The characters are '' by the time they get to the browser.  The codes seen on the network are #ef #bb and #bf.  I've tried both with and without compression just in case.
Have you tried simple header.php file? Try something like:
Code Select

A test header

and see if it still occurs.

Note that PHP files do not need to include PHP code. If you put plain HTML (as I did), it will be output directly to the client. Basically, you don't need to put everything in echo statements, just copy the raw HTML directly into the PHP file  :)
Daniel15, former Customisation team member, resigned due to lack of time. I still love everyone here :D.
Go to smfshop.com for SMFshop support, do NOT email or PM me!

foxed

#5
February 15, 2007, 04:27:27 AM
Very helpful topic :D

My work in progress is going so much smoother after reading this!

http://wow.aab-clan.co.uk/smf/index.php

Synaptic Anarchy

#6
February 16, 2007, 05:37:31 PM
This is an awesome tutorial. I'm a lot more optimistic about cross-site integration. Thanks, Daniel15!

foxed

#7
February 16, 2007, 05:54:58 PM
Urm I wonder if you could help?

Sort of struggling a bit with the last modification to my sites layout. We are migrating from the terribly insecure phpBB (Have you SEEN how many false registrations get through? :( )

Our current forum layout is this: http://wow.aab-clan.co.uk/forum - a take on the popular wowmoonclaw theme.

As you can see the forum is framed by the site borders, with about a 7% gap on either side. Trying to achieve this with the SMF templating system has been ... troublesome! Despite the awesome tutorial!

Heres my stuff SMF url: http://wow.aab-clan.co.uk/smf

Style.css
Code Select

/* Normal, standard links. */
a:link
{
   color: #007799;
   text-decoration: none;
}
a:visited
{
   color: #007799;
   text-decoration: none;
}
a:hover
{
   color: #0398c2;
   text-decoration: underline;
}

/* Navigation links - for the link tree. */
.nav, .nav:link, .nav:visited
{
   color: #007799;
   text-decoration: none;
}
a.nav:hover
{
   color: #0398c2;
   text-decoration: underline;
}

/* Tables should show empty cells. */
table
{
   empty-cells: show;
}

/* By default (td, body..) use verdana in black. */
body, td, th , tr
{
   color: #FFFFFF;
   font-size: small;
   font-family: verdana, sans-serif;

}

/* The main body of the entire forum. */
body
{
   
background-color: #000000;
   margin: 0px;
   padding: 0px 10px 10px 0px;
   color: #000;
}

/* Input boxes - just a bit smaller than normal so they align well. */
input, textarea, button
{
   color: #000;
   font-family: verdana, sans-serif;
}
input, button
{
   font-size: 90%;
}

textarea
{
   font-size: 100%;
   color: #000;
   font-family: verdana, sans-serif;
}

/* All input elements that are checkboxes or radio buttons. */
input.check
{
}

/* Selects are a bit smaller, because it makes them look even better 8). */
select
{
   font-size: 90%;
   font-weight: normal;
   color: #000;
   font-family: verdana, sans-serif;
}

/* Standard horizontal rule.. ([hr], etc.) */
hr, .hrcolor
{
   height: 1px;
   border: 0;
   color: #666666;
   background-color: #666666;
}

/* No image should have a border when linked */
a img
{
   border: 0;
}
/* A quote, perhaps from another post. */
.quote
{
   color: #000000;
   background-color: #D7DAEC;
   border: 1px solid #000000;
   margin: 1px;
   padding: 1px;
   font-size: x-small;
   line-height: 1.4em;
}

/* A code block - maybe even PHP ;). */
.code
{
   color: #000000;
   background-color: #dddddd;
   font-family: "courier new", "times new roman", monospace;
   font-size: x-small;
   line-height: 1.3em;
   /* Put a nice border around it. */
   border: 1px solid #000000;
   margin: 1px auto 1px auto;
   padding: 1px;
   width: 99%;
   /* Don't wrap its contents, and show scrollbars. */
   white-space: nowrap;
   overflow: auto;
   /* Stop after about 24 lines, and just show a scrollbar. */
   max-height: 24em;
}

/* The "Quote:" and "Code:" header parts... */
.quoteheader, .codeheader
{
   color: #000000;
   text-decoration: none;
   font-style: normal;
   font-weight: bold;
   font-size: x-small;
   line-height: 1.2em;
}

/* Generally, those [?] icons.  This makes your cursor a help icon. */
.help
{
   cursor: help;
}

/* /me uses this a lot. (emote, try typing /me in a post.) */
.meaction
{
   color: red;
}

/* The main post box - this makes it as wide as possible. */
.editor
{
   width: 96%;
}

/* Highlighted text - such as search results. */
.highlight
{
   background-color: yellow;
   font-weight: bold;
   color: black;
}

/* Alternating backgrounds for posts, and several other sections of the forum. */
.windowbg
{
   color: #FFFFFF;
   background-color: #202020;
}
.windowbg2
{
   color: #FFFFFF;
   background-color: #353535;
}
.windowbg3
{
   color: #000000;
   background-color: #202020;
}
/* the today container in calendar */
.calendar_today
{
   background-color: #FFFFFF;
}

/* These are used primarily for titles, but also for headers (the row that says what everything in the table is.) */
.titlebg, tr.titlebg th, tr.titlebg td, .titlebg2, tr.titlebg2 th, tr.titlebg2 td
{
   color: 007799;
   font-style: normal;
   background: url(catbg3.jpg) #E9F0F6 repeat-x;
   border-bottom: solid 1px #000000;
   border-top: solid 0px #FFFFFF;
   padding-left: 10px;
   padding-right: 10px;
}
.titlebg, .titlebg a:link, .titlebg a:visited
{
   font-weight: bold;
   color: black;
   font-style: normal;
}

.titlebg a:hover
{
   color: #404040;
}
/* same as titlebg, but used where bold text is not needed */
.titlebg2 a:link, .titlebg2 a:visited
{
   color: white;
   font-style: normal;
   text-decoration: underline;
}

.titlebg2 a:hover
{
   text-decoration: underline;
}

/* This is used for categories, page indexes, and several other areas in the forum.
.catbg and .catbg2 is for boardindex, while .catbg3 is for messageindex and display headers*/
.catbg , tr.catbg td , .catbg3 , tr.catbg3 td
{
   background: url(catbg3.jpg) #000 repeat-x;
   color: #FFFFFF;
   padding-left: 5px;
   padding-right: 5px;
}
.catbg2 , tr.catbg2 td
{
   background: url(images/catbg2.jpg) #A1BFD9 repeat-x;
   color: #ffffff;
   padding-left: 10px;
   padding-right: 10px;
}
.catbg, .catbg2, .catbg3
{
   border-bottom: solid 1px #000;
}
.catbg, .catbg2
{
   font-weight: bold;
}
.catbg3, tr.catbg3 td, .catbg3 a:link, .catbg3 a:visited
{
   font-size: 95%;
   color: 007799;
   text-decoration: none;
}
.catbg a:link, .catbg a:visited , .catbg2 a:link, .catbg2 a:visited
{
   color: 007799;
   text-decoration: none;
}
.catbg a:hover, .catbg2 a:hover, .catbg3 a:hover
{
   color: #fff;
}
/* This is used for tables that have a grid/border background color (such as the topic listing.) */
.bordercolor
{
   background-color: #000000;
   padding: 0px;
}

/* This is used on tables that should just have a border around them. */
.tborder
{
   padding: 0px;
   border: 0px solid #696969;
   background-color: #000000;
}

/* Default font sizes: small (8pt), normal (10pt), and large (14pt). */
.smalltext
{
   font-size: x-small;
   font-family: verdana, sans-serif;
}
.middletext
{
   font-size: 90%;
}
.normaltext
{
   font-size: small;
}
.largetext
{
   font-size: large;
}


/* Posts and personal messages displayed throughout the forum. */
.post, .personalmessage
{
   width: 100%;
   overflow: auto;
   line-height: 1.3em;
}

/* All the signatures used in the forum.  If your forum users use Mozilla, Opera, or Safari, you might add max-height here ;). */
.signature
{
   width: 100%;
   overflow: auto;
   padding-bottom: 3px;
   line-height: 1.3em;
}

/* Sometimes there will be an error when you post */
.error
{
   color: red;
}


/* definitions for the main tab, active means the tab reflects which page is displayed */
.maintab_first, .maintab_back, .maintab_last, .maintab_active_first, .maintab_active_back, .maintab_active_last
{
   color: white;
   text-transform: uppercase;
   vertical-align: top;
}
.maintab_back, .maintab_active_back
{
   color: white;
   text-decoration: none;
   font-size:  9px;
   vertical-align: top;
   padding: 2px 6px 6px 6px;
   font-family: tahoma, sans-serif;
}

.maintab_first
{
   background: url(images/maintab_first.gif) left bottom no-repeat;
   width: 10px;
}
.maintab_back
{
   background: url(images/maintab_back.gif) left bottom repeat-x;
}
.maintab_last
{
   background: url(images/maintab_last.gif) left bottom no-repeat;
   width: 8px;
}
.maintab_active_first
{
   background: url(images/maintab_active_first.gif) left bottom no-repeat;
   width: 6px;
}
.maintab_active_back
{
   background: url(images/maintab_active_back.gif) left bottom repeat-x;
}
.maintab_active_last
{
   background: url(images/maintab_active_last.gif) left bottom no-repeat;
   width: 8px;
}

/* how links behave in main tab. */
.maintab_back a:link , .maintab_back a:visited, .maintab_active_back a:link , .maintab_active_back a:visited
{
   color: white;
   text-decoration: none;
}

.maintab_back a:hover, .maintab_active_back a:hover
{
   color: #e0e0ff;
   text-decoration: none;
}
/* definitions for the mirror tab */
.mirrortab_first, .mirrortab_back, .mirrortab_last, .mirrortab_active_first, .mirrortab_active_back, .mirrortab_active_last
{
   color: white;
   text-transform: uppercase;
   vertical-align: top;
}
.mirrortab_back, .mirrortab_active_back
{
   color: white;
   text-decoration: none;
   font-size: 9px;
   vertical-align: bottom;
   padding: 6px 6px 2px 6px;
   font-family: tahoma, sans-serif;
}

.mirrortab_first
{
   background: url(images/mirrortab_first.gif) no-repeat;
   width: 10px;
}
.mirrortab_back
{
   background: url(images/mirrortab_back.gif) repeat-x;
}
.mirrortab_last
{
   background: url(images/mirrortab_last.gif) no-repeat;
   width: 6px;
}
.mirrortab_active_first
{
   background: url(images/mirrortab_active_first.gif) no-repeat;
   width: 6px;
}
.mirrortab_active_back
{
   background: url(images/mirrortab_active_back.gif) repeat-x;
}
.mirrortab_active_last
{
   background: url(images/mirrortab_active_last.gif) no-repeat;
   width: 8px;
}

/* how links behave in mirror tab. */
.mirrortab_back a:link , .mirrortab_back a:visited, .mirrortab_active_back a:link , .mirrortab_active_back a:visited
{
   color: white;
   text-decoration: none;
}

.mirrortab_back a:hover, .mirrortab_active_back a:hover
{
   color: #e0e0ff;
   text-decoration: none;
}

/* The AJAX notifier */
#ajax_in_progress
{
   background: #32CD32;
   color: white;
   text-align: center;
   font-weight: bold;
   font-size: 18pt;
   padding: 3px;
   width: 100%;
   position: fixed;
   top: 0;
   left: 0;
}


Not sure if you need the index.template file - its basically what you have above.

header.php
Code Select

<table width="90%" height="100%" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td width="14" rowspan="4" background="http://wow.aab-clan.co.uk/images/index_14.gif">&nbsp;</td>
<td height="117" background="http://wow.aab-clan.co.uk/images/headbg.gif"><img src="http://wow.aab-clan.co.uk/images/logo.gif" width="715" height="117"></td>
<td width="14" rowspan="4" background="http://wow.aab-clan.co.uk/images/index_03.gif">&nbsp;</td>
</tr>
<tr>
<td height="38" background="http://wow.aab-clan.co.uk/images/index_13.gif">
<div align="center"><img src="http://wow.aab-clan.co.uk/images/index_04.gif" width="10" height="38" alt="">
    <a href="http://wow.aab-clan.co.uk/index.php"><img src="http://wow.aab-clan.co.uk/images/index_05.gif" alt="" width="54" height="38" border="0"></a>
    <a href="http://wow.aab-clan.co.uk/forum/"><img src="http://wow.aab-clan.co.uk/images/index_06.gif" alt="" width="88" height="38" border="0"></a>
    <a href="http://wow.aab-clan.co.uk/phpraid/"><img src="http://wow.aab-clan.co.uk/images/index_07.gif" alt="" width="83" height="38" border="0"></a>
    <a href="http://dkp.aab-clan.co.uk"><img src="http://wow.aab-clan.co.uk/images/index_08.gif" alt="" width="82" height="38" border="0"></a>
    <a href="http://wow.aab-clan.co.uk/forum/groupcp.php?g=23&sid=f746da02edfc94542d830b37c178ff67
"><img src="http://wow.aab-clan.co.uk/images/index_09.gif" alt="" width="91" height="38" border="0"></a>
    <a href="http://wow.aab-clan.co.uk/progress.php"><img src="http://wow.aab-clan.co.uk/images/index_10.gif" alt="" width="117" height="38" border="0"></a>
    <a href="http://wow.aab-clan.co.uk/index.php"><img src="http://wow.aab-clan.co.uk/images/index_11.gif" alt="" width="81" height="38" border="0"></a>
    <a href="http://wow.aab-clan.co.uk/teamspeak.php"><img src="http://wow.aab-clan.co.uk/images/index_12.gif" alt="" width="111" height="38" border="0"></a>
      <img src="http://wow.aab-clan.co.uk/images/index_13.gif" width="5" height="38" alt=""></div></td>
</tr>
<tr >
<td height="100%" bgcolor="#000000">












<br />
<table width="90%"  border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">


footer.php
Code Select

</table>
</td>

</tr>

</table>


</td>
</tr>
<tr>
<td height="34" valign="middle" background="http://wow.aab-clan.co.uk/images/index_18.gif"></td>
</tr>
</table>


Please excuse the shoddy coding - I'm not the best at this stuff but I try hard :)

Thanks ... would appreciate any help.

Cheers
Foxed

p.s I've tried updating the padding in this bit of the CSS:

Code Select

/* The main body of the entire forum. */
body
{
   
background-color: #000000;
   margin: 0px;
   padding: 0px 10px 10px 0px;
   color: #000;
}


However it resized the whole site - not just the forum bit :(

Daniel15

#8
February 16, 2007, 09:53:41 PM
Quote from: Synaptic Anarchy on February 16, 2007, 05:37:31 PM
This is an awesome tutorial. I'm a lot more optimistic about cross-site integration. Thanks, Daniel15!
No problem :D

QuoteThanks ... would appreciate any help.
At the bottom of your header.php, you have a <table> tag, but missed the <tr> and <td> tags ;)
Instead of:
Code Select

<table width="90%"  border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">


Try:
Code Select

<table border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td width="90%">
Daniel15, former Customisation team member, resigned due to lack of time. I still love everyone here :D.
Go to smfshop.com for SMFshop support, do NOT email or PM me!

lebisol

#9
February 16, 2007, 10:51:09 PM
Daniel15, thanks for the work man!!!
This is one of the easiest ways to intergrate...a definite bookmark....brilliant.
All the best!

babjusi

#10
February 17, 2007, 10:01:06 AM
Thank u for this very useful and handy tutorial. I know some friends of mine who would be very grateful to you as well for this

shaylor2005

#11
February 19, 2007, 06:00:45 PM
I'm having great difficulty actually achieving this.
My SMF version is 1.2
here is my html for my site.
Code Select
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Forums</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="default.css" />
</head>
<body>

<div id="upbg"></div>

<div id="outer">


<div id="header">
<div id="headercontent">
<h1>Richard Shaylor</h1>
<h2>&nbsp;</h2>
  </div>
</div>
<div id="headerpic"></div>


<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#" class="active">News</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="menubottom"></div


><div id="footer">
<div class="left">&copy; 2006 Richard Shaylor. All rights reserved.</div>
</div>
</div>

</body>
</html>

I split my code into header and footer.
Header
Code Select
<div id="upbg"></div>

<div id="outer">


<div id="header">
<div id="headercontent">
<h1>Richard Shaylor</h1>
<h2>&nbsp;</h2>
  </div>
</div>
<div id="headerpic"></div>


<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#" class="active">News</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="menubottom"></div>
footer
Code Select
<div id="footer">
<div class="left">&copy; 2006 Richard Shaylor. All rights reserved.</div>
</div>
i created a theme and made note that it was id 4. i then when on the the index.template.php file, when i got to this part i got a bit stuck because this tutorial is for 1.1 and not 1.2 at first i thought this didn't matter because i have seen other people doing the same as this, so i thought id give it a try.

i don't get where i have to put the header and footer and what should i do with my css file and the images to go with it.

as for adding the location in the index.template.php file i cannot find where to make the change.

lebisol

#12
February 19, 2007, 07:24:35 PM
Quotei don't get where i have to put the header and footer
belive it or not I had better luck following the article from Unknown that loopbacks to this one :)
http://www.simplemachines.org/community/index.php?topic=19638.0

Quote.....and what should i do with my css file and the images to go with it.
if you are refering to SMF css then this should have been copied over when  you made a duplicate of your template.
If you are talking about your Joomla css then look up for CSS stylesheets at the orignal post here....essentially your css should point to your own template:

<link rel="stylesheet" type="text/css" href="http://www.example.com/templates/my style/template_css.css"/>

This what got me through...hope it helps.
All the best!

shaylor2005

#13
February 19, 2007, 07:45:02 PM
this still makes no sence i have tryed all the ways i have read up but its still not working.

lebisol

#14
February 19, 2007, 09:14:50 PM
Are you getting any errors on process of the index page?
I had a weird timeout (don't ask why) issue with phpMyAdmin where it 'looked' like it executed the querrry above. can you confirm that values are enters in the table?
Sorry if I am pointing out the obvious...
All the best!

foxed

#15
February 20, 2007, 04:07:12 AM
Hmm thanks Daniel, that sort of helped.

The problem I'm having now however is that nowhere seems to follow a set "width" standard.

For example:

Forum index: http://wow.aab-clan.co.uk/smf/
Topic View: http://wow.aab-clan.co.uk/smf/index.php?topic=1326.0
Board View: http://wow.aab-clan.co.uk/smf/index.php?board=20.0

They all appear to be different widths - driving me mental :(

shaylor2005

#16
February 20, 2007, 03:01:53 PM
i have found an easy solution a mod called global header and footer. it enables you it edit the header and footer within smf

fondled

#18
February 21, 2007, 10:22:54 PM Last Edit: February 22, 2007, 04:21:44 AM by fondled
Hi Daniel - I am having some trouble making this work also, ive been through everything, checked it twice, and cant see where im going wrong? Ive checked the DB & they entry went in fine..

All i get is the default theme? http://www.eliteairbrush.com/forum/ [nofollow] ???
I have tried everything i can think of, and it just wont happen! anything else you can think of to diagnose where the problem is?

Cheers for your time :)

Daniel15

#19
February 22, 2007, 12:04:55 AM
Quote from: foxed on February 20, 2007, 04:07:12 AM
Hmm thanks Daniel, that sort of helped.

The problem I'm having now however is that nowhere seems to follow a set "width" standard.

For example:

Forum index: http://wow.aab-clan.co.uk/smf/
Topic View: http://wow.aab-clan.co.uk/smf/index.php?topic=1326.0
Board View: http://wow.aab-clan.co.uk/smf/index.php?board=20.0

They all appear to be different widths - driving me mental :(

I believe that this is due to your HTML coding, but I'm not sure. I don't have time at the moment to look into this in detail, but I'll see if I can check it out on Saturday.

Quoteedit: here is my error output, inside smf
Hmmm... It looks like it doesn't like the include() line.
In the new index.template.php, find:
Code Select

include('header.php');

Replace it with:
Code Select

global $boarddir;
include($boarddir . '/header.php');


Also, in the same file, find:
Code Select

include('footer.php');

Replace it with:
Code Select

global $boarddir;
include($boarddir . '/footer.php');

Please tell me if this works. If it does, then I'll replace the index.template.php file with a "fixed" one.

Quote from: shaylor2005 on February 20, 2007, 03:01:53 PM
i have found an easy solution a mod called global header and footer. it enables you it edit the header and footer within smf
Yeah, that mod is quite nice, but it's not as powerful as this ;)

Quotebelive it or not I had better luck following the article from Unknown that loopbacks to this one
What does [Unknown]'s have that mine is missing? What do you feel should be added to this?
Daniel15, former Customisation team member, resigned due to lack of time. I still love everyone here :D.
Go to smfshop.com for SMFshop support, do NOT email or PM me!
Print
Go Up Pages1 2 3 ... 13
User actions
Advertisement: