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

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

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.