Monthly Archives: July 2011

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
[css]
tbody tr:nth-child(even) td, tbody tr.even td {background:#e5ecf9;}
[/css]

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.

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

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.

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

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

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

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.