Converting a Free CSS Stylesheet for osCmax store Part 5

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

Leave a Reply

Your email address will not be published. Required fields are marked *