Understanding themes the A.M.A way

Started by A.M.A, August 23, 2004, 09:04:55 PM

Previous topic - Next topic

A.M.A

I've decided to write this after some PMs asking me how did I do themes .. I've tried my best to make it as simple as possible in a hope that some one will find it useful .. please note that this is not meant to be a complete guide and may contains lots of mistakes :)

So you need to change the look of your forum! I hope this will some how explained a little about how things work with the theme system of SMF.
In order to make full use of this article you must have a good knowledge of HTML.

What is a theme?
In simple word it is a list of HTML pages + some graphics .. so theme 'myTest' could consist of:
start.html
articles.html
images.html
end.html
logo.gif - edit.gif - links.gif - me.gif


What is a template?
all the above elements is considered a theme, while a 'template' is the items that list consists of .. so 'images.html' alone would be a template.

Now try to apply the above on a real theme .. the one that came with SMF is called the default  theme .. yes all things in the 'Themes\default' folder are the contents of the default  theme .. while one item alone like 'index.template.php' is just a template.

Note:
If you are going to make a new theme .. you do not have to include all things in the above theme.

What I am going to explain here is just the 'index.tempalte.php' as this template controls the overlook of your forum.

'index.tempalte.php' - What is it?
It is a container of all pages that SMF uses. For simplicity it looks like this:

Quote<html>
<head>
Stuff like page title java scripts style sheet etc.
</head>
<body>
logo + forum's name + user info box + news box + stats box + menu buttons
<table><tr><td>
In here all pages of the smf forum will be placed .. board index , messages index , user profile , search ..etc.
</tr></td></table>
Bottom of the page that display the copyright notice with some links for php + w3c + mySQL
</body>
</html>
Really sorry .. real life is demanding my full attention .. will be back soon hopefully :)

A.M.A

So to modify the template you will need to understand where to put your modification , as illustrate above .. we have three parts : (1)the header (2)the middle and last (3)the bottom.

If you open the 'index.tempalte.php' you will find that it is lot different than our simple example .. but do not worry , you do not need to understand every bits of it,  just the essential will do.

Ok let us try to find where our three parts begins and end.

The Header
Here where it starts:
<div id="headerarea" style="padding: 12px 30px 4px 30px;', $context['browser']['needs_size_fix'] && !$context['browser']['is_ie6'] ? ' width: 100%;' : '', '">';
and here where it ends:
template_menu();

echo '
</div>';


The middle
Here where it starts and ends:
Quote<table width="100%" cellpadding="0" cellspacing="0" border="0"><tr>
      <td id="bodyarea" style="padding: 1ex 20px 2ex 20px;">';

}

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

   echo '</td>
   </tr></table>
';

The bottom
Here where it starts:
<div id="footerarea" style="text-align: center; padding-bottom: 1ex;', $context['browser']['needs_size_fix'] && !$context['browser']['is_ie6'] ? ' width: 100%;' : '', '">
and here where it ends:
</table>';

// Show the load time?
Really sorry .. real life is demanding my full attention .. will be back soon hopefully :)

A.M.A

That was not bad after all .. was it? I guess yes :) that does not look like any regular HTML!
What we are using is not HTML alone! but rather a combination of HTML and PHP. We need php to fill in for us dynamic data and control the visibility of some items among other things , and that can not be done by using HTML alone.

so a code like this :
Quote<span style="font-family: Georgia, sans-serif; font-size: xx-large;">', $context['forum_name'], '</span>
Will produce
Quote<span style="font-family: Georgia, sans-serif; font-size: xx-large;">myForum Name</span>

a code like this:
Quoteif (!empty($context['user']['avatar']))
      echo '<td valign="middle">', $context['user']['avatar']['image'], '</td>';
will produce
Quote<td valign="middle"><img src="http://www.mysite.com/smf/avatars/Musicians/Korn.jpg" alt="" border="0" /></td>
But only if the user got an Avatar .. this check is done by php using the above code.


If you are satisfied with the 'default' theme but need to make some simple color or fonts modification .. you do not need to touch any of the above .. just go to Style.css there you will find elements that control the look of the forum .. you need your body page to have a black color! then just change this
body
{
background-color: #839DB4;
margin: 0px;
padding: 0px;
}
Really sorry .. real life is demanding my full attention .. will be back soon hopefully :)

