Category Archives: osCommerce / oscMax

osCommerce and its derivatives. I am working mostly with osCMax these days.

Converting a Free CSS Stylesheet for osCmax store Part 1

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.

catalog/templates/freecss_sky

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:

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

Next I grabbed the directories including the Blueprint framework.

/boxes/
/includes/
/stylesheets/

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

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

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

//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}

So that it looks like this:

//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}

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:

//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}

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

//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

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

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

becomes

<head>
	{headertags}
	{stylesheet}
	{javascript}
	{mopics}
	{slimbox}
</head>

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

images/

with

../images/

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.

Stylesheet Automation in osCmax

So my question was how to automate the stylesheet loading and in particular how to load a stylesheet that is not known about until after the header section of the page has already been written. This post could also be called ‘How to load stylesheets in the body of a page via PHP and Javascript’.

To test this copy the compromise template directory as compromise-sl or similar. In an earlier post I described some changes to copy and modify configure_bts.php to address the handling of core file modification. I am working from that base in this.

Most of the code is contained in two files loadstylesheets.php and its partner loadstylesheets.js. The link to a download is at the bottom of this post. Read through first and then try it.

Copy the includes directory from the zip to your template directory so that the files appear under an includes and includes/javascript directories respectively. This copies the core structure. Included is a modified configure_bts.php to simplify things.

In the template directory you should have a main_page.code.php file and it will have something like this at the top in the {stylesheet} section.

//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}

The example above is from the Compromise template in osCmax.

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

<script type="text/javascript">
var stylesheetArray =  "<? print $loadStylesheetString; ?>";
</script>
<script type="text/javascript" src="<?php echo DIR_WS_TEMPLATES_JAVASCRIPT . 'loadstylesheets.js';?>"></script>

<?php
//end{stylesheet}

It starts by including the php file and then building the array that finds all the stylesheets that exist in the template directory structure. This is so that you don’t need to declare a path just the unique stylesheet file name. Obviously this implies that you only have unique filenames. store.css in the root and store.css in a sub-directory will clash and one will be ignored.

Next using the includeStylesheet() function to add the required stylesheets that are going to be used for the page. This is still within the header stylesheet section so that these styles are displayed as the page is being rendered in the browser.

Finally the php code is done and the control swaps to the javascript. It is run when the page loads and it adds all the requested stylesheets from the array into the page.

So what next?

The bonus here is that this can be used again at the end of the body of the page to apply any stylesheets that were not ‘known’ about until later in the page.

Somewhere near the bottom of the main_page.code.php file will be the footer entry.

//end{footer}
     
//begin{banner}

Updated: In the {footer} section place the additional StyleSheetLoader code. This was updated for a fix to the footer section post the release of v2.5 of osCmax.

//begin{footer}
// BOF Added: Down for Maintenance Hide footer.php if not to show
if (DOWN_FOR_MAINTENANCE == 'false' or DOWN_FOR_MAINTENANCE_FOOTER_OFF =='false') {
	echo '<!-- footer //-->';
	echo FOOTER_TEXT_BODY;
	echo '<!-- footer_eof //-->';
	// box and other stylesheets loaded after the header info need to be included
	$loadStylesheetString = implode(":#:",$loadStylesheetArray);
	$loadStylesheetArray = array();
	?>
	<script type="text/javascript">
	var stylesheetArray =  "<? print $loadStylesheetString; ?>";
	</script>
	<script type="text/javascript" src="<?php echo DIR_WS_TEMPLATES_JAVASCRIPT . 'loadstylesheets.js';?>"></script>
	<?php
}
//end{footer}

This code will run just the same as the one in the header and will include the any other stylesheets that have been loaded.

The final piece of the puzzle is to add the following into the box scripts or any other file that is loading as a part of your page or template. In this case I added it into the column_left.php file which is a core file in /includes but only after I copied it to the /templates/compromise-sl/includes/ directory to retain the core files for normal templates.

