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 5

Almost done! The next piece of the puzzle is the side box control and for that I’ll delve into the column scripts, stylesheets, and side box presentation.

This is being done with the CSS template FreeCSS_Sky from http://www.templatebasics.com/freecss_sky/. From the earlier posts the last piece is to setup the presentation of side boxes for osCmax.

Starting with the default files that present columns there are two files:

/catalog/includes/column_left.php
/catalog/includes/column_right.php

The first thing is to copy these to the templates/freecss_sky/includes directory. This allows for some changes to be made without impacting the core files.

Starting with column_left.php, although column_right.php will tend to be identical except for the query. The database is checked for boxes set by the admin for display. I’ll look at that in a minute. Then the column is matched as left and active. The script then looks for the boxes in the core files.

    if ( ($column['cfgvalue'] == 'yes') && ($column['cfgcol'] == 'left')) {
      if ( file_exists(DIR_WS_BOXES . $column['cfgtitle'] . '.php') ) {
        require(DIR_WS_BOXES . $column['cfgtitle'] . '.php');
      } 
    }

But I want it to check the template for template based formatting etc. So I added two lines and modified the third to the following:

   if ( ($column[cfgvalue] == 'yes') && ($column[cfgcol] == 'left')) {
	define($column['cfgkey'],$column['box_heading']);
	if ( file_exists(DIR_WS_TEMPLATES . 'includes/boxes/' . $column['cfgtitle'] . '.php') ) {
		require(DIR_WS_TEMPLATES . 'includes/boxes/' . $column['cfgtitle'] . '.php');
	} else if ( file_exists(DIR_WS_BOXES . $column['cfgtitle'] . '.php') ) {
		require(DIR_WS_BOXES . $column['cfgtitle'] . '.php');
	} 
   }

This is simply going to check in the includes/boxes in the template for a box script first. Once this edit is done the box scripts that we need can be copied to the templates/freecss_sky/includes/boxes directory.

So as an example categories.php is the first box that is presented in the left column. Note that if there are no store categories then it will be empty. Create some store categories to see what is going to change.

The main issue is that the boxes are still using table controls for layout. It would be better for presentation and to broaden the control options via css to remove the tables and replace them with appropriate div controls. However, that is something that can be done later. For this design the side boxes should work as is.

To set any css styles specific to the categories box create a categoriesBox.css file in the template stylesheets directory. A request to load the categoriesBox.css stylesheet using the stylesheetloader script is done in the modified configure_bts.php script.

All things being completed a review of the pages now should reveal a working home page, contact page, and articles page with the categories box now presenting with some changes to the format or layout. Modify the categoriesBox.css to give a red border or green background just to validate that it is all working. From here we tweak the css for the categories box and copy all the other relevant boxes scripts adding the appropriate css file load as above. Just change the names to be consistent for each box.

Move along to the column_right.php file and repeat for all it’s boxes.

The FreeCSS_Sky template is almost ready for release. The last piece is to setup the home page to not use the static, supplied images, but to make the home page recognise the osCmax boxes in much the same way as the articles page was done in this post.

But that is a topic for another day…..

Converting a Free CSS Stylesheet for osCmax store Part 4

The fourth installment in this exercise to convert a Free CSS website template to a working osCmax v 2.5

The first step here is to setup an articles page layout which is different to the main page. In the articles I want to see links to more articles, search and info on the left and promotional boxes on the right with article content in the centre. This is a typical 3-column .css layout and suits e-commerce presentation. But the FreeCSS_Sky template is not like this so some ground work is required.

In part 3 of this exercise I created the Contact page relying on the main_page.html and main_page.code.php to create the framework and the contact_us.tpl.php for the body. The Contact Us page is a two column presentation and works as it is all about the potential client contacting the business. The side by side presentation means that page is mostly above-the-fold and easy to use as a result.

In this case the articles will include, perhaps, lengthy pieces that talk about products and services. Making this more like a newspaper columnar layout with related information to either side works.

Using the Blueprint CSS Framework makes the column layouts relatively simple.

