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.

[xml]
<!– content begins –>
<div id="content">{content}</div>
<!– content ends –>
[/xml]

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:

[xml]
<!– 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 –>
[/xml]

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.