Dieses Dokuwiki verwendet ein von Anymorphic Webdesign erstelltes Thema.

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
converting_osc_template [2010/10/20 09:32]
89.28.14.35 iDSsGkikFrgWLC
converting_osc_template [2010/10/20 12:37] (current)
michael_s old revision restored
Line 1: Line 1:
-tkSWNb ​ <a href="​http://​khfngmtivmjh.com/">​khfngmtivmjh</​a>, ​[url=http://avlljgakrcgb.com/]avlljgakrcgb[/url][link=http://yhwbrnkdzlzo.com/]yhwbrnkdzlzo[/link], http://jieebhjdioke.com/+====== 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 Paul Mathot a key contributor to the BTS system which should help you out. 
 + 
 +  * Be warned this is a long process and unless you desperately want to keep the exact same template I would strongly recommend you start with the aabox template and redesign to fit your needs. ​ **These instructions are old and may not work - I really would recommend that you start with a osCMax template rather than converting** - //​pgmarshall//​ 
 + 
 +  * However, if you still want to convert, please read on ... 
 + 
 +===== Step 1: Create the new template directory ===== 
 + 
 +  - 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.  
 +  - 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)  
 +  - Login to your admin panel and change the default template setting to 32 (admin --> [[Configuration]] --> [[my_store|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 easily switch between them.  
 +===== Step 2: Off with his <head> ===== 
 + 
 +  * The next logical step I think is to replace the "​original the page head" by "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:  
 +<file html> 
 + <​!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>​  
 +</​file>​  
 +by a typical "BTS page head" (between quotes because it is more than the actual <​head>​)  
 + 
 +<file php> 
 +<?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>​ 
 +</​file>​ 
 + 
 +I think it's no use to explain every line of this now, but there is at least one line that's really interesting:​ 
 +<file php> 
 + <​link rel="​stylesheet"​ type="​text/​css"​ href="<?​php echo DIR_WS_TEMPLATES;​ ?>​style.css"​ media="​all">​ 
 +</​file>​ 
 +The actual change to this line is we added: 
 +<file php> 
 +<?php echo DIR_WS_TEMPLATES;​ ?> 
 +</​file>​ 
 +<note tip>​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.</​note>​  
 + 
 +  * 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 
 +<file php> 
 + <?​php echo DIR_WS_TEMPLATES;​ ?> 
 +</​file>​ 
 +===== Step 3: Restore the links to the images =====  
 + 
 +replace all: 
 +<file php> 
 +src="​http://​www.oscmax.com/forums/​images/ ​  
 +</​file>​ 
 +with: 
 +<file php> 
 +src="<?php echo DIR_WS_TEMPLATES;​ ?>http://​www.oscmax.com/​forums/​images/​ 
 +</file> 
 +and the background images (although I think these really belong in the stylesheet, but this is the fastest way to get them back for now)  
 + 
 +replace all: 
 +<file php> 
 +background="​images 
 +</​file> ​  
 +with: 
 +<file php> 
 + ​background="<?​php echo DIR_WS_TEMPLATES;​ ?>​images 
 +</​file>​ 
 + 
 +===== Step 4: Replace the Static Content with osCMax Content ===== 
 +  
 +  * I think it is best to split this into some separate steps.  
 +==== Step 4a: Moving the '​Content'​ ==== 
 + 
 +  - Create ​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 <h1tags 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.  
 +  - 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) 
 + 
 +<file php> 
 +<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>  
 +</​file>​ 
 + 
 +<note important>​**I have trimmed this code to make these instructions readable** ​ You must include all the code between what is shown above this note and the code shown below.</​note>​ 
 + 
 +<file php> 
 +<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 ametconsectetuer</​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>​ 
 +</​file>​ 
 + 
 +and replace by: 
 + 
 +<file php> 
 +<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>​ 
 +</​file>​ 
 + 
 +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. 
 + 
 +==== 4b: Moving the search box ====  
 + 
 +at approx. line 126 to 145 find: 
 + 
 +<file php> 
 +<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>​ 
 +</​file>​ 
 + 
 +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: 
 +<file php> 
 +<!-- search box -->  
 +<?php  
 +  require(DIR_WS_BOXES . '​search.php'​);​  
 +?>  
 +<!-- /search box --> 
 +</​file>​ 
 +==== Step 4c: Moving the Categories Box ==== 
 + 
 +The "​old"​ catagories box the code is just above, approx line 82-124 (only separated by one <br> from the search box).  
 + 
 +<file php> 
 +<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>​ 
 +</​file>​ 
 + 
 +again we use the code from the osC "​column_left.php"​ to replace it: 
 + 
 +<file php> 
 +<!-- categories box -->  
 +<?php  
 +  if ((USE_CACHE == '​true'​) && empty($SID)) {  
 +    echo tep_cache_categories_box();​  
 +  } else {  
 +    include(DIR_WS_BOXES . '​categories.php'​);​  
 +  }  
 +?>  
 +<!-- /categories box --> 
 +</​file>​ 
 + 
 +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.  
 + 
 +<file php> 
 +<?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>​ 
 +</​file>​ 
 + 
 +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:  
 + 
 +<file php> 
 +<?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>​ 
 +</​file>​ 
 + 
 +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 tip>In the BTS 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).</​note>​ 
 +==== Step 4d: Moving the Shopping Cart Box ==== 
 + 
 +The shopping cart is a simple table too.  
 +Find (approx line 64-69):  
 +<file php> 
 +<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>​ 
 +</​file>​ 
 +and replace it by: 
 +<file php> 
 +<!-- shoppingcart box -->  
 +<?php  
 +  require(DIR_WS_BOXES . '​shopping_cart.php'​);​  
 +?>  
 +<!-- /shopping cart box --> 
 +</​file>​ 
 + 
 +(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: 
 +<file php> 
 +<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>​ 
 +</​file>​ 
 + 
 +We could transfer a part of this code to the style sheet, 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 BTS automatically will use this as template for the shopping cart.  
 +==== Step 4e: Moving the login box ==== 
 + 
 +And the login code (approx. lines 56-62 "​main_page.tpl.php"​) : 
 +<file php> 
 +<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>​ 
 +</​file>​ 
 + 
 +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: 
 + 
 +<file php> 
 +<!-- 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 --> 
 +</​file>​ 
 +===== Step 5: Updating the links in main_page.tpl.php =====  
 + 
 +replace all: 
 +<file php> 
 +<a href=""> ​  
 +</​file>​ 
 +by:  
 +<file php> 
 +<a href="<?​PHP echo tep_href_link ('​filename.php'​);​ ?>">​ 
 +</​file>​ 
 + 
 +  * Obviously, instead of **filename.php** fill in the page filename you want to link to.  
 +(the tep_href_link calls an osC function which adds a session id to the urlso your cart remembers things like the customer'​s cart contents) 
 +  
 +  * Also the top menu will be missing all links, so you can add those using the same code as above. 
 + 
 +====== Adding New Pages ====== 
 + 
 +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:  
 + 
 +<file php> 
 +<?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_TITLE,​ tep_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'​);​  
 +?> 
 +</​file>​ 
 + 
 +Save as the filename you want (i.e. "​faq.php"​) to the root of your cart.  
 + 
 +and a basic texts defines page 
 + 
 +<file php> 
 +<?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.'​);​  
 +?> 
 +</​file>​ 
 + 
 +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: 
 + 
 +<file php> 
 +<?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>​ 
 +</​file>​ 
 + 
 +Adding styles to the stylesheet, restoring the looks. 
 + 
 +<file php> 
 +/* styles added for osC+BTS */  
 +/* general */  
 +a:hover {  
 +color: #da0008 !important;  
 +}  
 +/* end general */ 
 +</​file>​ 
 + 
 +I didn't like the grey hovers, the "​!important"​ tells the browser this style should override any style settings which are not "​!important"​  
 + 
 +<file php> 
 +/* styles (mainly) for the middle content */  
 +h1 {  
 +font-size: 20px;  
 +color: #da0008;  
 +}  
 +.greetuser {  
 +font-weight:​ bold;  
 +color: #39ae39;  
 +}  
 +.inputRequirement {  
 +color: #f75d00;  
 +}  
 +table td {  
 +padding: 0;  
 +}  
 +/* hide the ugly corner images */  
 +#contentBox table td.infoBoxHeading img {  
 +display: none;  
 +}  
 +td#​contentCell {  
 +text-align: center;  
 +}  
 +div#​contentBox {  
 +width: 550;  
 +margin: 8px auto;  
 +text-align: left;  
 +}  
 +table,td {  
 +font-size : 11px;  
 +font-family : Tahoma,​Verdana,​Arial;​  
 +}  
 +/* end styles (mainly) for the middle content */   
 +</​file>​ 
 + 
 +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).  
 + 
 +<file php> 
 +/* shopping cart box styles */  
 +#​shopping_cartBox td.boxContent table, #​shopping_cartBox td.boxContent img {  
 +display: none;  
 +}  
 +#​shopping_cartBox div, #​shopping_cartBox td {  
 +color: white;  
 +font-weight:​ bold;  
 +}  
 +/* end shopping cart box styles */   
 +</​file>​ 
 + 
 +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. 
 + 
 +<file php> 
 +/* small infobox styles */  
 +td.b01 {  
 +padding: 4px 0 5px 20px;  
 +}  
 +td.b01 form {  
 +display: inline;  
 +}  
 +table.infoBox32 {  
 +width: 165;  
 +background: #fff url(images/​fon_left02.gif);​  
 +}  
 +.infoBox32Bottom {  
 +background: #fff url(images/​left_bot02.gif);​  
 +height: 18px;  
 +}  
 +.infoBox32Top {  
 +background: #f75d00 url(images/​left02.gif);​  
 +height: 26px;  
 +}  
 +/* green background */  
 +#​categoriesBox td.infoBox32Top {  
 +background: #4ac752 url(images/​left01.gif);​  
 +}  
 +/* end small infobox styles */  
 +/* end styles added for osC+BTS */  
 +</​file>​ 
 + 
 +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  ):  
 + 
 +<file php> 
 +/* styles added for osC+BTS */  
 +/* general styles */  
 +a:hover {  
 +color: #da0008 !important;  
 +}  
 +/* end general styles*/  
 +/* styles (mainly) for the middle content */  
 +h1 {  
 +font-size: 20px;  
 +color: #da0008;  
 +}  
 +.greetuser {  
 +font-weight:​ bold;  
 +color: #39ae39;  
 +}  
 +.inputRequirement {  
 +color: #f75d00;  
 +}  
 +table td {  
 +padding: 0;  
 +}  
 +/* hide the ugly corner images */  
 +#contentBox table td.infoBoxHeading img {  
 +display: none;  
 +}  
 +td#​contentCell {  
 +text-align: center;  
 +}  
 +div#​contentBox {  
 +width: 550;  
 +margin: 8px auto;  
 +text-align: left;  
 +}  
 +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 {  
 +display: none;  
 +}  
 +#​shopping_cartBox div, #​shopping_cartBox td {  
 +color: white;  
 +font-weight:​ bold;  
 +}  
 +/* end shopping cart box styles */  
 +/* small infobox styles */  
 +td.b01 {  
 +padding: 4px 0 5px 20px;  
 +}  
 +td.b01 form {  
 +display: inline;  
 +}  
 +table.infoBox32 {  
 +width: 165;  
 +background: #fff url(images/​fon_left02.gif);​  
 +}  
 +.infoBox32Bottom {  
 +background: #fff url(images/​left_bot02.gif);​  
 +height: 18px;  
 +}  
 +.infoBox32Top {  
 +background: #f75d00 url(images/​left02.gif);​  
 +height: 26px;  
 +}  
 +/* green background */  
 +#​categoriesBox td.infoBox32Top {  
 +background: #4ac752 url(images/​left01.gif);​  
 +}  
 +/* end small infobox styles */  
 +/* end styles added for osC+BTS */  
 +</​file>​ 
 + 
 +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.
converting_osc_template.txt · Last modified: 2010/10/20 12:37 by michael_s
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