After copying the main_page.html and main_page.code.php as article_info_page.html and article_info_page.code.php respectively, open the article_info_page.html and edit the content section.

<!-- content begins -->
<div id="content">{content}</div>
<!-- content ends -->

In the main_page.html layout we are presenting a single column section layout. So there is only one div section for content.

To make this a multi column layout we need to add new div’s:

<!-- content begins -->
<div class="span-4">
	<div id="leftcolumn">
	    {columnleft}
	</div>
</div>
<div class="span-12">
	<div id="maincontent">
		{content}
	</div>
</div>
<div class="span-6 last">
	<div id="rightcolumn">
	    {columnright}
	</div>
</div>
<!-- content ends -->

The column names are obvious from the div id’s. The div that wraps around each column is the Blueprint CSS framework that helps us by controlling the left to right presentation and ensuring consistency between the differing browser interpretations of the box model.

Setting the columns is pretty easy. A class=”span-x” refers to the number of Blueprint column widths to use for each column. The right most column also gets a class of ‘last’ to correctly set the right hand offsets. Adding the total of the ‘x’ value for the columns to a maximum of 24 provides a 950 pixel wide presentation layer. In my combination 3 columns varying at 4, 14 and 6 Blueprint column widths in 40 pixel increments. (24 x 40 pixel – 10 pixels = 950) Noting that in Blueprint column 1 is only 30 pixels to give a total of 950.

To vary the column widths simply modify the x value of the div class span-x for each of the 3 columns to achieve the same total x = 24 value. Having said that the FreeCSS_Sky template is only working with a max of Blueprint column value = 22. Not sure why but I’ll deal with that when I do some wireframe examples, but I expect there is a css style limiting width to less than 950 pixels somewhere within the FreeCSS_Sky template.

Now all of the above is fine except that if you are using a new database for osCmax you need to create some articles to work with. Do this in the admin console under Articles. Add an author first and then at least one topic and an article for each. Fill the text with anything you like just to sort the presentation out. The editing of appropriate content can come later. Add 3 articles.

Next test the pages. If you are following my setup then the original page layout and menu structure points the 3 top menu items of Blog, Gallery, and About to articles 1, 2, & 3.

The layout should be working with a left and right outer narrow column and the article text in the middle. The outer columns assume the default box settings from the admin console and will be a dog’s breakfast of styles. But the layout works and that was the goal.

At this stage the template FreeCSS_Sky is working and presents a unique home page layout, provides for pages like the Contact Us page to be presented using the main_page controls, and the Articles section presents a neat 3 column layout. All in a consistent framework that presents in Internet Explorer v9 and Firefox and Chrome browsers. In theory it should also work with earlier IE versions but I dont have them to test with.

The last piece of the puzzle is the side box control and for that I’ll delve into the stylesheets, box presentation and the admin console that is needed to manage the presentation.

Converting a Free CSS Stylesheet for osCmax store Part 3

This is, as the title suggests, Part 3 of a process to convert a free CSS template to an osCmax store template.

So far I have stepped through the process of selecting a free CSS stylesheet & web site design in the form of FreeCSS_Sky from http://www.templatebasics.com/freecss_sky/, adding it to a new template directory in an osCmax v2.5 (using current svn version), connecting some of the osCmax components, and cleaning up to make the template act as a default or home page.

The rest of the osCmax site will need a standard style that is consistent with the home page but making more room for the product information and checkout pages etc. I’ll do this with the Contact Us page in this post.

The main page of the CSS was all laid out and has not needed anything extra. The secondary page however does not exist with the template.

I started by copying the main_index_page.html and the main_index_page.code.php and re-naming them as main_page.html and main_page.code.php. These are the default names used in the main_page.tpl.php script.

The main change now is to edit the main_page.html and remove most of the content div’s that setup the main banner section and the lower boxes used on the home page.