A.M.A

Example#1
I need to put my logo instead of the original one .. to do this we have to find where is the original logo! remember it is in the first part , a closer look and here it is:
Quote<img src="', $settings['images_url'], '/smflogo.gif" width="250" style="float: right;" alt="" />
now we know that it is called 'smflogo.gif' and if we search for it we will find it in the 'images' folder. So we can do one of the following:
1. copy your own logo over 'smflogo.gif'
2. use a new logo with a new name .. we have to use this code:
Quote<img src="', $settings['images_url'], '/MyLogo.gif" width="250" style="float: right;" alt="" />
3. my logo is in another site .. not likely :) then we need to use this code:
Quote<img src="http://www.myothersite.com/logo.jpg" width="250" style="float: right;" alt="" />

Example#2
I need to put my copy rights .. so you need to modify the bottom part .. a search for the SMF copy right and we will find it here:
Quote<td valign="middle" align="center" style="white-space: nowrap;">
               ', theme_copyright(), '
now put your own:
Quote<td valign="middle" align="center" style="white-space: nowrap;">
               ', theme_copyright(), ' (c)2004 mySite
Really sorry .. real life is demanding my full attention .. will be back soon hopefully :)

A.M.A

Example#3
I need to divide the page into two columns!! Have you forget the simple sample in the first page! here it is:
Quote<html>
<head>
Stuff like page title java scripts style sheet etc.
</head>
<body>
logo + forum's name + user info box + news box + stats box + menu buttons
<table><tr><td>
In here all pages of the smf forum will be placed .. board index , messages index , user profile , search ..etc.
</tr></td></table>
Bottom of the page that display the copyright notice with some links for php + w3c + mySQL
</body>
</html>

The easiest way to have a page with two columns is by using a table with two columns, which should look like this:
<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td width="20%"></td>
    <td width="80%"></td>
  </tr>
</table>

The first column '<td width="20%"></td>' should hold your stuff like links or images or whatever you need to put in there. While the other part the big one '<td width="80%"></td>' would hold the forum.

If we apply this to our simple sample it should look like this:
Quote<html>
<head>
Stuff like page title java scripts style sheet etc.
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td width="20%"></td>
    <td width="80%">
logo + forum's name + user info box + news box + stats box + menu buttons
<table><tr><td>
In here all pages of the smf forum will be placed .. board index , messages index , user profile , search ..etc.
</tr></td></table>
Bottom of the page that display the copyright notice with some links for php + w3c + mySQL
</td>
  </tr>
</table>
</body>
</html>

to apply it to 'index.template.php' you need to first find the head of the page:
</head>
<body>';

and make it look like:
Quote</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td width="20%"></td>
    <td width="80%">
';

now way to the bottom:
</body>
</html>';

and make it:
Quote</td>
  </tr>
</table>

   </body>
</html>';
Really sorry .. real life is demanding my full attention .. will be back soon hopefully :)

Grudge

Sounds good A.M.A. I would recommend though that when creating a new theme you don't directly edit the "default" theme (even for testing), but instead create a theme "Based off" the default (From the admin panel), and edit that. If you are unlucky enough to cause a parse error then the forum will offer you a link to go back to the default theme to fix it.
I'm only a half geek really...

A.M.A

What Grudge says .. and if you could get your own local server to test things on it , it would be better .. try these links:
[Unknown]'s Guide to Installing PHP and MySQL
Apache Friends
Really sorry .. real life is demanding my full attention .. will be back soon hopefully :)

Springer

I plan to add cells around something I do that like the adding column exmaple.  But what is the best way to make an image repeat within a cell?  I know how to do this on style sheet but I only want it for a given section.

Such as a repeating image to compensate for the distance between the corners.

bojzi

The mind is like a parachute, it only works if it's open.

Springer

Yes but should I do this directly on the template or try and find a way to do it through the style sheets?  (seems easier directly but the other way might have some sort of benefit)

Springer

I've gone ahead and did it on template itself.  It works but I have one problem.

Put a background image on the div style of the footer.  But I need a different background image for the side columns. 

So I tried this:
<td width="50" style="background-image: url("http://www.gamingmaps.us/templates/bluemetal/images/summary_07.jpg); align="left"></td>  