In column_left.php

      if ( file_exists(DIR_WS_BOXES . $column['cfgtitle'] . '.php') ) {
		require(DIR_WS_BOXES . $column['cfgtitle'] . '.php');
       } 

Change to:

      if ( file_exists(DIR_WS_BOXES . $column['cfgtitle'] . '.php') ) {
		$loadStylesheetArray = includeStylesheet($column['cfgtitle'] . '.css'); 
		require(DIR_WS_BOXES . $column['cfgtitle'] . '.php');
       } 

This means that if a box has a specific stylesheet it will be included in the load that is done at the end of the main_page.code.php execution.

Download the StylesheetLoader zip file and install into a template in osCmax or download the Blueprint template with the StylesheetLoader embedded as examples.

Having two stylesheets with the same name will load both files possibly creating a mess in the layout.

When it came to using this with the Blueprint framework there was a clash of file names with blueprint/print.css clashing with the default print.css and screen.css appearing in the plug-in directories. I have renamed the blueprint framework files to prevent the clash of file names.

blueprint/print.css -> blueprint/bp-print.css
blueprint/plugins/fancy-type/screen.css -> blueprint/plugins/fancy-type/fancy-type.css
etc.

Modifying the Blueprint css in osCmax

This relates specifically to my install of Blueprint as a template in osCmax. However it is generally about the Blueprint framework so I treated it as a separate post. The text is included inside the index.css file as shown here. I do not modify any of the Blueprint files themselves. This way I know that any issue that stops the site from working is in my files.

This is the contents of my index.css stylesheet:

The index.css provides over-rides to the blueprint/screen.css. The example being that the default table presentation in blueprint is to alternate lines of the table with a white (odd lines) or
light blue (even lines) background this is the default entry in blueprint/screen.css

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

Instead of changing that file directly it is preferable to leave it intact and vary it with over-rides within a localised stylesheet for the specific page that is being rendered.

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

This setting simply makes the even lines white as well as the odd lines the standard osCmax files that still use tables instead of div’s for layout will present as white.

An alternate solution but more work is to remove all the table formatting from osCmax….. :-)

Similarly the following overrides the setting in the default Compromise stylesheet.css just for alignment.

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

.post .entry {
	padding: 0px 1px 0px 0px;
}

The 1px right adjustment is specific to imitating the Compromise template and allowing for the 1px right border.

Blueprint CSS framework as an osCmax template

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.

  catalog/templates/blueprint/

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

//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}

add additional lines like this:

//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}

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.

<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" />

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

    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;

change this to

    // 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;

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

	require(DIR_WS_INCLUDES . 'configure_bts.php');

to this

// 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

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

<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" />

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


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;
}

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.

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

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.

oscMax changes for CSS support

A change log for oscMax 2.5 templates.

/includes/configure_bts.php

around line 105

// 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;

Doing this means that we can move all stylesheets into the
/templates/your_template_name/stylesheets directory including the default stylesheet.css file

Which helps, well, me I guess.

Adding a CSS standard to oscMax

I’ve been reading and trying a lot of options in my effort to have my web sites and specifically oscMax stores present nicely in all browsers.

Enter the concepts of css frameworks and having read multiple posts including this article from the respected A List Apart I am sure that this will aid me in getting the desired end result.

With that all in mind I’ve read the following articles and found them helpful:

That’s a start on the how and why. For the moment I am going to run with Blueprint and see what that brings to the party.

oscMax templates IE9 vs Firefox vs Chrome

Ok, so I’ve worked through a heap of design and css and code and stuff in the past few weeks while I tried to make sense of the BTS process in oscMax.

I had a test site layout done and was working through some minor details using Chrome as my preferred browser when it occurred to me that I had not looked at it with Firefox or Internet Explorer.

Results? Yep, Firefox was identical to Chrome and Internet Explorer broke it completely.

