Dieses Dokuwiki verwendet ein von Anymorphic Webdesign erstelltes Thema.

This is an old revision of the document!


Converting an HTML or standard osC Template to BTS/osCMax format Tutorial

Converting a Template can be quite a long process to complete but below is a tutorial written by michael_s from osCMax which should help you out.

Step 1: Create the new template directory

  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. Login to your admin panel and change the default template setting to 32 (admin –> Configuration –> My Store –> Default Template Directory set to “32”)
  • If everything went as expected you should be able to view the store in your browser
  • 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:

 <!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 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:

 <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 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 loads the stylesheet again.

Everywhere in the template we want to point to the current templates directory we can use this same code

 <?php echo DIR_WS_TEMPLATES; ?>

5) restore the links to the images

replace all:

src="http://www.oscmax.com/forums/images/  
with:
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:

background="images
with:
 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)

<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:

<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:

<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:

<!-- 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).

<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:

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

  • Bookmark at
  • Bookmark "Converting an HTML or standard osC Template to BTS/osCMax format Tutorial" at Reddit
  • Bookmark "Converting an HTML or standard osC Template to BTS/osCMax format Tutorial" at Google
  • Bookmark "Converting an HTML or standard osC Template to BTS/osCMax format Tutorial" at Facebook
  • Bookmark "Converting an HTML or standard osC Template to BTS/osCMax format Tutorial" at Twitter
  • Bookmark "Converting an HTML or standard osC Template to BTS/osCMax format Tutorial" at Slashdot
converting_osc_template.1256908731.txt.gz · Last modified: 2009/10/30 06:18 by pgmarshall
You are here: startconverting_osc_template
Dieses Dokuwiki verwendet ein von Anymorphic Webdesign erstelltes Thema.
www.chimeric.de Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0