<div class="top">
	<div class="scrollable">
		<div class="items">
			<div class="item">
				{banner_item1}
			</div> <!-- item -->
			<div class="item">
				{banner_item2}
			</div> <!-- item -->
			<div class="item">
				{banner_item3}
			</div> <!-- item -->			
		</div> <!-- items -->
	</div> <!-- scrollable -->
	<div class="navi"></div> <!-- create automatically the point dor the navigation depending on the numbers of items -->		   
	<div class="clear-both"></div>	
</div>

All the above was removed. While in the section labelled as content

<div id="content">
	<h3>Praesent ipsum neque, volutpat vel tincidunt quis, auctor vitae leo.</h3>
	<div style="height:25px"></div>
	<div class="all_box">
		<div class="box" >
			{box_1}
		</div>
		<div class="box_r" ></div>
		<div class="box" >
			{box_2}
		</div>
		<div class="box_r" ></div>
		<div class="box" >
			{box_3}
		</div>
		<div class="box_r" ></div>
		<div class="box" >
			{box_4}
		</div>
		<div class="clear-both"></div>
	</div>
	<div style="height:20px"></div>
	<div class="ban_top">
		<div class="ban_bot">
			<h1>“Maecenas dui nunc, ultricies a hendrerit at, hendrerit quis felis. Proin interdum imperdiet tortor, ut venenatis nulla iaculis ut. Sed felis eros, adipiscing ac.”</h1>
		</div>
	</div>
	<div class="circl_all">
		<div style="height:10px"></div>                       
		<div style="height:10px"></div>
	</div>
</div>
<!-- content ends --> 

Remove eveything within the content div and replace with a the single {content} code element.

<!-- content begins -->
<div id="content">
	{content}
</div>
<!-- content ends --> 

Next is to test that the contact_us page links from the home page work and they should present the contact information but just in the middle with a plain white background.

I want to use the Blueprint css framework for preparing the layout of this page and any other page layout.

In the main_page.code.php file I need to include the appropriate stylesheets. In the {stylesheets} section there is only one stylesheet loaded so far.

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

I add all the Blueprint stylesheets like this:

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

The first two, screen.css and print.css, are Blueprint styles. The main_page.css is in case we specify any settings in addition or that modify the Blueprint styles. The $PHP_SELF allows for including a page specific style, which would be contact_us.css in this example, if I need it.

In the template content folder I edited contact_us.tpl.php to remove the table oriented layout and convert it to use div’s.

In the main_page.html I had to add back a clear setting to fix the bottom section.

<!-- content begins -->
<div id="content">
	{content}
</div>
<!-- content ends --> 
<div class="clear-both"></div>	

Insert the clearing div after the end of the content section and before the start of the bottom section. It works without this in IE9 but not Chrome or FF. In Chrome without the clear the bottom section commences up the page and overlays the content.

The last bit of code that needs to be modified in the main_page.html file is to set the correct footer structure. This includes some of the background tools that osCmax uses.

The bottom of the standard osCmax html page looks something like this.

	<div id="footer">
	 <p>{footer}</p>	
	</div>
	<!-- end #footer -->
{googleanalytics}
{javascript}
{slideshow}
</body>
</html>
{utf8support}

For the FreeCSS_Sky template we need to move the footer content from the html file into the language file and format the html file to set it up appropriately. The one change that we have to do to a core file is in the /catalog/includes/languages/english/core.php (select the appropriate language if not using english).

Merging the FreeCSS_Sky footer and the osCmax footer would create a lengthy FOOTER_TEXT_BODY so I opted to do a bit of both html and variable definition. So the language file was modified to include all the copyright information tweaked to fit with the design like this:

define('FOOTER_TEXT_BODY', 'All content and Images Copyright &copy; ' . date('Y') . ' <a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . STORE_NAME . '</a><br />Copyright &copy; 2000 - ' . date("Y") .  '<a href="http://oscmax.com"> osCmax</a> Design by <a href="http://www.metamorphozis.com/free_templates/free_templates.php" title="Free Web Templates">Free Web Templates</a><br /><a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a> | <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a></p>');

and the .html page was adjusted to call the {footer} and other osCmax elements like this:

   <!-- footer begins -->
   <div id="footer">
      <div style=" width: 900px; margin: 0px auto;">
	<div id="footer_l">
	    {footer}
	</div>
	<div id="buttons_f">
	  <a href={menu_home} class="but_f but_t"  title="">Home</a><div class="razd_but_f"></div>
	  <a href={menu_blog} class="but_f" title="">Blog</a><div class="razd_but_f"></div>
	  <a href={menu_gallery}  class="but_f" title="">Gallery</a><div class="razd_but_f"></div>
	  <a href={menu_about}  class="but_f" title="">About us</a><div class="razd_but_f"></div>
	  <a href={menu_contact} class="but_f" title="">Contact us</a>
	</div>
	<div class="clear-both"></div>
      </div>
   </div><!-- footer ends -->
</div><!-- bottom end --> 
{googleanalytics}
{javascript}
{slideshow}
</body>
</html>
{utf8support}

I had not done this on the main_index_page.html so I went back and made the same changes to be consistent.

The only other change was to add the text to the language file for the Captcha process ‘SECURITY_EXPLAIN’.

I thought this was in the standard files but maybe not, I need to research this a bit more, it might be something I added to an earlier setup. The file is in the main directory not the template:

/catalog/includes/languages/english/contact_us.php

Added a new definition for SECURITY_EXPLAIN

define('SECURITY_EXPLAIN', 'The security check is to help us reduce scripts processing junk email. The Captcha process is designed to prove that you are human.');

And that completes the main_page for general use, the Contact page, and this post.

Converting a Free CSS Stylesheet for osCmax store Part 2

This is a follow up to an earlier post that kicked off the basic conversion of a free css template into a template that works for osCmax.

In this stage I am going to migrate all the display type html and clean up the main_index_page.html

The freecss_sky template has one thing that really annoys me. There is a stylesheet. That is what CSS or cascading style sheets are meant to do. So here is a style sheet that is used by the html page that also contains some style commands. It is like adding bling on a car and then using duct tape to stop a rattle.

CSS if used as it is meant to be means not using embedded style statements in the html.

So Step 1 here is to inspect all the embedded styles and convert them to classes or id’s and moving the style controls into the stylesheet. Step 2 will be to migrate the parts of the html that we will ultimately switch to osCmax boxes and place them in the main_index_page.code.php file

Step 1.

The first bit I can see is this div wrapper around an anchor in the banner section. It is repeated 3 times for each of the 3 autochanging banners.

<div  style="height:14px; width: 400px;">
    <a href="#" class="read">read more</a>
</div>

But… there is also the lower boxes / images that have

<div  style="height:14px;">
    <a href="#" class="read">read more</a>
</div>

So how to handle the two variants?

Change the lower boxes (4 of them) to:

<div class="readmore">
    <a href="#" class="read">read more</a>
</div>

and the banner sections x 3 to

<div class="readmore banner">
    <a href="#" class="read">read more</a>
</div>

Then add these classes into the styles.css file in catalog/templates/freecss_sky/stylesheets/

.readmore {
	height:14px; 
}

.banner {
	width: 400px;
}

Why?
1. It reduces the code in the html page and will improve load times – marginal but if you add up all the calls it can be significant.
2. If you need to modify the height from 14 to 13px or similar then you can change it once in the stylesheet and not need to find and change 3 or more entries in the html page.

Next there are a couple of clear processes.

<div style="clear: both"></div>

Setting this as

<div class="clear-both"></div>

and adding

.clear-both {
    clear: both;
}

Addresses that piece of code in two of the three places that we find clear. The third div with the clear style setting also has a height setting.

<div class="clear-both" style="height:20px;"></div>

and elsewhere there are lots of empty divs with height controls. Kind of like the old table mentality that built complex empty rows and columns to get a layout.

<div style="height:5px"></div>
<div style="height:15px"></div>
<div style="height:25px"></div>
<div style="height:10px"></div>

The style=”height x” appears at 20 times in the html file. it is not good form to use empty divs like this. Granted the interpretation of the css / doc box model varies between IE and other browsers but this is not clean code.

I am leaving it for now as I expect to remove it as I convert the boxes that the spacer is used with in the osCmax box code.

And on to Step 2.

main_index_page.code.php holds the coding segments that mix php and some html to pull from the osCmax database and template. main_index_page.html handles the layout presentation layer.

Using the {segment_name} convention in the html file and the code file allows for a clean read of the html file and separation of the php code.

Using the menu as an example – I am not planning on documenting every change – just a sample. In the current main_index_page.html file the menu section looks like this:

<div id="buttons">
  <a href="index.html" class="but but_t"  title="">Home</a>
  <a href="blog.html" class="but" title="">Blog</a>
  <a href="gallery.html"  class="but" title="">Gallery</a>
  <a href="about_us.html"  class="but" title="">About us</a>
  <a href="contact_us.html" class="but" title="">Contact us</a>
</div>

To build the menu item links in a standard osCmax method the href sections need to be redirected to the code file. The menu items in the freecss_sky file are, of course, not based on osCmax files but for the moment just leave them as they are and we’ll build some appropriate article pages later.

The main_index_page.code.php file already has some suitable menu items. Change the html file to look like this:

<div id="buttons">
  <a href={menu_home} class="but but_t"  title="">Home</a>
  <a href={menu_blog} class="but" title="">Blog</a>
  <a href={menu_gallery}  class="but" title="">Gallery</a>
  <a href={menu_about}  class="but" title="">About us</a>
  <a href={menu_contact} class="but" title="">Contact us</a>
</div>

In the code file modify the menu options

//begin{menu_home}
echo tep_href_link(FILENAME_DEFAULT);
//end{menu_home}
//begin{menu_blog}
echo tep_href_link(FILENAME_ARTICLE_INFO,'articles_id=1');
//end{menu_blog}
//begin{menu_gallery}
echo tep_href_link(FILENAME_ARTICLE_INFO,'articles_id=2');
//end{menu_gallery}
//begin{menu_about}
echo tep_href_link(FILENAME_ARTICLE_INFO,'articles_id=3');
//end{menu_about}
//begin{menu_contact}
echo tep_href_link(FILENAME_CONTACT_US);
//end{menu_contact}

With this template there is a second section in the footer that presents the main menu items in a different format.

<div id="buttons_f">
  <a href="index.html" class="but_f but_t"  title="">Home</a><div class="razd_but_f"></div>
  <a href="blog.html" class="but_f" title="">Blog</a><div class="razd_but_f"></div>
  <a href="gallery.html"  class="but_f" title="">Gallery</a><div class="razd_but_f"></div>
  <a href="about_us.html"  class="but_f" title="">About us</a><div class="razd_but_f"></div>
  <a href="contact_us.html" class="but_f" title="">Contact us</a>
</div>

If this is changed to be consistent then it helps if we change the code as the two distinct menus will always have the menu items aligned. Change the entries to be the same as the top menu.

Next is the logo section and this could be done many ways. For this example I just swapped the text oriented stuff for a code link for the store logo.

<div id="logo">
	<a href="#">freecss_sky</a>
	<h2><a href="#"><small>Small Company Slogan Goes Here</small></a></h2>
</div>

becomes

<div id="logo">
	{cataloglogo}
</div>

To set this up I then created a small logo file of approx a suitable size and then had to modify the styles.css as the logo style was padded.

#logo {	
    padding: 65px 0px 0px 0px;
    width: 242px;
    float: left;
}

