Building a template for osCmax appears simple enough with the BTS (Basic Template System) tools except that I struggled to get consistent browser rendition. Firefox and Chrome were similar but IE would be broken. Fix one and the other broke.

So I started to use the Blueprint CSS template to provide a consistent layout. It is excellent for cross-browser issues. It just works.

So here in brief is the start of my journey to template nirvana with oscMax v2.5rc1.

Step #0.

Preparation: osCmax 2.5rc1 installed, go to the admin and set Template Switching to True.
(admin->Configuration->Templates->Templates Setup)

Step #1.

Copy Compromise template as a base and rename it as blueprint.
[bash]
catalog/templates/blueprint/
[/bash]
back to the (admin->Configuration->Templates->Templates Setup) and set the default template to blueprint.

Step #2.

Open a browser – I generally have Chrome, FF, and IE open to confirm consistency as I work – test that blueprint template is working (although not with the Blueprint css as yet). In the URL address from the base URL index.php?tplDir=blueprint or index.php?tplDir=compromise will switch between the two templates and allow comparison.

Step #3.

In the templates/blueprint/ directory create a stylesheets directory and add the blueprint stylesheets in catalog/templates/blueprint/stylesheets/blueprint

Step #4.

Modify main_page.code.php to recognise the blueprint stylesheet catalog/templates/blueprint/

main_page.code.php lines 37 to 42

[php]
//begin{stylesheet}
?>
<link rel="stylesheet" type="text/css" href="<?php echo (bts_select(‘stylesheet’,’stylesheet.css’)); // BTSv1.5 ?>" />
<link rel="stylesheet" type="text/css" href="<?php echo (bts_select(‘stylesheet’,’print.css’)); // BTSv1.5 ?>" media="print" />
<?php
//end{stylesheet}
[/php]

add additional lines like this:

[php]
//begin{stylesheet}
?>
<link rel="stylesheet" type="text/css" href="<?php echo (bts_select(‘stylesheet’,’blueprint/screen.css’)); // BTSv1.5 ?>" />
<link rel="stylesheet" type="text/css" href="<?php echo (bts_select(‘stylesheet’,’blueprint/print.css’)); // BTSv1.5 ?>" media="print" />
<!–[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="<?php echo (bts_select(‘stylesheet’,’blueprint/ie.css’)); // BTSv1.5 ?>" />
<![endif]–>
<link rel="stylesheet" type="text/css" href="<?php echo (bts_select(‘stylesheet’,’stylesheet.css’)); // BTSv1.5 ?>" />
<link rel="stylesheet" type="text/css" href="<?php echo (bts_select(‘stylesheet’,’index.css’)); // BTSv1.5 ?>" />
<?php
//end{stylesheet}
[/php]

and this is the first gotcha. The bts_select function does not recognise the stylesheets directory that we created in Step #3.

So unless we make a change it will end up thinking that the blueprint directory is in the fallback template

Step #5.

This is the result in the source code of index.php after step 4.
[php]
<link rel="stylesheet" type="text/css" href="templates/fallback/blueprint/screen.css" />
<link rel="stylesheet" type="text/css" href="templates/fallback/blueprint/print.css" media="print" />
<!–[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="templates/fallback/blueprint/ie.css" />
<![endif]–>
<link rel="stylesheet" type="text/css" href="templates/blueprint/stylesheet.css" />
<link rel="stylesheet" type="text/css" href="templates/blueprint/stylesheets/index.css" />
[/php]

The issue being that the fallback template is being used and blueprint is not in fallback.

There are a number of ways to fix this but I want to make the process portable. Making minimal changes to core files so that upgrades in the core v2.5rc1 to rc2 etc will not break the template or require massive rework.

The best way for that to happen is to make copies of the core files into the template directory and do the mods in the copies. BTS already caters for this but it does not use the same directory structure as the core. So files do not end up in the same place and for me became a bit confusing.

catalog/includes/configure_bts.php needs to be modified and so I created a copy in catalog/templates/blueprint/includes/configure_bts.php

around line 105 the switch code for stylesheet is found
[php]
case ‘stylesheet’:
// $path = DIR_WS_TEMPLATE_FILES . $filename;
if(is_file(DIR_WS_TEMPLATES . $filename)) {
$path = DIR_WS_TEMPLATES . $filename;
} else {
$path = DIR_WS_TEMPLATES_FALLBACK . $filename;
}
break;
[/php]

change this to
[php]
// modified thowden 20110729
// added option to check in the stylesheets directory as well as the template root.
case ‘stylesheet’:
// $path = DIR_WS_TEMPLATE_FILES . $filename;
if (is_file(DIR_WS_TEMPLATES . $filename)) {
$path = DIR_WS_TEMPLATES . $filename;
} elseif (is_file(DIR_WS_TEMPLATES . ‘stylesheets/’ . $filename)) {
$path = DIR_WS_TEMPLATES . ‘stylesheets/’. $filename;
} else {
$path = DIR_WS_TEMPLATES_FALLBACK . $filename;
}
break;
[/php]

I documented this change separately here a few weeks ago.

Step #6.

Finally make a change in the core includes/application_top.php file and comment out the original require statement at around line 800. This is the only core change.

from this
[php]
require(DIR_WS_INCLUDES . ‘configure_bts.php’);
[/php]

to this
[php]
// LINE ADDED: MOD – BTS
// require(DIR_WS_INCLUDES . ‘configure_bts.php’);
// thowden modified 20110723
if (file_exists(‘templates/’.DIR_WS_TEMPLATES_DEFAULT.’/includes/configure_bts.php’)) {
require(‘templates/’.DIR_WS_TEMPLATES_DEFAULT.’/includes/configure_bts.php’);
} else {
require(DIR_WS_INCLUDES . ‘configure_bts.php’);
}
// end thowden modification
[/php]

The change basically says please check in the current template for a copy of configure_bts.php for an alternate version. This caters for using either a Blueprint template or a default template.

Check in the browser(s) to see that it works and in the source of index.php to see that the correct stylesheets are loading
[html]
<link rel="stylesheet" type="text/css" href="templates/blueprint/stylesheets/blueprint/screen.css" />
<link rel="stylesheet" type="text/css" href="templates/blueprint/stylesheets/blueprint/print.css" media="print" />
<!–[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="templates/blueprint/stylesheets/blueprint/ie.css" />
<![endif]–>
<link rel="stylesheet" type="text/css" href="templates/blueprint/stylesheet.css" />
[/html]

Step #7.

Make sure that compromise looks like blueprint and vice-versa just to prove that the process is transparent

The index.css file that I created modifies the settings for the blueprint styles to make the new Blueprint template look like Compromise. The purpose at this stage is to have them both the same (or very close).

In catalog/templates/blueprint/stylesheets I added index.css. I documented exactly what was happening in the index.css file and in another post but for this exercise just add these lines into the new index.css file
[css]

tbody tr:nth-child(even) td, tbody tr.even td {background:#ffffff;}

table, tr, th, td, caption {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.post .entry {
padding: 0px 1px 0px 0px;
}
[/css]

Now the page should be very similar and we can actually use Blueprint stylesheet to modify what was the Compromise layout and see how this makes the changing of layouts easier and cross-browser compatible.

Step #8.

Edit the catalog/templates/blueprint/main_page.html file and added in a div using class ‘span-17 last’ from Blueprint for the main content and span-5 for the left column. The ‘span-17 last’ is because it is the righmost column in this 2-column layout.

[css]
<div id="content">
<div class="span-17 last">
<div class="post">
<div class="entry">
{content}
</div>
</div>
</div>
</div>
<!– end #content –>
<div class="span-5">
<div id="sidebar">
<ul>{columnleft}</ul>
</div>
</div>
<!– end #sidebar –>
<div style="clear: both;">&nbsp;</div>
</div>
[/css]

At this point Blueprint template is installed and working with osCmax 2.5rc1. Modifying the template to make a 3-column layout or any other format is just a case of reading and learning about Bleuprint.

This simple change will not change the layout but it gives a starting point to see what will happen as the different span options are used for placement. Refer to the Blueprint information on how to use it.

Download a zip with the Blueprint template – a copy of Compromise – as described above with the Blueprint framework and test files already done.

As a part of this I copied and modified the Blueprint test files into the catalog/templates/blueprint/tests directory.

Open a browser and look at catalog/templates/blueprint/tests/index.html for the examples.