So since IE version whatever it was 10 years ago to the latest version 9 we still cannot just design a page or a site template. We must do crazy extra work to address the very special Microsoft interpretation of web standards in HTML and CSS.

Just to make sure it was not just me, I have run up an oscMax site with the Compromise template that it was claimed took an oscMax guru just 15 minutes to convert from an open source CSS theme into oscMax. That 15 minutes would be great except that in Internet Explorer 9 the design does not work.

Whats this blog entry really about? Just noting the fact that regardless of any special template system in oscMax or of how ‘easy’ creating a template may be, there is still the issue of many hours being consumed in design to cater for the variety of web browsers that potential oscMax store visitors will use.

Creating templates for oscMax is just as complex as for any other site.

Update: I figured that this link may come in handy for IE version comparison from MSDN

osCmax an option for having different main_page templates

I described the process I went through to have a different osCmax home page template from the rest of the site in another post.

When I finished I realised that the method had a few issues and in particular it meant that the changes impacted the whole site not just that template.

So my goal here is to provide an alternative method that moves some of the changes into the template to minimise the impact on the core files and to make the template switching option work even with these changes.

The change I want to make is to move the decision process around the use of more than one main_page.tpl.php type file.

Start in main_page.tpl.php lines 11 to 15:

require(DIR_WS_INCLUDES . ‘meta_tags.php’);
//require(DIR_WS_INCLUDES . ‘counter.php’);

$bts_php_array = bts_read_php();
$bts_html_array = bts_read_html($bts_php_array);

Change lines 14 & 15:

require(DIR_WS_INCLUDES . ‘meta_tags.php’);
//require(DIR_WS_INCLUDES . ‘counter.php’);

$bts_php_array = bts_read_php($php_template);
$bts_html_array = bts_read_html($bts_php_array, $html_template);

Add in this section before line 14 so it looks like this:

// if there is an alternate file and if this is called from index.php
if ((file_exists(‘main_index_page.code.php’)) ||
(substr($_SERVER['PHP_SELF'], -9) == ‘index.php’)) {
$php_template = ‘main_index_page.code.php’;
$html_template = ‘main_index_page.html’;
} else {
$php_template = ‘main_page.code.php’;
$html_template = ‘main_page.html’;
}

Then move down to what should now be line 41