But all I see is the div background.  Is the above wrong or do I have to create a new div for that one cell?

A.M.A

do not know if I understand you fully .. but when trying to surround something using tables .. this is how I do it:
Quote
<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td width="33%">right - top</td>
    <td width="33%">mid - top (repeat)</td>
    <td width="34%">left - top</td>
  </tr>
  <tr>
    <td width="33%">right - mid (repeat)</td>
    <td width="33%">Contents</td>
    <td width="34%">left - mid (repeat)</td>
  </tr>
  <tr>
    <td width="33%">right - bottom</td>
    <td width="33%">mid - bottom (repeat)</td>
    <td width="34%">left - bottom</td>
  </tr>
</table>

if you want to use CSS check this:
http://www.simplemachines.org/community/index.php?topic=2347.0
Really sorry .. real life is demanding my full attention .. will be back soon hopefully :)

Springer

#12
Managed to fix one so should be able to do others.

Slightly off topic but do you know if it is possible to use  template_menu(); within a table?

[Unknown]

Quote from: Springer on August 29, 2004, 08:54:14 PM
Managed to fix one so should be able to do others.

Slightly off topic but do you know if it is possible to use  template_menu(); within a table?

Of course!!

-[Unknown]

Springer

 :P  Figured might get overlooked here and since I had another off topic just posted them together.  Guess I should have deleted that one.

I can say that without the above I couldn't have gotten as far as I did on my theme.  Maybe have a tutorial child board with stuff like this?  (cleaned of off topic posts like mine of course)

A.M.A

When I read my article again .. I wonder what the heck is this guy trying to do!! j/k :) glad you have found it of use.
Really sorry .. real life is demanding my full attention .. will be back soon hopefully :)

Vinoth

Vinoth And Sachin ( SpecHackers Team )
The Best  Way to Help Poor Is not Becoming One Of Them.

RCHawaii

HI folks. I am trying to have a long links list on the left border of my forum like SMF here, but can't seem to just place it on the left  without it affecting the header and top? My forum ls located at http://spadworld.iz.forum1/index.php Any help is greatly appreciated.

What I would like is to see the top (login boxes/logoinfo boxes across the top full, the links on the left, and forum on the right and the full width footer.

Thanks again

A.M.A

What you need is something like this:
<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td width="100%" colspan="2">Header</td>
  </tr>
  <tr>
    <td width="20%">Links</td>
    <td width="80%">main forum</td>
  </tr>
  <tr>
    <td width="100%" colspan="2">Footer</td>
  </tr>
</table>


and to apply it to (index.template.php) you need to follow the following steps:

#Put the header after the body tag like this:</head>
<body>';

// For some STRANGE reason, we have to tell Internet Explorer 4 and 5 that the content should be 100% wide. (or else it will assume about 108%!)
echo '
<div id="headerarea" style="padding: 12px 30px 4px 30px;', $context['browser']['needs_size_fix'] && !$context['browser']['is_ie6'] ? ' width: 100%;' : '', '">';

// The logo and the three info boxes
echo '



<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td width="100%" colspan="2">


#Close the header and make two columns for links and forum like this:
// The main content should go here.  A table is used because IE 6 just can't handle a div.
echo '



</td>
  </tr>
  <tr>
    <td width="20%">Links in here!</td>
    <td width="80%">


#Close the columns and make footer like this:function template_main_below()
{
global $context, $settings, $options, $scripturl, $txt;

echo '</td>
</tr></table>



</td>
  </tr>
  <tr>
    <td width="100%" colspan="2">';


#Close the footer and table like this:
<a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank"><img id="valid-css" src="', $settings['images_url'], '/valid-css.gif" alt="', $txt['valid_css'], '" width="54" height="20" style="margin: 5px 16px;" border="0" onmouseover="smfFooterHighlight(this, true);" onmouseout="smfFooterHighlight(this, false);" /></a>
</td>
</tr>
</table>



</td>
  </tr>
</table>';
Really sorry .. real life is demanding my full attention .. will be back soon hopefully :)

RCHawaii

#19
Many thanks A.M.A.

EDIT

I tried this again and get a template [parse error] Any suggestions? besides shooting the messenger?  :-\ :-X




Advertisement: