Almost done! The next piece of the puzzle is the side box control and for that I’ll delve into the column scripts, stylesheets, and side box presentation.

This is being done with the CSS template FreeCSS_Sky from http://www.templatebasics.com/freecss_sky/. From the earlier posts the last piece is to setup the presentation of side boxes for osCmax.

Starting with the default files that present columns there are two files:

[text]
/catalog/includes/column_left.php
/catalog/includes/column_right.php
[/text]

The first thing is to copy these to the templates/freecss_sky/includes directory. This allows for some changes to be made without impacting the core files.

Starting with column_left.php, although column_right.php will tend to be identical except for the query. The database is checked for boxes set by the admin for display. I’ll look at that in a minute. Then the column is matched as left and active. The script then looks for the boxes in the core files.

[php]
if ( ($column[‘cfgvalue’] == ‘yes’) && ($column[‘cfgcol’] == ‘left’)) {
if ( file_exists(DIR_WS_BOXES . $column[‘cfgtitle’] . ‘.php’) ) {
require(DIR_WS_BOXES . $column[‘cfgtitle’] . ‘.php’);
}
}
[/php]

But I want it to check the template for template based formatting etc. So I added two lines and modified the third to the following:

[php highlight=”3,4,5″]
if ( ($column[cfgvalue] == ‘yes’) && ($column[cfgcol] == ‘left’)) {
define($column[‘cfgkey’],$column[‘box_heading’]);
if ( file_exists(DIR_WS_TEMPLATES . ‘includes/boxes/’ . $column[‘cfgtitle’] . ‘.php’) ) {
require(DIR_WS_TEMPLATES . ‘includes/boxes/’ . $column[‘cfgtitle’] . ‘.php’);
} else if ( file_exists(DIR_WS_BOXES . $column[‘cfgtitle’] . ‘.php’) ) {
require(DIR_WS_BOXES . $column[‘cfgtitle’] . ‘.php’);
}
}
[/php]

This is simply going to check in the includes/boxes in the template for a box script first. Once this edit is done the box scripts that we need can be copied to the templates/freecss_sky/includes/boxes directory.

So as an example categories.php is the first box that is presented in the left column. Note that if there are no store categories then it will be empty. Create some store categories to see what is going to change.

The main issue is that the boxes are still using table controls for layout. It would be better for presentation and to broaden the control options via css to remove the tables and replace them with appropriate div controls. However, that is something that can be done later. For this design the side boxes should work as is.

To set any css styles specific to the categories box create a categoriesBox.css file in the template stylesheets directory. A request to load the categoriesBox.css stylesheet using the stylesheetloader script is done in the modified configure_bts.php script.

All things being completed a review of the pages now should reveal a working home page, contact page, and articles page with the categories box now presenting with some changes to the format or layout. Modify the categoriesBox.css to give a red border or green background just to validate that it is all working. From here we tweak the css for the categories box and copy all the other relevant boxes scripts adding the appropriate css file load as above. Just change the names to be consistent for each box.

Move along to the column_right.php file and repeat for all it’s boxes.

The FreeCSS_Sky template is almost ready for release. The last piece is to setup the home page to not use the static, supplied images, but to make the home page recognise the osCmax boxes in much the same way as the articles page was done in this post.

But that is a topic for another day…..

The fourth installment in this exercise to convert a Free CSS website template to a working osCmax v 2.5

The first step here is to setup an articles page layout which is different to the main page. In the articles I want to see links to more articles, search and info on the left and promotional boxes on the right with article content in the centre. This is a typical 3-column .css layout and suits e-commerce presentation. But the FreeCSS_Sky template is not like this so some ground work is required.

In part 3 of this exercise I created the Contact page relying on the main_page.html and main_page.code.php to create the framework and the contact_us.tpl.php for the body. The Contact Us page is a two column presentation and works as it is all about the potential client contacting the business. The side by side presentation means that page is mostly above-the-fold and easy to use as a result.

In this case the articles will include, perhaps, lengthy pieces that talk about products and services. Making this more like a newspaper columnar layout with related information to either side works.

Using the Blueprint CSS Framework makes the column layouts relatively simple.

After copying the main_page.html and main_page.code.php as article_info_page.html and article_info_page.code.php respectively, open the article_info_page.html and edit the content section.

[xml]
<!– content begins –>
<div id="content">{content}</div>
<!– content ends –>
[/xml]

In the main_page.html layout we are presenting a single column section layout. So there is only one div section for content.

To make this a multi column layout we need to add new div’s:

[xml]
<!– content begins –>
<div class="span-4">
<div id="leftcolumn">
{columnleft}
</div>
</div>
<div class="span-12">
<div id="maincontent">
{content}
</div>
</div>
<div class="span-6 last">
<div id="rightcolumn">
{columnright}
</div>
</div>
<!– content ends –>
[/xml]

The column names are obvious from the div id’s. The div that wraps around each column is the Blueprint CSS framework that helps us by controlling the left to right presentation and ensuring consistency between the differing browser interpretations of the box model.

Setting the columns is pretty easy. A class=”span-x” refers to the number of Blueprint column widths to use for each column. The right most column also gets a class of ‘last’ to correctly set the right hand offsets. Adding the total of the ‘x’ value for the columns to a maximum of 24 provides a 950 pixel wide presentation layer. In my combination 3 columns varying at 4, 14 and 6 Blueprint column widths in 40 pixel increments. (24 x 40 pixel – 10 pixels = 950) Noting that in Blueprint column 1 is only 30 pixels to give a total of 950.

To vary the column widths simply modify the x value of the div class span-x for each of the 3 columns to achieve the same total x = 24 value. Having said that the FreeCSS_Sky template is only working with a max of Blueprint column value = 22. Not sure why but I’ll deal with that when I do some wireframe examples, but I expect there is a css style limiting width to less than 950 pixels somewhere within the FreeCSS_Sky template.

Now all of the above is fine except that if you are using a new database for osCmax you need to create some articles to work with. Do this in the admin console under Articles. Add an author first and then at least one topic and an article for each. Fill the text with anything you like just to sort the presentation out. The editing of appropriate content can come later. Add 3 articles.

Next test the pages. If you are following my setup then the original page layout and menu structure points the 3 top menu items of Blog, Gallery, and About to articles 1, 2, & 3.

The layout should be working with a left and right outer narrow column and the article text in the middle. The outer columns assume the default box settings from the admin console and will be a dog’s breakfast of styles. But the layout works and that was the goal.

At this stage the template FreeCSS_Sky is working and presents a unique home page layout, provides for pages like the Contact Us page to be presented using the main_page controls, and the Articles section presents a neat 3 column layout. All in a consistent framework that presents in Internet Explorer v9 and Firefox and Chrome browsers. In theory it should also work with earlier IE versions but I dont have them to test with.

The last piece of the puzzle is the side box control and for that I’ll delve into the stylesheets, box presentation and the admin console that is needed to manage the presentation.

This is, as the title suggests, Part 3 of a process to convert a free CSS template to an osCmax store template.

So far I have stepped through the process of selecting a free CSS stylesheet & web site design in the form of FreeCSS_Sky from http://www.templatebasics.com/freecss_sky/, adding it to a new template directory in an osCmax v2.5 (using current svn version), connecting some of the osCmax components, and cleaning up to make the template act as a default or home page.

The rest of the osCmax site will need a standard style that is consistent with the home page but making more room for the product information and checkout pages etc. I’ll do this with the Contact Us page in this post.

The main page of the CSS was all laid out and has not needed anything extra. The secondary page however does not exist with the template.

I started by copying the main_index_page.html and the main_index_page.code.php and re-naming them as main_page.html and main_page.code.php. These are the default names used in the main_page.tpl.php script.

The main change now is to edit the main_page.html and remove most of the content div’s that setup the main banner section and the lower boxes used on the home page.

[xml]
<div class="top">
<div class="scrollable">
<div class="items">
<div class="item">
{banner_item1}
</div> <!– item –>
<div class="item">
{banner_item2}
</div> <!– item –>
<div class="item">
{banner_item3}
</div> <!– item –>
</div> <!– items –>
</div> <!– scrollable –>
<div class="navi"></div> <!– create automatically the point dor the navigation depending on the numbers of items –>
<div class="clear-both"></div>
</div>
[/xml]

All the above was removed. While in the section labelled as content

[xml]
<div id="content">
<h3>Praesent ipsum neque, volutpat vel tincidunt quis, auctor vitae leo.</h3>
<div style="height:25px"></div>
<div class="all_box">
<div class="box" >
{box_1}
</div>
<div class="box_r" ></div>
<div class="box" >
{box_2}
</div>
<div class="box_r" ></div>
<div class="box" >
{box_3}
</div>
<div class="box_r" ></div>
<div class="box" >
{box_4}
</div>
<div class="clear-both"></div>
</div>
<div style="height:20px"></div>
<div class="ban_top">
<div class="ban_bot">
<h1>“Maecenas dui nunc, ultricies a hendrerit at, hendrerit quis felis. Proin interdum imperdiet tortor, ut venenatis nulla iaculis ut. Sed felis eros, adipiscing ac.”</h1>
</div>
</div>
<div class="circl_all">
<div style="height:10px"></div>
<div style="height:10px"></div>
</div>
</div>
<!– content ends –>
[/xml]

Remove eveything within the content div and replace with a the single {content} code element.

[xml]
<!– content begins –>
<div id="content">
{content}
</div>
<!– content ends –>
[/xml]

Next is to test that the contact_us page links from the home page work and they should present the contact information but just in the middle with a plain white background.

I want to use the Blueprint css framework for preparing the layout of this page and any other page layout.

In the main_page.code.php file I need to include the appropriate stylesheets. In the {stylesheets} section there is only one stylesheet loaded so far.