function bts_read_php($php_template = ‘main_page.code.php’) {

Change this to

function bts_read_php($php_template) {

Next change the other function at line 60

function bts_read_html($php_code_array, $html_template = ‘main_page.html’) {

Change this to

function bts_read_html($php_code_array, $html_template) {

Close that file.

Ok, so if we had done the earlier method then we need to undo the change to /index.php

Go back to the index.php file and change around line 335 is

include (bts_select(‘main_index’)); // BTSv1.5

Change this back to

include (bts_select(‘main’)); // BTSv1.5

Close index.php as this is finished with.

Finally, create the main_index_page.code.php and main_index_page.html. Note that a main_index_page.tpl.php is not required in this method.

So what does this do? This allows us to add multiple main_page options (just add more if file_exists type options) and it means that the template switching option will still operate.

osCmax Templates

The osCmax 2.5RC1 includes some folders in the templates directory. The folders provide the following:

(BTS = Basic Template System)

compromise: this is a template with the updated BTS & html tagging
CSS-fluid-1: another sample template
fallback: this is the default or fallback template. Do not edit any of these files.
fallback-html: this is a sample template with BTS & html tagging
help: used for the Help files
help-text: used for the Help files
new: a sample template using the standard BTS and only providing one main_page file – shows that the fallback process works.
pgm: another sample template using the original BTS

When using the template switching option, once it is set all pages default to that new template. It overrides the settings in the admin console until the session ends or another template switch command is issued.

Copy any of the sample templates to modify as a new template just by copying the entire directory to a new directory and rename to something appropriate. Preferably use the fallback-html or the compromise templates as the base as both of these feature the new HTML tagging feature.

osCmax Template main page different from rest of site

Depending on which posts you read in the osCmax forums you get a different lot of questions around handling having a different main or index page from the rest of the site.

The forum article on BTS templates has what I needed to make these changes, but it’s buried down the page. Open the forum article and search in the page for ‘main2′ and you’ll find the relevant information. So why write this up? Because I find some of the instructions ambiguous.

In the catalog or / directory of the osCmax site each of the .php files that controls a page includes a control link to the main_page.tpl.php

include (bts_select('main')); // BTSv1.5

is found in the code (generally near the end of the file) and the activity / actions of the file push the results off to the template for display.

In this case I want to modify the /index.php file  and rather than using main2, I’ll name it as main_index.

Open the /index.php and at the very end of the file around line 335 is

include (bts_select(‘main’)); // BTSv1.5

Change this to

include (bts_select(‘main_index’)); // BTSv1.5

Close index.php as this is finished with.

Open /includes/configure_bts.php at line 19 copy the existing line

define(‘TEMPLATENAME_MAIN_PAGE’, ‘main_page.tpl.php’);

and paste it again and edit as the second line for the new page template

define(‘TEMPLATENAME_MAIN_PAGE’, ‘main_page.tpl.php’);
define(‘TEMPLATENAME_MAIN_INDEX_PAGE’, ‘main_index_page.tpl.php’);

Then find at around line 43

case ‘main’:
// default or main_page
if(is_file(DIR_WS_TEMPLATES . TEMPLATENAME_MAIN_PAGE)) {
$path = (DIR_WS_TEMPLATES . TEMPLATENAME_MAIN_PAGE);
} else {
$path = (DIR_WS_TEMPLATES_FALLBACK . TEMPLATENAME_MAIN_PAGE);
}
break;

and copy and paste this as a second block immediately below the first and edit it as shown

case ‘main’:
// default or main_page
if(is_file(DIR_WS_TEMPLATES . TEMPLATENAME_MAIN_PAGE)) {
$path = (DIR_WS_TEMPLATES . TEMPLATENAME_MAIN_PAGE);
} else {
$path = (DIR_WS_TEMPLATES_FALLBACK . TEMPLATENAME_MAIN_PAGE);
}
break;

case ‘main_index’:
// default or main_page
if(is_file(DIR_WS_TEMPLATES . TEMPLATENAME_MAIN_INDEX_PAGE)) {
$path = (DIR_WS_TEMPLATES . TEMPLATENAME_MAIN_INDEX_PAGE);
} else {
$path = (DIR_WS_TEMPLATES_FALLBACK . TEMPLATENAME_MAIN_INDEX_PAGE);
}
break;

Close the configure_bts.php file as this is finished with.

Next in the template directory that you are using (I cover that bit elsewhere) copy the

main_page.tpl.php
main_page.html
main_page.code.php

as new files:

main_index_page.tpl.php
main_index_page.html
main_index_page.code.php

If you use a text editor like EditPlus then opening the files and using Save As is another option.

The final step is to edit the main_index_page.tpl.php file

There are two lines that reference the other files:
Line 33:

function bts_read_php($php_template = ‘main_page.code.php’) {

change to

function bts_read_php($php_template = ‘main_index_page.code.php’) {

and line 52:

function bts_read_html($php_code_array, $html_template = ‘main_page.html’) {

change to

function bts_read_html($php_code_array, $html_template = ‘main_index_page.html’) {

Close this file as it is ready.

Make some changes in the main_index.html page so that you can see a difference and test your new template main page and another page to see that you have it all working. Once this is done, editing the two separate file pairs of .html and .code.php will allow for the setup of two types of layouts.

Of course, this can then be applied for a third or many multiples of layouts within the same site or template.

Now, this is the suggested process gleaned from various forum posts. I think there is a better way as I’d prefer to minimise the modifying of the core application files and this breaks the template switching process.