osCommerce and osCMax shopping cart software forums

Shopping Cart Software

osCommerce with teeth!

 

BTS Template Tutorial, Examples, converting osC template to BTS

This is a discussion on BTS Template Tutorial, Examples, converting osC template to BTS within the osCMax v2 Features Discussion forums, part of the osCMax v2.0 Forums category; Please note that I did not write section 1 of this tutorial. All credit for section 1 of this tutorial ...



Find us on Facebook
Go Back   osCommerce and osCMax shopping cart software forums > osCMax v2.0 Forums > osCMax v2 Features Discussion

Connect with Facebook Register FAQDonate Members List Calendar Mark Forums Read


Reply

 

LinkBack Thread Tools
  #1  
Old 07-06-2008, 07:57 PM
michael_s's Avatar
osCMax Developer


 
Join Date: Jul 2002
Location: Phoenix, AZ
Posts: 15,701
Thanks: 139
Thanked 606 Times in 519 Posts
Rep Power: 10
michael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond repute
Default BTS Template Tutorial, Examples, converting osC template to BTS

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&nbsp;</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>&nbsp; 
</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>&nbsp; 
</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&nbsp;</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&nbsp;</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">&nbsp;&nbsp;<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">&nbsp;&nbsp;<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">&nbsp;&nbsp;<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">&nbsp;&nbsp;<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">&nbsp;&nbsp;<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">&nbsp;&nbsp;<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">&nbsp;&nbsp;<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">&nbsp;&nbsp;<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">&nbsp;&nbsp;<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">&nbsp;&nbsp;<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">&nbsp;&nbsp;<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">&nbsp;&nbsp;<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">&nbsp;&nbsp;<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">&nbsp;&nbsp;<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">&nbsp;&nbsp;<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">&nbsp;&nbsp;<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">&nbsp;&nbsp;<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">&nbsp;&nbsp;<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">&nbsp;&nbsp;<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 -->
__________________
Michael Sasek
osCMax Developer

*** Do not PM me requesting paid help. The only paid work I do is for AABox Web Hosting customers ***

Stay Up To Date with everything osCMax:
Free osCMax Newsletters - Security notices, New Releases, osCMax News
osCMax on Twitter - Up to the minute info as it happens. Know it first.

osCMax User Manual - osCMax Templates - Advanced Template Tutorial

Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
The Following 3 Users Say Thank You to michael_s For This Useful Post:
farcrowe (07-12-2008), pgmarshall (03-14-2009), ural (12-08-2009)
  #2  
Old 07-06-2008, 08:07 PM
michael_s's Avatar
osCMax Developer


 
Join Date: Jul 2002
Location: Phoenix, AZ
Posts: 15,701
Thanks: 139
Thanked 606 Times in 519 Posts
Rep Power: 10
michael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond repute
Default BTS Template Tutorial, Examples, converting osC template to BTS

7.1) Updating the links in "main_page.tpl.php"

replace all:
PHP Code:
<a href=""
by:
PHP Code:
<a href="<?PHP echo tep_href_link ('filename.php'); ?>">
In stead of "filename.php" fill in the page you want to link to.
(the tep_href_link calls an osC function which adds a session id to the url, so your cart remembers things like the costumer cart contents)
Also the top menu misses all links, so you can add those using the same code as above.

7.2) Adding some new pages, this not about adapting the template, but without the new pages we would end up with a lot of dead links or links to index.php, so I decided to add this anyway.

You can add new pages the osC way (defining the filenames etc.), please do so if you know how it is done.
Or as a fast alternative, you can use this code:
PHP Code:
<?php 
/* 
  $Id: new_page.php, 2004/01/12 
 
  Copyright (c) 2003 Paul Mathot Haarlem Netherlands 
  & osCommerce & others. 
 
  advanced easy new pages v1.0 for the BTS 2004/01/07 
  Released under the GNU General Public License 
*/ 
require('includes/application_top.php'); 
 