[php]
//begin{stylesheet}
require_once(DIR_WS_TEMPLATES.’includes/loadstylesheets.php’);
$stylesheetArray = getAllStylesheets();
$loadStylesheetArray = array();
$loadStylesheetArray = includeStylesheet(‘styles.css’);
$loadStylesheetString = implode(":#:",$loadStylesheetArray);
$loadStylesheetArray = array(); // ready for re-use
?>
[/php]

I add all the Blueprint stylesheets like this:

[php]
//begin{stylesheet}
require_once(DIR_WS_TEMPLATES.’includes/loadstylesheets.php’);
$stylesheetArray = getAllStylesheets();
$loadStylesheetArray = array();
$loadStylesheetArray = includeStylesheet(‘screen.css’);
$loadStylesheetArray = includeStylesheet(‘print.css’);
$loadStylesheetArray = includeStylesheet(‘main_page.css’);
$loadStylesheetArray = includeStylesheet(basename($PHP_SELF,’.php’). ‘.css’);
$loadStylesheetArray = includeStylesheet(‘styles.css’);
$loadStylesheetString = implode(":#:",$loadStylesheetArray);
$loadStylesheetArray = array(); // ready for re-use
?>
[/php]

The first two, screen.css and print.css, are Blueprint styles. The main_page.css is in case we specify any settings in addition or that modify the Blueprint styles. The $PHP_SELF allows for including a page specific style, which would be contact_us.css in this example, if I need it.

In the template content folder I edited contact_us.tpl.php to remove the table oriented layout and convert it to use div’s.

In the main_page.html I had to add back a clear setting to fix the bottom section.

[xml highlight=”6″]
<!– content begins –>
<div id="content">
{content}
</div>
<!– content ends –>
<div class="clear-both"></div>
[/xml]

Insert the clearing div after the end of the content section and before the start of the bottom section. It works without this in IE9 but not Chrome or FF. In Chrome without the clear the bottom section commences up the page and overlays the content.

The last bit of code that needs to be modified in the main_page.html file is to set the correct footer structure. This includes some of the background tools that osCmax uses.

The bottom of the standard osCmax html page looks something like this.
[xml]
<div id="footer">
<p>{footer}</p>
</div>
<!– end #footer –>
{googleanalytics}
{javascript}
{slideshow}
</body>
</html>
{utf8support}
[/xml]

For the FreeCSS_Sky template we need to move the footer content from the html file into the language file and format the html file to set it up appropriately. The one change that we have to do to a core file is in the /catalog/includes/languages/english/core.php (select the appropriate language if not using english).

Merging the FreeCSS_Sky footer and the osCmax footer would create a lengthy FOOTER_TEXT_BODY so I opted to do a bit of both html and variable definition. So the language file was modified to include all the copyright information tweaked to fit with the design like this:

[php]
define(‘FOOTER_TEXT_BODY’, ‘All content and Images Copyright &copy; ‘ . date(‘Y’) . ‘ <a href="’ . tep_href_link(FILENAME_DEFAULT) . ‘">’ . STORE_NAME . ‘</a><br />Copyright &copy; 2000 – ‘ . date("Y") . ‘<a href="http://oscmax.com"> osCmax</a> Design by <a href="http://www.metamorphozis.com/free_templates/free_templates.php" title="Free Web Templates">Free Web Templates</a><br /><a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a> | <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a></p>’);
[/php]

and the .html page was adjusted to call the {footer} and other osCmax elements like this:

[xml]
<!– footer begins –>
<div id="footer">
<div style=" width: 900px; margin: 0px auto;">
<div id="footer_l">
{footer}
</div>
<div id="buttons_f">
<a href={menu_home} class="but_f but_t" title="">Home</a><div class="razd_but_f"></div>
<a href={menu_blog} class="but_f" title="">Blog</a><div class="razd_but_f"></div>
<a href={menu_gallery} class="but_f" title="">Gallery</a><div class="razd_but_f"></div>
<a href={menu_about} class="but_f" title="">About us</a><div class="razd_but_f"></div>
<a href={menu_contact} class="but_f" title="">Contact us</a>
</div>
<div class="clear-both"></div>
</div>
</div><!– footer ends –>
</div><!– bottom end –>
{googleanalytics}
{javascript}
{slideshow}
</body>
</html>
{utf8support}
[/xml]

I had not done this on the main_index_page.html so I went back and made the same changes to be consistent.

The only other change was to add the text to the language file for the Captcha process ‘SECURITY_EXPLAIN’.

I thought this was in the standard files but maybe not, I need to research this a bit more, it might be something I added to an earlier setup. The file is in the main directory not the template:

/catalog/includes/languages/english/contact_us.php

Added a new definition for SECURITY_EXPLAIN

[php]
define(‘SECURITY_EXPLAIN’, ‘The security check is to help us reduce scripts processing junk email. The Captcha process is designed to prove that you are human.’);
[/php]

And that completes the main_page for general use, the Contact page, and this post.