Please note that I did not write section 1 of this tutorial. All credit for section 1 of this tutorial goes to Paul Mathot, a key contributor to the BTS template system and the one that created the current version of BTS.
Section 1 of this tutorial was originally written with reference to a osCommerce template that I have not yet been able to locate, so the code references will not match any of the actual templates in osCommerce, but you can easily apply the code changes and explanations to osCMax.
Sections 2 and 3 were written by me, and are current and applicable to osCMax 2.0 RC3 and RC4. If you want to learn how to make new templates and stylesheets per individual page, click the links below to go right to each section in this tutorial.
Section 1 : Converting an HTML or standard osC Template to BTS/osCMax format - see below
Section 2: Make custom per page templates
Section 3: Make custome per page stylesheets
Section 1 : Converting an HTML or standard osC Template to BTS/osCMax format Tutorial Beigns here:
The first steps:
1) create a directory inside the templates directory. You can give it any name you want (almost), I will use "32" for now. And copy your template files to this directory.
2) rename your main template file (i.e. index.html) to main_page.tpl.php (because that's the filename the BTS uses for the main template)
3) Go to admin and change the default template setting to 32 (admin::Configuration::My Store::Default Template Directory set to "32")
If everything went as expected, your store looks like:
eeweb.nl
now. (always view the store in your browser, never the template itself!)
I admit that it does not look very nice at the moment, but we are not finished yet.
I also included an automatic template switch menu in "main_page.tpl.php", this way it will be possible to keep all examples online and easyly switch between them.
The next logical step I think is to replace the "original the page head" by a "BTS page head", this will restore a.o. the link to the stylesheet.
4) replace everything in "main_page.tpl.php" above the <body> tag:
PHP Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Some Company</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
by a typical "BTS page head" (between quotes because it is more than the actual <head>)
PHP Code:
<?php require(DIR_WS_INCLUDES . 'counter.php'); ?>
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html <?php echo HTML_PARAMS; ?>>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo CHARSET; ?>">
<?php require(DIR_WS_INCLUDES . 'meta_tags.php'); ?>
<title><?php echo META_TAG_TITLE; ?></title>
<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>">
<meta name="description" content="<?php echo META_TAG_DESCRIPTION; ?>" >
<meta name="keywords" content="<?php echo META_TAG_KEYWORDS; ?>" >
<link rel="stylesheet" type="text/css" href="<?php echo DIR_WS_TEMPLATES; ?>style.css" media="all">
<link rel="stylesheet" type="text/css" href="<?php echo DIR_WS_TEMPLATES; ?>print.css" media="print">
<?php if ($javascript) { require(DIR_WS_JAVASCRIPT . $javascript); } ?>
</head>
I think it's no use to explain every line of this now, but there is at least one line that's really interesting:
PHP Code:
<link rel="stylesheet" type="text/css" href="<?php echo DIR_WS_TEMPLATES; ?>style.css" media="all">
The actual change to this line is we added:
PHP Code:
<?php echo DIR_WS_TEMPLATES; ?>
DIR_WS_TEMPLATES is a "constant" and it defines where the template files are. So "DIR_WS_TEMPLATES" for example has the value "templates/32-a/" the directory where I put an example of the slightly modified template.
Now the page already looks a little bit better because it loades the stylesheet again.
example: eeweb.nl
Everywhere in the template we want to point to the current templates directory we can use this same code
PHP Code:
<?php echo DIR_WS_TEMPLATES; ?>
5) restore the links to the images
replace all
PHP Code:
src="http://www.oscmax.com/forums/images/
with:
PHP Code:
src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/
and the background images (allthough I think these really belong in the stylesheet, but this is the fastest way to get them back for now)
replace all:
PHP Code:
background="images
with:
PHP Code:
background="<?php echo DIR_WS_TEMPLATES; ?>images
6) Replace the static content with the dynamic osC content. I think it is best to split this into some separate steps.
6.1) Create a directory "content" and a directory "boxes" inside the "templates/32" directory. Copy the content template files (included in the BTS) into the content directory you just created. You can use the content files from the osC template or the content files from the CSS/OneTable templates including updates, I have used the latter because they have <h1> tags around the content headers (and the <h1>'s will be styled in this example). We will add some box templates to the boxes directory later. And don't forget to copy "popup.tpl.php" to you the "templates/32" directory (included in the BTS), otherwise your popups won't work very well.
6.2) Including the "middle" content (starting with this one because it makes it possible to test the other changes we make, and it cleans up the template quite a bit
)
find: (approx. from line 153 to 437)
PHP Code:
<td bgcolor="#FFFFFF" width="572">
<div align="center"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/m_top.gif" width="572" height="8" alt="" border="0"></div>
<p class="px5">
<table border="0" cellpadding="0" cellspacing="0" width="95%" align="center" height="25" background="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/fon_bar01.gif">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" background="" bgcolor="#FFFFFF">
<tr>
<td><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/e03.gif" width="21" height="21" alt="" border="0" align="left"></td>
<td><p class="bar01" style="color: #DA0008; font-size: 18px;">Today’s special </p></td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="3" cellspacing="0" align="center">
<tr valign="top">
<td>
<!-- left -->
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_11.gif" width="10" height="9" alt="" border="0"></td>
<td background="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_13.gif"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_12.gif" width="6" height="9" alt="" border="0"></td>
<td background="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_13.gif" align="right"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_14.gif" width="6" height="9" alt="" border="0"></td>
<td><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_15.gif" width="10" height="9" alt="" border="0"></td>
</tr>
<tr valign="top">
<td background="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_fon_left.gif"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_21.gif" width="10" height="6" alt="" border="0"></td>
<td rowspan="2" colspan="2">
<!-- in -->
<table border="0" cellpadding="0" cellspacing="0" width="255">
<tr>
<td><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/temp01.gif" width="124" height="92" alt="" border="0"></td>
<td>
<p style="color: #1F86DE; font-size: 15px; padding-bottom: 0px;"><b>Pentium 4</b></p>
<p>CPU Intel P4 2GHz<br>
DIMM 256<br>
HDD 20 GB<br>
CASE MINITOWER</p>
<p style="color: #DA0008; font-size: 17px; padding-bottom: 5px;"><b>$ 500.00</b></p>
</td>
</tr>
</table>
<div align="right">
<a href=""><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/b_buy.gif" width="45" height="24" alt="" border="0"></a>
<a href=""><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/b_det.gif" width="75" height="24" alt="" border="0"></a>
</div>
<!-- /in -->
</td>
<td background="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_fon_right.gif"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_23.gif" width="10" height="6" alt="" border="0"></td>
</tr>
<tr valign="bottom">
<td background="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_fon_left.gif"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_31.gif" width="10" height="7" alt="" border="0"></td>
<td background="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_fon_right.gif"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_33.gif" width="10" height="7" alt="" border="0"></td>
</tr>
<tr>
<td><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_41.gif" width="10" height="10" alt="" border="0"></td>
<td background="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_fon_bot.gif"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_42.gif" width="6" height="10" alt="" border="0"></td>
<td background="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_fon_bot.gif" align="right"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_44.gif" width="6" height="10" alt="" border="0"></td>
<td ><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_45.gif" width="10" height="10" alt="" border="0"></td>
</tr>
</table>
<!-- /left -->
</td>
<td>
<!-- left -->
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_11.gif" width="10" height="9" alt="" border="0"></td>
<td background="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_13.gif"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_12.gif" width="6" height="9" alt="" border="0"></td>
<td background="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_13.gif" align="right"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_14.gif" width="6" height="9" alt="" border="0"></td>
<td><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_15.gif" width="10" height="9" alt="" border="0"></td>
</tr>
<tr valign="top">
<td background="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_fon_left.gif"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_21.gif" width="10" height="6" alt="" border="0"></td>
<td rowspan="2" colspan="2">
<!-- in -->
<table border="0" cellpadding="0" cellspacing="0" width="255">
<tr>
<td><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/temp02.gif" alt="" width="116" height="118" border="0"></td>
<td>
<p style="color: #1F86DE; font-size: 15px; padding-bottom: 0px;"><b>Pentium 4</b></p>
<p>CPU Intel P4 2GHz<br>
DIMM 256<br>
HDD 20 GB<br>
CASE MINITOWER</p>
<p style="color: #DA0008; font-size: 17px; padding-bottom: 5px;"><b>$ 500.00</b></p>
</td>
</tr>
</table>
<div align="right">
<a href=""><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/b_buy.gif" width="45" height="24" alt="" border="0"></a>
<a href=""><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/b_det.gif" width="75" height="24" alt="" border="0"></a>
</div>
<!-- /in -->
</td>
<td background="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_fon_right.gif"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_23.gif" width="10" height="6" alt="" border="0"></td>
</tr>
<tr valign="bottom">
<td background="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_fon_left.gif"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_31.gif" width="10" height="7" alt="" border="0"></td>
<td background="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_fon_right.gif"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_33.gif" width="10" height="7" alt="" border="0"></td>
</tr>
<tr>
<td><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_41.gif" width="10" height="10" alt="" border="0"></td>
<td background="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_fon_bot.gif"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_42.gif" width="6" height="10" alt="" border="0"></td>
<td background="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_fon_bot.gif" align="right"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_44.gif" width="6" height="10" alt="" border="0"></td>
<td ><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_45.gif" width="10" height="10" alt="" border="0"></td>
</tr>
</table>
<!-- /left -->
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="95%" align="center" height="25" background="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/fon_bar01.gif">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" background="" bgcolor="#FFFFFF">
<tr>
<td><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/e04.gif" width="21" height="21" alt="" border="0" align="left"></td>
<td><p class="bar01" style="color: #3466DE; font-size: 18px;">Featured Products </p></td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="3" cellspacing="0" align="center">
<tr valign="top">
<td>
<!-- left -->
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_11.gif" width="10" height="9" alt="" border="0"></td>
<td background="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_13.gif"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_12.gif" width="6" height="9" alt="" border="0"></td>
<td background="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_13.gif" align="right"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_14.gif" width="6" height="9" alt="" border="0"></td>
<td><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_15.gif" width="10" height="9" alt="" border="0"></td>
</tr>
<tr valign="top">
<td background="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_fon_left.gif"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_21.gif" width="10" height="6" alt="" border="0"></td>
<td rowspan="2" colspan="2">
<!-- in -->
<table border="0" cellpadding="0" cellspacing="0" width="160">
<tr>
<td><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/temp03.gif" alt="" width="58" height="54" border="0"></td>
<td>
<p style="color: #1F86DE; font-size: 15px; padding-bottom: 0px;"><b>Mouse</b></p>
<p>CPU Intel<br>
DIMM 256<br>
HDD 20 GB</p>
<p style="color: #DA0008; font-size: 17px; padding-bottom: 5px;"><b>$5.00</b></p>
</td>
</tr>
</table>
<!-- /in -->
</td>
<td background="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_fon_right.gif"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_23.gif" width="10" height="6" alt="" border="0"></td>
</tr>
<tr valign="bottom">
<td background="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_fon_left.gif"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_31.gif" width="10" height="7" alt="" border="0"></td>
<td background="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_fon_right.gif"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_33.gif" width="10" height="7" alt="" border="0"></td>
</tr>
<tr>
<td><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_41.gif" width="10" height="10" alt="" border="0"></td>
<td background="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_fon_bot.gif"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_42.gif" width="6" height="10" alt="" border="0"></td>
<td background="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_fon_bot.gif" align="right"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_44.gif" width="6" height="10" alt="" border="0"></td>
<td ><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_45.gif" width="10" height="10" alt="" border="0"></td>
</tr>
</table>
<!-- /left -->
</td>
<td>
<!-- left -->
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_11.gif" width="10" height="9" alt="" border="0"></td>
<td background="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_13.gif"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_12.gif" width="6" height="9" alt="" border="0"></td>
<td background="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_13.gif" align="right"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_14.gif" width="6" height="9" alt="" border="0"></td>
<td><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_15.gif" width="10" height="9" alt="" border="0"></td>
</tr>
<tr valign="top">
<td background="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_fon_left.gif"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_21.gif" width="10" height="6" alt="" border="0"></td>
<td rowspan="2" colspan="2">
<!-- in -->
<table border="0" cellpadding="0" cellspacing="0" width="160">
<tr>
<td><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/temp03.gif" alt="" width="58" height="54" border="0"></td>
<td>
<p style="color: #1F86DE; font-size: 15px; padding-bottom: 0px;"><b>Mouse</b></p>
<p>CPU Intel<br>
DIMM 256<br>
HDD 20 GB</p>
<p style="color: #DA0008; font-size: 17px; padding-bottom: 5px;"><b>$5.00</b></p>
</td>
</tr>
</table>
<!-- /in -->
</td>
<td background="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_fon_right.gif"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_23.gif" width="10" height="6" alt="" border="0"></td>
</tr>
<tr valign="bottom">
<td background="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_fon_left.gif"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_31.gif" width="10" height="7" alt="" border="0"></td>
<td background="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_fon_right.gif"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_33.gif" width="10" height="7" alt="" border="0"></td>
</tr>
<tr>
<td><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_41.gif" width="10" height="10" alt="" border="0"></td>
<td background="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_fon_bot.gif"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_42.gif" width="6" height="10" alt="" border="0"></td>
<td background="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_fon_bot.gif" align="right"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_44.gif" width="6" height="10" alt="" border="0"></td>
<td ><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_45.gif" width="10" height="10" alt="" border="0"></td>
</tr>
</table>
<!-- /left -->
</td>
<td>
<!-- left -->
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_11.gif" width="10" height="9" alt="" border="0"></td>
<td background="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_13.gif"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_12.gif" width="6" height="9" alt="" border="0"></td>
<td background="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_13.gif" align="right"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_14.gif" width="6" height="9" alt="" border="0"></td>
<td><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_15.gif" width="10" height="9" alt="" border="0"></td>
</tr>
<tr valign="top">
<td background="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_fon_left.gif"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_21.gif" width="10" height="6" alt="" border="0"></td>
<td rowspan="2" colspan="2">
<!-- in -->
<table border="0" cellpadding="0" cellspacing="0" width="160">
<tr>
<td><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/temp03.gif" alt="" width="58" height="54" border="0"></td>
<td>
<p style="color: #1F86DE; font-size: 15px; padding-bottom: 0px;"><b>Mouse</b></p>
<p>CPU Intel<br>
DIMM 256<br>
HDD 20 GB</p>
<p style="color: #DA0008; font-size: 17px; padding-bottom: 5px;"><b>$5.00</b></p>
</td>
</tr>
</table>
<!-- /in -->
</td>
<td background="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_fon_right.gif"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_23.gif" width="10" height="6" alt="" border="0"></td>
</tr>
<tr valign="bottom">
<td background="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_fon_left.gif"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_31.gif" width="10" height="7" alt="" border="0"></td>
<td background="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_fon_right.gif"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_33.gif" width="10" height="7" alt="" border="0"></td>
</tr>
<tr>
<td><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_41.gif" width="10" height="10" alt="" border="0"></td>
<td background="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_fon_bot.gif"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_42.gif" width="6" height="10" alt="" border="0"></td>
<td background="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_fon_bot.gif" align="right"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_44.gif" width="6" height="10" alt="" border="0"></td>
<td ><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/t_45.gif" width="10" height="10" alt="" border="0"></td>
</tr>
</table>
<!-- /left -->
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="95%" align="center" height="25" background="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/fon_bar01.gif">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" background="" bgcolor="#FFFFFF">
<tr>
<td><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/e05.gif" width="21" height="21" alt="" border="0"></td>
<td><p class="bar01" style="color: #4AC250; font-size: 18px;">Top News </p></td>
</tr>
</table>
</td>
</tr>
</table>
<p class="px5">
<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="275">
<p class="left"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/dot_b.gif" width="5" height="5" alt="" border="0" align="absmiddle"> <b>Lorem ipsum dolor sit amet, consectetuer</b></p>
<p class="left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh commodo consequat.</p>
<p class="left"><a href="">Read More</a></p>
</td>
<td bgcolor="#979797"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/px1.gif" width="1" height="1" alt="" border="0"></td>
<td width="275">
<p class="left"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/dot_b.gif" width="5" height="5" alt="" border="0" align="absmiddle"> <b>Lorem ipsum dolor sit amet, consectetuer</b></p>
<p class="left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh commodo consequat.</p>
<p class="left"><a href="">Read More</a></p>
</td>
</tr>
</table>
<p class="px5">
</td>
and replace by:
PHP Code:
<td bgcolor="#FFFFFF" width="572" id="contentCell">
<div align="center"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/m_top.gif" width="572" height="8" alt="" border="0"></div>
<!-- content -->
<div id="contentBox">
<?php
if (isset($content_template)) {
require(DIR_WS_CONTENT . $content_template);
} else {
require(DIR_WS_CONTENT . $content . '.tpl.php');
}
?>
</div>
<!-- /content -->
</td>
The id="contentCell" and id="contentBox" make it possible to assign styles to the content area later on.
The part between "<?php" and "?>" includes the content (like shipping info, product info, the advanced search etc.) into the pages. There is no need to understand how and why this exactly works right now. You will find this same piece of code inside every BTS "main_page.tpl.php" file whatever template is being used.
6.3) Including the search box and the catagories box
at approx. line 126 to 145 find:
PHP Code:
<table border="0" cellpadding="0" cellspacing="0" width="165" background="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/fon_left02.gif">
<tr>
<td background="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/left02.gif" height="26"><p class="title">QUICK SEARCH</p></td>
</tr>
<tr>
<td>
<form action="" method="post">
<p class="px5">
<div align="center"><input type="Text" name="" size="13"></div>
<p class="px5">
<div align="center"><input type="Image" src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/b_search.gif" width="79" height="20" alt="" border="0"></div>
<p class="px5">
<p class="b01"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/e02.gif" width="6" height="5" alt="" border="0" align="absmiddle"> <a href="">Advanced search</a></p>
</td>
</tr>
</form>
<tr>
<td><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/left_bot02.gif" width="165" height="18" alt="" border="0"></td>
</tr>
</table>
this part looks like the "old" search box, so we should include the osC search box here instead. To be precise: a standard osC includes columns with boxes, but it seems easyer to me if we directly include the boxes for now. The code for this I took from "includes/column_left.php" from the osC installation.
So we replace the above code by:
PHP Code:
<!-- search box -->
<?php
require(DIR_WS_BOXES . 'search.php');
?>
<!-- /search box -->
The "old" catagories box the code is just above, approx line 82-124 (only separated by one <br> from the search box).
PHP Code:
<table border="0" cellpadding="0" cellspacing="0" width="165" background="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/fon_left02.gif">
<tr>
<td background="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/left01.gif" height="26"><p class="title">COMPONENTS</p></td>
</tr>
<tr>
<td>
<p class="b01"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/e02.gif" width="6" height="5" alt="" border="0" align="absmiddle"> <a href="">Motherboards</a></p>
<div align="center"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/hr01.gif" width="137" height="3" alt="" border="0"></div>
<p class="b01"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/e02.gif" width="6" height="5" alt="" border="0" align="absmiddle"> <a href="">Processors</a></p>
<div align="center"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/hr01.gif" width="137" height="3" alt="" border="0"></div>
<p class="b01"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/e02.gif" width="6" height="5" alt="" border="0" align="absmiddle"> <a href="">Memory</a></p>
<div align="center"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/hr01.gif" width="137" height="3" alt="" border="0"></div>
<p class="b01"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/e02.gif" width="6" height="5" alt="" border="0" align="absmiddle"> <a href="">Hard Drivers</a></p>
<div align="center"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/hr01.gif" width="137" height="3" alt="" border="0"></div>
<p class="b01"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/e02.gif" width="6" height="5" alt="" border="0" align="absmiddle"> <a href="">Monitors</a></p>
<div align="center"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/hr01.gif" width="137" height="3" alt="" border="0"></div>
<p class="b01"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/e02.gif" width="6" height="5" alt="" border="0" align="absmiddle"> <a href="">Case</a></p>
<div align="center"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/hr01.gif" width="137" height="3" alt="" border="0"></div>
<p class="b01"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/e02.gif" width="6" height="5" alt="" border="0" align="absmiddle"> <a href="">UPS</a></p>
<div align="center"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/hr01.gif" width="137" height="3" alt="" border="0"></div>
<p class="b01"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/e02.gif" width="6" height="5" alt="" border="0" align="absmiddle"> <a href="">Cards</a></p>
<div align="center"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/hr01.gif" width="137" height="3" alt="" border="0"></div>
<p class="b01"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/e02.gif" width="6" height="5" alt="" border="0" align="absmiddle"> <a href="">CD/CDR</a></p>
<div align="center"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/hr01.gif" width="137" height="3" alt="" border="0"></div>
<p class="b01"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/e02.gif" width="6" height="5" alt="" border="0" align="absmiddle"> <a href="">Data Storage</a></p>
<div align="center"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/hr01.gif" width="137" height="3" alt="" border="0"></div>
<p class="b01"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/e02.gif" width="6" height="5" alt="" border="0" align="absmiddle"> <a href="">Multimedia</a></p>
<div align="center"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/hr01.gif" width="137" height="3" alt="" border="0"></div>
<p class="b01"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/e02.gif" width="6" height="5" alt="" border="0" align="absmiddle"> <a href="">Removable Storage</a></p>
<div align="center"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/hr01.gif" width="137" height="3" alt="" border="0"></div>
<p class="b01"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/e02.gif" width="6" height="5" alt="" border="0" align="absmiddle"> <a href="">Scanners/drivers</a></p>
<div align="center"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/hr01.gif" width="137" height="3" alt="" border="0"></div>
<p class="b01"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/e02.gif" width="6" height="5" alt="" border="0" align="absmiddle"> <a href="">Hubs and Routers</a></p>
<div align="center"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/hr01.gif" width="137" height="3" alt="" border="0"></div>
<p class="b01"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/e02.gif" width="6" height="5" alt="" border="0" align="absmiddle"> <a href="">Speakers</a></p>
<div align="center"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/hr01.gif" width="137" height="3" alt="" border="0"></div>
<p class="b01"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/e02.gif" width="6" height="5" alt="" border="0" align="absmiddle"> <a href="">Sofware</a></p>
</td>
</tr>
<tr>
<td><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/left_bot02.gif" width="165" height="18" alt="" border="0"></td>
</tr>
</table>
again we use the code from the osC "column_left.php" to replace it:
PHP Code:
<!-- categories box -->
<?php
if ((USE_CACHE == 'true') && empty($SID)) {
echo tep_cache_categories_box();
} else {
include(DIR_WS_BOXES . 'categories.php');
}
?>
<!-- /categories box -->
If you take a closer look at the "old" categories box (posted above) you will see it's a small table with three columns each containing one table cell. The top cell contains the box heading, the middle cell contains the box contents and the bottom cell has no real content but is only there to show the bottom graphics. The oneTable template happens to use a box template which is almost the same.
PHP Code:
<?php /* template for all boxes, edit and "save as" for individual boxes */ ?>
<table cellspacing="0" class="infoBoxLT" id="<?php if (isset($box_id)) {echo $box_id . 'LT';} ?>" summary="infoBox">
<tr><td class="infoBoxHeadingLT"><div><?php echo $boxHeading; ?></div><?php echo $boxLink; ?></td></tr>
<tr><td class="boxTextLT"><?php echo $boxContent; ?></td></tr>
</table>
We can use this almost as it is. I will only add one row (for the bottom image), and add/change some CSS class names so we can style the boxes afterwards:
PHP Code:
<?php /* template for all boxes, edit and "save as" for individual boxes */ ?>
<table cellspacing="0" class="infoBox32" id="<?php if (isset($box_id)) {echo $box_id;} ?>" summary="infoBox">
<tr>
<td class="infoBox32Top"><p class="title"><?php echo $boxHeading; ?></p></td>
</tr>
<tr>
<td class="b01"><?php echo $boxContent; ?></td>
</tr>
<tr>
<td class="infoBox32Bottom"></td>
</tr>
</table>
The class="b01" I copied from template 32, the other class names I made up myself.
Now save the above code as "box.tpl.php" to the "templates/32/boxes" directory (if you are using a different BTS version, you might have another boxes directory of course). If everything went right you should be able to browse your categories, and the search box should be functional, all without any error messages.
The looks will be terrible now, but don't worry, we will fix that later (by adding some styles to the stylesheet) after we've included the login and shopping cart, which will be the next.Note:
In the BTSv1.2 the infoboxes automatically get their own (CSS) id, and "$box_id" contains the the id name (it is set in the "includes/boxes/" files, directly derived from the filenames of the boxes

).
This way you can assign different styles to different boxes, even without creating separate templates for it. We will use this feature in this example to give the categories box and search box their own heading background (orange for the search and green for the categories).
Getting tired already? Well, we're almost finished editting main_page, and then we only have to add some styles to improve the looks, so hang on
6.4) Including the shopping cart box and the login
The shopping cart is a simple table too. Find (approx line 64-69):
PHP Code:
<table border="0" cellpadding="0" cellspacing="0" width="100%" background="">
<tr align="center">
<td><p style="color: #FFFFFF; font-size: 10px;"><b>TOTAL<br>$11500,00</b></p></td>
<td><a href=""><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/b_vew.gif" width="79" height="20" alt="" border="0"></a></td>
</tr>
</table>
and replace it by:
PHP Code:
<!-- shoppingcart box -->
<?php
require(DIR_WS_BOXES . 'shopping_cart.php');
?>
<!-- /shopping cart box -->
(code derived from "includes/column_right.php")
The shopping cart is quite different than the other two boxes we have, so we will use a separate box template for it:
PHP Code:
<table cellspacing="0" width="100%" id="<?php if (isset($box_id)) {echo $box_id;} ?>" summary="infoBox">
<tr align="center">
<td class="boxContent"><?php echo $boxContent; ?></td>
<td id="shoppingCartButton"><a href="<?php echo tep_href_link(FILENAME_SHOPPING_CART, '', 'SSL'); ?>"><img src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/b_vew.gif" width="79" height="20" alt="" border="0"></a></td>
</tr>
</table>
We could transfer a part of this code to the stylesheet, but I won't do that now (sorry have to save some time now, writing all this is taking too much time as it is already, might optimize it later if anyone is interested). Save the above code as "shopping_cart.tpl.php" to the "templates/32/boxes/" directory and the BTSv1.2 automaticly will use this as template for the shopping cart (If you are using a different BTS version you probably have to install this box template somehow. But don't ask me, ask the author)
And the login code (approx. lines 56-62 "main_page.tpl.php") :
PHP Code:
<form action="" method="post">
<td height="40" background="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/form03.gif" width="341" alt="" border="0" align="center">
<input type="Text" name="" value=" USERNAME" size="10">
<input type="Text" name="" value=" PASSWORD" size="10">
<input type="image" src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/b_login.gif" width="79" height="20" alt="" border="0" align="absbottom">
</td>
</form>
Unfortunately this isn't a full table, that and because a login box does not exist in osC2.2MS2, I decided not to create a box template for it now. (of course we can make it a table or a div and create a loginbox if we really want, but it will take time....)
I have used some code from the login box contri (also in the BTS-addons) and mixed it with the HTML template code, to insert the login code directly into the main template:
PHP Code:
<!-- login -->
<form name="login" method="post" action="<?php echo tep_href_link(FILENAME_LOGIN, 'action=process', 'SSL'); ?>">
<td height="40" background="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/form03.gif" width="341" alt="" border="0" align="center">
<input type="text" name="email_address" maxlength="96" value=" USERNAME" size="10">
<input type="password" name="password" maxlength="40" value=" PASSWORD" size="10">
<input type="image" src="<?php echo DIR_WS_TEMPLATES; ?>http://www.oscmax.com/forums/images/b_login.gif" width="79" height="20" alt="" border="0" align="absbottom">
</td>
</form>
<!-- /login -->
Bookmarks