$pageFileName basename ($PHP_SELF); 
$pageName basename ($PHP_SELF,".php"); // needs php => 4.1 
// set the name of the javascript file to load (only if needed) from "includes/javascript/"" 
//  $javascript = 'new_page.js'; 
 
if (file_exists(DIR_WS_TEMPLATES 'content/' $pageName '.tpl.php')) { 
  
// use the template made for this page 
  
$content $pageName

else { 
  
// or use 'static.tpl.php', or fill in which other template i.s.o. 'static' should be used 
  
$content 'static'

$pm_template_path DIR_WS_TEMPLATES 'content/' $content '.tpl.php'
 
// load (language dependent) texts defines from "includes/languages/.../new_page.php" if it exists 
if (file_exists(DIR_WS_LANGUAGES $language '/' $pageFileName)) { 
  require(
DIR_WS_LANGUAGES $language '/' $pageFileName); 
  
$pm_language_path DIR_WS_LANGUAGES $language '/' $pageFileName

elseif (
file_exists(DIR_WS_LANGUAGES $language '/new_page.php')) { 
  require(
DIR_WS_LANGUAGES $language '/new_page.php'); 
  
$pm_language_path DIR_WS_LANGUAGES $language '/new_page.php'

// load (language dependent) code files from "includes/languages/.../new_page.code.php" if it exists 
if (file_exists(DIR_WS_LANGUAGES $language '/' $pageName '.code.php')) { 
  
$pm_code_path DIR_WS_LANGUAGES $language '/' $pageName '.code.php'

 
$breadcrumb->add(NAVBAR_TITLEtep_href_link($pageFileName)); 
 
/******************************************************************************/ 
// PHP code here, but no output (output code and HTML in template file) 
 
 
 
/******************************************************************************/ 
 
// load main_page (the $content template and $javascript are included in main_page.tpl.php) 
require(DIR_WS_TEMPLATES TEMPLATENAME_MAIN_PAGE); 
 
require(
DIR_WS_INCLUDES 'application_bottom.php'); 
?>
Save as the filename you want (i.e. "faq.php") to the root of your cart.

and a basic texts defines page
PHP Code:
<?php 
/* 
  $Id: new_page.php, 2004/01/12 
 
  Copyright (c) 2003 Paul Mathot Haarlem Netherlands 
  & osCommerce & others. 
 
  Released under the GNU General Public License 
*/ 
 
define('NAVBAR_TITLE''New page'); 
define('HEADING_TITLE''New page'); 
define('TEXT_INFORMATION''Sorry, the info for this page (<b style="color: red;">' $pageFileName '</b>) isn\'t added yet.'); 
?>
Save as new_page.php (or use the same filename you used above, i.e. "faq.php" if you really want to add texts to these pages), to "includes/langauages/english/".
(If you don't create templates for these pages, they will use "templates/32/content/static.tpl.php" as template.)

If we didn't make any errors the "main_page.tpl.php" code now should look like this:
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> 
<body leftmargin=0 topmargin=0 marginheight="0" marginwidth="0" bgcolor="#E6E6E6"> 
<?php 
// include i.e. template switcher in every template 
if(file_exists(DIR_WS_TEMPLATES_BASE 'common_top_bts-3.php')) require(DIR_WS_TEMPLATES_BASE 'common_top_bts-3.php'); 
?> 
<table border="0" cellpadding="0" cellspacing="0" width="758" align="center"> 
<tr valign="top"> 
        <td><img src="<?php echo DIR_WS_TEMPLATES?>images/logo.gif" alt="" width="184" height="129" border="0"></td> 
        <td> 
<table border="0" cellpadding="0" cellspacing="0" width="100%"> 
<tr> 
        <td colspan="2"> 
<table border="0" cellpadding="0" cellspacing="0"> 
<tr> 
        <td><a href="<?PHP echo tep_href_link ('company.php'); ?>"><img src="<?php echo DIR_WS_TEMPLATES?>images/but01.gif" width="115" height="30" alt="" border="0"></a></td> 
        <td><a href="<?PHP echo tep_href_link ('products.php'); ?>"><img src="<?php echo DIR_WS_TEMPLATES?>images/but02.gif" alt="" width="114" height="30" border="0"></a></td> 
        <td><a href="<?PHP echo tep_href_link ('promotion.php'); ?>"><img src="<?php echo DIR_WS_TEMPLATES?>images/but03.gif" width="112" height="30" alt="" border="0"></a></td> 
        <td><a href="<?PHP echo tep_href_link ('support.php'); ?>"><img src="<?php echo DIR_WS_TEMPLATES?>images/but04.gif" width="116" height="30" alt="" border="0"></a></td> 
        <td><a href="<?PHP echo tep_href_link ('solutions.php'); ?>"><img src="<?php echo DIR_WS_TEMPLATES?>images/but05.gif" width="117" height="30" alt="" border="0"></a></td> 
</tr> 
</table> 
        </td> 
</tr> 
<tr> 
        <td background="<?php echo DIR_WS_TEMPLATES?>images/fon_top01.gif" colspan="2" height="37"> 
<table border="0" cellpadding="0" cellspacing="0" width="100%" background=""> 
<tr> 
        <td><p class="menu01"><a href="<?PHP echo tep_href_link ('history.php'); ?>"><img src="<?php echo DIR_WS_TEMPLATES?>images/e01.gif" width="8" height="7" alt="" border="0">&nbsp;&nbsp;Company history</a></p></td> 
        <td><p class="menu01"><a href="<?PHP echo tep_href_link ('management.php'); ?>"><img src="<?php echo DIR_WS_TEMPLATES?>images/e01.gif" width="8" height="7" alt="" border="0">&nbsp;&nbsp;Executives management</a></p></td> 
        <td><p class="menu01"><a href="<?PHP echo tep_href_link ('contact_info.php'); ?>"><img src="<?php echo DIR_WS_TEMPLATES?>images/e01.gif" width="8" height="7" alt="" border="0">&nbsp;&nbsp;Contact Info</a></p></td> 
        <td><p class="menu01"><a href="<?PHP echo tep_href_link ('partners.php'); ?>"><img src="<?php echo DIR_WS_TEMPLATES?>images/e01.gif" width="8" height="7" alt="" border="0">&nbsp;&nbsp;Our Partners</a></p></td> 
        <td><p class="menu01"><a href="<?PHP echo tep_href_link ('contacts.php'); ?>"><img src="<?php echo DIR_WS_TEMPLATES?>images/e01.gif" width="8" height="7" alt="" border="0">&nbsp;&nbsp;Contacts</a></p></td> 
</tr> 
</table> 
        </td> 
</tr> 
<tr> 
        <td><img src="<?php echo DIR_WS_TEMPLATES?>images/form01.gif" width="341" height="22" alt="" border="0"></td> 
        <td><img src="<?php echo DIR_WS_TEMPLATES?>images/form02.gif" width="233" height="22" alt="" border="0"></td> 
</tr> 
<tr> 
<!-- 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?>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?>images/b_login.gif" width="79" height="20" alt="" border="0" align="absbottom"> 
        </td> 
</form> 
<!-- /login --> 
        <td background="<?php echo DIR_WS_TEMPLATES?>images/form04.gif" width="233" height="40"> 
<!-- shoppingcart box --> 
<?php 
  
require(DIR_WS_BOXES 'shopping_cart.php'); 
?> 
<!-- /shopping cart box --> 
        </td> 
</tr> 
</table> 
        </td> 
</tr> 
</table> 
<table border="0" cellpadding="0" cellspacing="0" width="758" align="center"> 
<tr valign="top"> 
        <td width="185" background="<?php echo DIR_WS_TEMPLATES?>images/fon_left03.gif"> 
<table border="0" cellpadding="0" cellspacing="0" background="<?php echo DIR_WS_TEMPLATES?>images/fon_left01.gif" width="100%"> 
<tr> 
        <td align="right"> 
<!-- categories box --> 
<?php 
  
if ((USE_CACHE == 'true') && empty($SID)) { 
    echo 
tep_cache_categories_box(); 
  } else { 
    include(
DIR_WS_BOXES 'categories.php'); 
  } 
?> 
<!-- /categories box --> 
<br> 
<!-- search box --> 
<?php 
  
require(DIR_WS_BOXES 'search.php'); 
?> 
<!-- /search box --> 
        </td> 
</tr> 
<tr> 
        <td><img src="<?php echo DIR_WS_TEMPLATES?>images/left_bot01.gif" width="185" height="32" alt="" border="0"></td> 
</tr> 
</table> 
        </td> 
        <td bgcolor="#FFFFFF" width="572" id="contentCell"> 
<div align="center"><img src="<?php echo DIR_WS_TEMPLATES?>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> 
        <td bgcolor="#979797"><img src="<?php echo DIR_WS_TEMPLATES?>images/px1.gif" width="1" height="1" alt="" border="0"></td> 
</tr> 
</table> 
<table border="0" cellpadding="0" cellspacing="0" width="758" align="center"> 
<tr> 
        <td height="52" align="right" background="<?php echo DIR_WS_TEMPLATES?>images/bot.gif"> 
<table border="0" cellpadding="0" cellspacing="0" width="530" background=""> 
<tr> 
        <td> 
<p class="menu02"> 
<a href="<?PHP echo tep_href_link ('index.php'); ?>">Home</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<a href="<?PHP echo tep_href_link ('shipping.php'); ?>">Shipping</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<a href="<?PHP echo tep_href_link ('privacy.php'); ?>">Privacy</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<a href="<?PHP echo tep_href_link ('conditions.php'); ?>">Conditions</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<a href="<?PHP echo tep_href_link ('contact_us.php'); ?>">Contact us</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<a href="<?PHP echo tep_href_link ('help.php'); ?>">Help</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<a href="<?PHP echo tep_href_link ('faq.php'); ?>">FAQ</a> 
</p> 
        </td> 
</tr> 
</table> 
        </td> 
</tr> 
<tr> 
        <td><p align="right" style="margin-right: 200px;">Copyright &copy;2003 CompanyName.com</p></td> 
</tr> 
</table> 
 
</body> 
</html>
8 ) Adding styles to the stylesheet, restoring the looks.
PHP Code:
/* styles added for osC+BTS */ 
/* general */ 
a:hover 
color#da0008 !important; 

/* end general */ 
I didn't like the grey hovers, the "!important" tells the browser this style should override any style settings which are not "!important"

PHP Code:
/* styles (mainly) for the middle content */ 
h1 
font-size20px
color#da0008; 

.
greetuser 
font-weightbold
color#39ae39; 

.
inputRequirement 
color#f75d00; 

table td 
padding0

/* hide the ugly corner images */ 
#contentBox table td.infoBoxHeading img { 
displaynone

td#contentCell { 
text-aligncenter

div#contentBox { 
width550
margin8px auto
text-alignleft

table,td 
font-size 11px
font-family Tahoma,Verdana,Arial

/* end styles (mainly) for the middle content */ 
The 'table td {padding: 0;}' is the same as the old 'cellpadding="0"' (so all cellpadding="0" can be removed from main_page now if you like).
The 'td#contentCell {text-align: center;}' centers the middle content (only needed for IE centering bug).
In 'div#contentBox {width: 550; margin: 8px auto; text-align: left;}' contentBox bottom and top-margins will be 8 pixels, and the left and right margin are set to auto which centers the contentBox (equal left and right margin means center).


PHP Code:
/* shopping cart box styles */ 
#shopping_cartBox td.boxContent table, #shopping_cartBox td.boxContent img { 
displaynone

#shopping_cartBox div, #shopping_cartBox td { 
colorwhite
font-weightbold

/* end shopping cart box styles */ 
We only want the total price to show, and we are lucky this time. By using 'display: none' it is possible to hide the "unneeded" contents of the shoppingcart box. This way we don't need to alter the osC core code for this .


PHP Code:
/* small infobox styles */ 
td.b01 
padding4px 0 5px 20px

td.b01 form 
displayinline

table.infoBox32 
width165
background#fff url(images/fon_left02.gif); 

.
infoBox32Bottom 
background#fff url(images/left_bot02.gif); 
height18px

.
infoBox32Top 
background#f75d00 url(images/left02.gif); 
height26px

/* green background */ 
#categoriesBox td.infoBox32Top { 
background#4ac752 url(images/left01.gif); 

/* end small infobox styles */ 
/* end styles added for osC+BTS */ 
The 'td.b01 form {display: inline;}' is needed to make the huge bottom margin below the search form dissapear (only needed for IE, =IE bug?).
The given background colors are shown before the background images are loaded (handy if the page loads very slow or if the user does not receive the backgrounds for some other reason).

All together we can add the CSS below to the end of the stylesheet ("templates/32/styles.css").
All above styles together (makes it easyer to copy and paste ):
PHP Code:
/* styles added for osC+BTS */ 
/* general styles */ 
a:hover 
color#da0008 !important; 

/* end general styles*/ 
/* styles (mainly) for the middle content */ 
h1 
font-size20px
color#da0008; 

.
greetuser 
font-weightbold
color#39ae39; 

.
inputRequirement 
color#f75d00; 

table td 
padding0

/* hide the ugly corner images */ 
#contentBox table td.infoBoxHeading img { 
displaynone

td#contentCell { 
text-aligncenter

div#contentBox { 
width550
margin8px auto
text-alignleft

table,td 
font-size 11px
font-family Tahoma,Verdana,Arial

/* end styles (mainly) for the middle content */ 
/* shopping cart box styles */ 
#shopping_cartBox td.boxContent table, #shopping_cartBox td.boxContent img { 
displaynone

#shopping_cartBox div, #shopping_cartBox td { 
colorwhite
font-weightbold

/* end shopping cart box styles */ 
/* small infobox styles */ 
td.b01 
padding4px 0 5px 20px

td.b01 form 
displayinline

table.infoBox32 
width165
background#fff url(images/fon_left02.gif); 

.
infoBox32Bottom 
background#fff url(images/left_bot02.gif); 
height18px

.
infoBox32Top 
background#f75d00 url(images/left02.gif); 
height26px

/* green background */ 
#categoriesBox td.infoBox32Top { 
background#4ac752 url(images/left01.gif); 

/* end small infobox styles */ 
/* end styles added for osC+BTS */ 
Small improvements can surely be made by adding some more styles to the stylesheet (and maybe editting the main_page again). But if you want major improvements (i.e. the middle content area), you will certainly need to edit the osC core code.

Other improvements could be:
1) Replacing the osC buttons by buttons which fit the template (anyone happens to have a nice button set that fits?)
2) Replacing the text buttons (for multi language sites)
3) Replacing the "Login" by a "Logout" and "My Account" link/button, if a costumer is logged in.
__________________
Michael Sasek
osCMax Developer

*** Do not PM me requesting paid help. The only paid work I do is for AABox Web Hosting customers ***

Stay Up To Date with everything osCMax:
Free osCMax Newsletters - Security notices, New Releases, osCMax News
osCMax on Twitter - Up to the minute info as it happens. Know it first.

osCMax User Manual - osCMax Templates - Advanced Template Tutorial

Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
The Following 3 Users Say Thank You to michael_s For This Useful Post:
farcrowe (07-12-2008), pgmarshall (03-14-2009), ural (12-08-2009)
  #3  
Old 07-06-2008, 11:00 PM
michael_s's Avatar
osCMax Developer


 
Join Date: Jul 2002
Location: Phoenix, AZ
Posts: 15,701
Thanks: 139
Thanked 606 Times in 519 Posts
Rep Power: 10
michael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond repute
Default BTS Template Tutorial: Create a secondary main template

This section of the tutorial is my original work, not Paul's. I put this together to demonstrate how to have a completely different main template for different pages of osCMax.

If you wanted to, each page on your site could have its own look, completely different from the others. There are several ways to do this, and I will explore each, but this seems to be the simplest way to do it (although maybe not the best?)

1. Edit /catalog/includes/configure_bts.php and add a new main template definition.

Under this on line 19:
PHP Code:
define('TEMPLATENAME_MAIN_PAGE''main_page.tpl.php'); 
Add this:
PHP Code:
define('TEMPLATENAME_MAIN_PAGE2''main_page2.tpl.php'); 
Next, after this block of code (lines 43-50) :
PHP Code:
    case 'main':
    
// default or main_page
      
if(is_file(DIR_WS_TEMPLATES TEMPLATENAME_MAIN_PAGE)) {
          
$path = (DIR_WS_TEMPLATES TEMPLATENAME_MAIN_PAGE);
      } else {
          
$path = (DIR_WS_TEMPLATES_FALLBACK TEMPLATENAME_MAIN_PAGE);
      }
    break; 
Add this:
PHP Code:
   case 'main2':
    
// default or main_page
      
if(is_file(DIR_WS_TEMPLATES TEMPLATENAME_MAIN_PAGE2)) {
          
$path = (DIR_WS_TEMPLATES TEMPLATENAME_MAIN_PAGE2);
      } else {
          
$path = (DIR_WS_TEMPLATES_FALLBACK TEMPLATENAME_MAIN_PAGE);
      }
    break; 
2. Copy templates/aabox/main_page.tpl.php to a new file named main_page2.tpl.php. Then edit main_page2.tpl.php to your liking. This will be your new custom framework.

3. Edit whatever .php page in the main /catalog directory that you want to use the new template, and change this:
PHP Code:
include (bts_select('main'$content_template)); // BTSv1.5 
To this:
PHP Code:
  include (bts_select('main2'$content_template)); // BTSv1.5 
This tells that page to load the new main_page2.tpl.php instead of main_page.tpl.php.



__________________
Michael Sasek
osCMax Developer

*** Do not PM me requesting paid help. The only paid work I do is for AABox Web Hosting customers ***

Stay Up To Date with everything osCMax:
Free osCMax Newsletters - Security notices, New Releases, osCMax News
osCMax on Twitter - Up to the minute info as it happens. Know it first.

osCMax User Manual - osCMax Templates - Advanced Template Tutorial

Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
The Following 2 Users Say Thank You to michael_s For This Useful Post:
pgmarshall (03-14-2009), ural (12-08-2009)
  #4  
Old 07-06-2008, 11:02 PM
michael_s's Avatar
osCMax Developer


 
Join Date: Jul 2002
Location: Phoenix, AZ
Posts: 15,701
Thanks: 139
Thanked 606 Times in 519 Posts
Rep Power: 10
michael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond repute
Default BTS Template Tutorial: Custom stylesheets per page

Custom Stylesheets per page
Next, a little gem that is not often used in BTS, but should be, is the ability to create per page stylesheets. This is how you do it:

1. In whatever template you are using, simply create a new directory called stylesheets

2. In this new directory, add your new stylesheet with a filname in this format:

pagefilename.css

Replace pagefilename with whatever filename you want the new stlyes to load for. So for example, I want a custom stylesheet to load for create_account.php, I simply need to make a new stylesheet in my /templates/aabox/stylesheets directory (or whatever template you are using) called create_account.css

3. Make sure this bit of code is in the head section of your main_page.tpl.php.

Replace this:
PHP Code:
<?php if (bts_select('stylesheets'$PHP_SELF)) { // if a specific stylesheet exists for this page it will be loaded ?>
<link rel="stylesheet" type="text/css" href="<?php echo (bts_select('stylesheets'$PHP_SELF)); // BTSv1.5 ?>">

<?php ?>
<link rel="stylesheet" type="text/css" href="<?php echo (bts_select('stylesheet','stylesheet.css')); // BTSv1.5 ?>">
With this:

PHP Code:
<?php if (bts_select('stylesheets'$PHP_SELF)) { // if a specific stylesheet exists for this page it will be loaded ?>
<link rel="stylesheet" type="text/css" href="<?php echo (bts_select('stylesheets'$PHP_SELF)); // BTSv1.5 ?>">

<?php
} else { ?> 
<link rel="stylesheet" type="text/css" href="<?php echo (bts_select('stylesheet','stylesheet.css')); // BTSv1.5 ?>">
<?php  ?>
This will allow each page of your shop to have its own custom styles.
__________________
Michael Sasek
osCMax Developer

*** Do not PM me requesting paid help. The only paid work I do is for AABox Web Hosting customers ***

Stay Up To Date with everything osCMax:
Free osCMax Newsletters - Security notices, New Releases, osCMax News
osCMax on Twitter - Up to the minute info as it happens. Know it first.

osCMax User Manual - osCMax Templates - Advanced Template Tutorial

Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
The Following 4 Users Say Thank You to michael_s For This Useful Post:
farcrowe (07-12-2008), pgmarshall (03-14-2009), TheGringe (08-09-2008), ural (12-08-2009)
  #5  
Old 07-12-2008, 07:59 PM
osCMax Testing Team
 
Join Date: Mar 2008
Posts: 12
Thanks: 4
Thanked 1 Time in 1 Post
Rep Power: 0
farcrowe is on a distinguished road
Default Re: BTS Template Tutorial, Examples, converting osC template to BTS

This is fantastic I've been needing this for custom landing pages! For all you that don't know what a landing page is here is a quick definition. Landing Pages are pages dedicated to a specific subject you may be marketing. For a example You could use the above method to create one page specific to a certain movie or a certain type of ink cartridge or computer part. The reason why you should have more than one look to your pages is simple. Marketing! Don't push products that have nothing to do with the add campaigns your running it annoys the buyer. Your buyer wan'ts the product he are she wants now! They don't want to look for it, so creating specific pages, aka landing pages with the above method is your goal as a web marketer. Thanks again for the great info I'm off to go create my pages now.

Last edited by farcrowe; 07-12-2008 at 08:10 PM.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
The Following User Says Thank You to farcrowe For This Useful Post:
Anomily (07-22-2008)
  #6  
Old 07-12-2008, 08:09 PM
michael_s's Avatar
osCMax Developer


 
Join Date: Jul 2002
Location: Phoenix, AZ
Posts: 15,701
Thanks: 139
Thanked 606 Times in 519 Posts
Rep Power: 10
michael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond repute
Default Re: BTS Template Tutorial, Examples, converting osC template to BTS

What banner?

The tutorial shows you how to create different template designs and styles, nothing to do with actual content. You can then edit the template html to be whatever you want. This just shows you how to get the framework in place.
__________________
Michael Sasek
osCMax Developer

*** Do not PM me requesting paid help. The only paid work I do is for AABox Web Hosting customers ***

Stay Up To Date with everything osCMax:
Free osCMax Newsletters - Security notices, New Releases, osCMax News
osCMax on Twitter - Up to the minute info as it happens. Know it first.

osCMax User Manual - osCMax Templates - Advanced Template Tutorial

Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
  #7  
Old 07-22-2008, 12:08 PM
osCMax Testing Team
 
Join Date: Jul 2008
Posts: 19
Thanks: 15
Thanked 1 Time in 1 Post
Rep Power: 0
Anomily is on a distinguished road
Default Re: BTS Template Tutorial, Examples, converting osC template to BTS

I pretty sure he was talking about the top banner in the template file. You know the one in the header.

Last edited by Anomily; 07-22-2008 at 12:10 PM. Reason: spelling
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
  #8  
Old 09-05-2008, 06:34 AM
Member
 
Join Date: Aug 2008
Location: Canada
Posts: 61
Thanks: 10
Thanked 2 Times in 2 Posts
Rep Power: 2
BrandonScottishRegalia is on a distinguished road
Question Re: BTS Template Tutorial, Examples, converting osC template to BTS

I'm a noob. what files am i suppost to upload along with the main_page.tpl.php file into the folder? it just says the standard template files what are these files you are referring too. Basically my situation is that we have a oscommerce template from template monster and want it to be an oscmax template and this tutorial seems like the only way to do it. So can someone please explain to me which files i need to transfer over to make it work? Need help asap.

Thanks
Brandon
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
  #9  
Old 09-05-2008, 09:29 AM
michael_s's Avatar
osCMax Developer


 
Join Date: Jul 2002
Location: Phoenix, AZ
Posts: 15,701
Thanks: 139
Thanked 606 Times in 519 Posts
Rep Power: 10
michael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond reputemichael_s has a reputation beyond repute
Default Re: BTS Template Tutorial, Examples, converting osC template to BTS

Quote:
Originally Posted by BrandonScottishRegalia View Post
I'm a noob. what files am i suppost to upload along with the main_page.tpl.php file into the folder? it just says the standard template files what are these files you are referring too. Basically my situation is that we have a oscommerce template from template monster and want it to be an oscmax template and this tutorial seems like the only way to do it. So can someone please explain to me which files i need to transfer over to make it work? Need help asap.

Thanks
Brandon
Brandon,

osCMax does not require that you copy any of the files anymore. They only need to be copied if they are being changed from the default files. Otherwise, osCMax knows to fallback to the the "fallback" templates and grab them on the fly.

If, however, you are making customizations to the content templates, when you create your new template folder, just copy the content folder from the fallback template directory to your new template directory. Now you customize your copied files as needed.

To summarize, most osCommerce templates just need the header, footer and index page code to be combined to a new main_page.tpl.php file and that is it.
__________________
Michael Sasek
osCMax Developer

*** Do not PM me requesting paid help. The only paid work I do is for AABox Web Hosting customers ***

Stay Up To Date with everything osCMax:
Free osCMax Newsletters - Security notices, New Releases, osCMax News
osCMax on Twitter - Up to the minute info as it happens. Know it first.

osCMax User Manual - osCMax Templates - Advanced Template Tutorial

Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
  #10  
Old 04-07-2009, 07:13 PM
Member
 
Join Date: Apr 2009
Posts: 30
Thanks: 0
Thanked 0 Times in 0 Posts
Rep Power: 0
heezay is on a distinguished road
Question Re: BTS Template Tutorial, Examples, converting osC template to BTS

Wow I must be a noob aswel. Reading through this got me soooooo confused of course I thinks it because I dont understand it fully yet. Header title states change html to oscmax. Now I cant really create a html webpage with php files in them, they dont show up. How do you guys create a html webpage with these files and location and design in mind? Also you are referring to alot of codes which I am unsure of, is there a demo file that you have used that we use for this tutorial?? Sorry but tried with my own but got lost with all the different codes just a few lines down???? Can you guys give me the file that has been used here with all the corresponding codes? I'll try it again. All of its going right over my head right now. Aint got a clue. But I wana keep trying. Am not to bad with customizing the standard osc format codes. But these phew!! I need help.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Reply

Tags
bts tutorial

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On


Similar Threads

Thread Thread Starter Forum Replies Last Post
Flame Template for BTS michael_s New osCommerce Contributions 0 03-01-2007 10:50 AM
HTML template (and system) for the BTS paulM osCMax v2 Customization/Mods 17 11-24-2005 12:24 PM
BTS 1.2a Basic Template System - questions stevensdesign osCMax v1.7 General Mods Discussion 1 04-13-2005 01:18 PM
BTS problem with my template, help apprecaited EddyXP osCMax v1.7 Discussion 0 07-04-2004 11:16 AM
BTS 1.0b to 1.2a Template System Upgrade causes DB error RaEMeY osCMax v1.7 Discussion 0 03-07-2004 02:36 PM


All times are GMT -8. The time now is 09:19 PM.


Powered by vBulletin®
Copyright ©2000 - 2010, Jelsoft Enterprises Ltd.
SEO by vBSEO
Copyright 2009 osCMax
Inactive Reminders By Icora Web Design