changed to:

#logo {	
    padding: 0px 0px 0px 0px;
    width: 242px;
    float: left;
}

While doing this I noted something (mainly ‘cos I broke it) and I figured I had to comment.

/*
Design by Metamorphosis Design

http://www.metamorphozis.com

Released for free under a Creative Commons Attribution 2.5 License
*/

*
{
border: 0;
margin: 0;
}

Note the aterisk above the first brace {

This is saying that the following settings apply to all elements but if the indentation is meant to be readable and consistent then it should be presented like this:

/*
Design by Metamorphosis Design

http://www.metamorphozis.com

Released for free under a Creative Commons Attribution 2.5 License
*/

*    {
     border: 0;
     margin: 0;
}

A minor issue but one that tripped me up as I deleted the asterisk before realising that it was actually doing something. I thought I had mis-keyed the extra character.

The next section was to get the box contents out of the html and for the time being I prepared a direct shift. I’ll convert them to osCmax boxes later.

In the example I have the first banner item

<div class="item">
<div class="header1">
<div class="top_1">
</div>
<div class="top_r">
<div><h1>Vestibulum vel lacus eget nisl.</h1>
<b>Nulla mollis, magna quis feugiat faucibus.</b><br />
Risus lorem lacinia justo, et adipiscing tortor lacus in nunc. Duis in tellus vel ipsum bibendum gravida. Nunc eget mi id risus tempor rhoncus. Integer lectus sapien, pulvinar non ornare quis, vulputate vel eros. <br /><br />
<b>Cras aliquam quam eget odio accumsan eu lobortis urna mollis.</b><br />
Sed a tellus orci, a luctus enim. Aliquam congue nisi quis felis porttitor vestibulum. Nam eget metus dui, eu consectetur urna. Donec sed mauris quis nisl iaculis ullamcorper. Phasellus hendrerit erat ac urna tempor luctus. Pellentesque in tellus neque.</div>

	<div class="readmore banner">
		<a href="#" class="read">read more</a>
	</div>
</div>
</div>                                    
</div> <!-- item -->

and I created a new section in the main_index_page.code.php like this by cutting the core information from the above:

//begin{banner_item1}
?>
<div class="header1">
<div class="top_1">
</div>
<div class="top_r">
<div><h1>Vestibulum vel lacus eget nisl.</h1>
<b>Nulla mollis, magna quis feugiat faucibus.</b><br />
Risus lorem lacinia justo, et adipiscing tortor lacus in nunc. Duis in tellus vel ipsum bibendum gravida. Nunc eget mi id risus tempor rhoncus. Integer lectus sapien, pulvinar non ornare quis, vulputate vel eros. <br /><br />
<b>Cras aliquam quam eget odio accumsan eu lobortis urna mollis.</b><br />
Sed a tellus orci, a luctus enim. Aliquam congue nisi quis felis porttitor vestibulum. Nam eget metus dui, eu consectetur urna. Donec sed mauris quis nisl iaculis ullamcorper. Phasellus hendrerit erat ac urna tempor luctus. Pellentesque in tellus neque.</div>

	<div class="readmore banner">
		<a href="#" class="read">read more</a>
	</div>
</div>
</div>                                    
<?php
//end{banner_item1}

while in the main_index_page.html where I chopped the above code from I added the script label

<div class="item">
	{banner_item1}
</div> <!-- item -->

Repeating the above for each of the 3 banner sections results in the html file looking like:

<div class="scrollable">
   <div class="items">
	<div class="item">
		{banner_item1}
	</div> <!-- item -->
	<div class="item">
		{banner_item2}
	</div> <!-- item -->
	<div class="item">
		{banner_item3}
	</div> <!-- item -->			
   </div> <!-- items -->
</div> <!-- scrollable -->

Then for the horizontal boxes lower down I do something similar resulting in the following in the html page:

<div class="all_box">
	<div class="box" >
		{box_1}
	</div>
	<div class="box_r" ></div>
	<div class="box" >
		{box_2}
	</div>
	<div class="box_r" ></div>
	<div class="box" >
		{box_3}
	</div>
	<div class="box_r" ></div>
	<div class="box" >
		{box_4}
	</div>
	<div class="clear-both"></div>
</div>

Now the changes in the code file to point the boxes to use the correct template images location. Up until now the images in all the boxes have been broken due to the html assuming that the relative path was the root of the site rather than inside our osCmax template.

So using the first box section in the code file it should look like this after being pasted from the html:

//begin{box_1}
?>
	<img src="images/img1.jpg" alt="" />
	<div style="height:10px"></div>
	<h1>Pellentesque vitae </h1>
	<div style="height:10px"></div>
	<b>Vestibulum ante ipsum primis</b><br />
	In faucibus orci luctus et ultrices posuere cubilia Curae; Aenean sed
	<div style="height:5px"></div>
	<div class="readmore">
		<a href="#" class="read">read more</a>
	</div>
<?php
//end{box_1}

the first line is the bit to change first.

// 	<img src="images/img1.jpg" alt="" /> // changed from this to....
	<?php echo tep_image(DIR_WS_TEMPLATES . 'images/' . 'img1.jpg', "alt text here"); ?>

Now I am not overly fond of doing embedded php like the above but it demonstrates the point that we need to tell the script where to find the image now that we are in an osCmax world and not a standard website.

Changing the other three boxes makes the page almost complete and the last bit is the footer images that are broken.

The footer section that looks like this needs to move to the code file:

<div id="b_col4">
  <h1>About Us</h1>
  <div style="height:15px"></div>
    <ul class="spis_fu">
    <li><img src="../images/fu_i1.png" class=" fu_i" alt="" /><a href="#">Subscribe to Blog</a></li>
    <li><img src="../images/fu_i2.png" class=" fu_i" alt="" /><a href="#">Be a fan on Facebook</a></li>
    <li><img src="../images/fu_i3.png" class=" fu_i" alt="" /><a href="#">RSS Feed</a></li>
    <li><img src="../images/fu_i4.png" class=" fu_i" alt="" /><a href="#">Follow us on Twitter</a></li>
    </ul>
</div>

Cut the centre of that out and paste it to a new section in the code file:

//begin{follow_us_menu}
?>
  <h1>About Us</h1>
  <div style="height:15px"></div>
  <ul class="spis_fu">
    <li><img src="../images/fu_i1.png" class=" fu_i" alt="" /><a href="#">Subscribe to Blog</a></li>
    <li><img src="../images/fu_i2.png" class=" fu_i" alt="" /><a href="#">Be a fan on Facebook</a></li>
    <li><img src="../images/fu_i3.png" class=" fu_i" alt="" /><a href="#">RSS Feed</a></li>
    <li><img src="../images/fu_i4.png" class=" fu_i" alt="" /><a href="#">Follow us on Twitter</a></li>
  </ul>
<?php
//end{follow_us_menu}

and then change the html file to use the new code section:

<div id="b_col4">
	{follow_us_menu}
</div>

Finally update the image links in the code file to use the template path:

//begin{follow_us_menu}
?>
<h1>Follow Us</h1>
<div style="height:15px"></div>
<ul class="spis_fu">
<li><?php echo tep_image(DIR_WS_TEMPLATES . 'images/' . 'fu_i1.png', "alt text here",'','','class=" fu_i"'); ?> 
<a href="#">Subscribe to Blog</a></li>
<li><?php echo tep_image(DIR_WS_TEMPLATES . 'images/' . 'fu_i2.png', "alt text here",'','','class=" fu_i"'); ?> 
<a href="#">Be a fan on Facebook</a></li>
<li><?php echo tep_image(DIR_WS_TEMPLATES . 'images/' . 'fu_i3.png', "alt text here",'','','class=" fu_i"'); ?> 
<a href="#">RSS Feed</a></li>
<li><?php echo tep_image(DIR_WS_TEMPLATES . 'images/' . 'fu_i4.png', "alt text here",'','','class=" fu_i"'); ?> 
<a href="#">Follow us on Twitter</a></li>
</ul>
<?php
//end{follow_us_menu}

And that gives us a main page that matches the freecss_sky stylesheet template with the basis for inserting the osCmax boxes and products.

Still to do is converting the boxes to use the osCmax admin boxes controls, create a main_page for all the other pages and, as I like to present a different layout for articles a new articles template.

But first I need to create a zip of the template as it sits today as a sample file.

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.