Following up on my adventure with Blueprint and Compromise template in osCmax I am now documenting from scratch the steps to convert another Free CSS template.

First I’ve got a fresh install of osCmax. This time I am using the svn latest version of 2.5.x but the following should apply to any 2.5 variant.

I downloaded freecss_sky from http://www.templatebasics.com/freecss_sky/ and unzipped it into a new directory under templates.

[text]
catalog/templates/freecss_sky
[/text]

Next I checked the permissions and made sure the template could be used by the web server.

Somewhere in all of this we should be testing the original source of the css template. In this case freecss_sky is the one I am using. Place a copy of it into your catalog root and open up the index.html file in a browser and compare in other browsers. In this case Chrome and Firefox work fine but IE9 is broken with the content heading overlaying the control dots. When something is broken like this it is better to spot it early before making a host of changes and then trying to debug your own work when the issue existed before you started. If it works in all browsers then you can start, if it’s not then make a choice to debug now, debug later, or scrap this theme and select another.

Then in the store admin section I set the default template to freecss_sky.

Admin->Configuration->Templates->Template Setup and edit the Default Template Directory.

Now it’s time to copy in the files that we need for osCmax.

I am using the files that allow me to have a different home or index page style to the rest of the site and copied into the freecss_sky template directory the following:

[text]
main_index_page.code.php
main_index_page.html but rename this as main_index_page.html.old
main_page.code.php
main_page.html
main_page.tpl.php
[/text]

Next I grabbed the directories including the Blueprint framework.

[text]
/boxes/
/includes/
/stylesheets/
[/text]

The jquery stuff that came with the free css template should be relocated from the lib directory to the includes/javascript directory to be consistent with the osCmax standards. I moved them and deleted the lib directory.

Then I moved the styles.css file into the stylesheets directory, again just for consistency.

I then renamed the freecss_sky/index.html as main_index_page.html and started editing:

First copy the two javascript lines from the header section

[xml]
<script type="text/javascript" src="lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="lib/jquery.tools.js"></script>
[/xml]

and paste them into the main_index_page.code.php within the {javascript} section that looks like this:

[xml]
//begin{javascript}
if (bts_select(‘javascript’, $PHP_SELF)) { // if a specific javscript file exists for this page it will be loaded
require(bts_select(‘javascript’, $PHP_SELF));
} else {
if (isset($javascript) && file_exists(DIR_WS_JAVASCRIPT . basename($javascript))) { require(DIR_WS_JAVASCRIPT . basename($javascript)); }
}
//end{javascript}
[/xml]

So that it looks like this:

[xml]
//begin{javascript}
if (bts_select(‘javascript’, $PHP_SELF)) { // if a specific javscript file exists for this page it will be loaded
require(bts_select(‘javascript’, $PHP_SELF));
} else {
if (isset($javascript) && file_exists(DIR_WS_JAVASCRIPT . basename($javascript))) { require(DIR_WS_JAVASCRIPT . basename($javascript)); }
}
<script type="text/javascript" src="lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="lib/jquery.tools.js"></script>
//end{javascript}
[/xml]

Now this is not going to work because the section is php code and we just pasted html into it. The other issue is that the javascript directory location is incorrect. So I modified the lines to be all php with the correct directory variables inserted to look like this:

[xml]
//begin{javascript}
if (bts_select(‘javascript’, $PHP_SELF)) { // if a specific javscript file exists for this page it will be loaded
require(bts_select(‘javascript’, $PHP_SELF));
} else {
if (isset($javascript) && file_exists(DIR_WS_JAVASCRIPT . basename($javascript))) { require(DIR_WS_JAVASCRIPT . basename($javascript)); }
}
echo ‘<script type="text/javascript" src="’.DIR_WS_TEMPLATES_JAVASCRIPT.’jquery-1.3.2.min.js"></script>’;
echo ‘<script type="text/javascript" src="’.DIR_WS_TEMPLATES_JAVASCRIPT.’jquery.tools.js"></script>’;
//end{javascript}
[/xml]

Next in the {stylesheets} section I added one new line for the freecss_sky/styles.css file which is now in the stylesheets directory

[php highlight=”8″]
//begin{stylesheet}
require_once(DIR_WS_TEMPLATES.’includes/loadstylesheets.php’);
$stylesheetArray = getAllStylesheets();
$loadStylesheetArray = array();
$loadStylesheetArray = includeStylesheet(‘screen.css’);
$loadStylesheetArray = includeStylesheet(‘print.css’);
$loadStylesheetArray = includeStylesheet(‘store.css’);
$loadStylesheetArray = includeStylesheet(‘styles.css’);
$loadStylesheetArray = includeStylesheet(‘main_index_page.css’);
$loadStylesheetString = implode(":#:",$loadStylesheetArray);
$loadStylesheetArray = array(); // ready for re-use
[/php]

That fixes all the bits that have to come across from the freecss_sky template in the header.

Next replace the header section with the osCmax code

[xml]
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>MyFreeCssTemplates.com free CSS template</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="lib/jquery.tools.js"></script>
</head>
[/xml]

becomes

[xml]
<head>
{headertags}
{stylesheet}
{javascript}
{mopics}
{slimbox}
</head>
[/xml]

Next open up the styles.css file that was moved to the stylesheets directory. Because it was moved all the image files will no longer be in the relative images directory but one level higher. Replace all occurrences of

[text]
images/
[/text]

with

[text]
../images/
[/text]

There should be 19 of them with this specific template.

At this stage checking the website from a browser should present something that resembles the original style. There will still be broken images as the ones in the html page have not had the path corrected as yet. But in general the template is working.

Next I need to introduce the Blueprint framework into the styles for the layout and then start building the alternate page formats. But that’s another post or two.