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.

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

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

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

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

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

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.

I add all the Blueprint stylesheets like this:

[php]
//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
?>
[/php]

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.

[xml highlight=”6″]
<!– content begins –>
<div id="content">
{content}
</div>
<!– content ends –>
<div class="clear-both"></div>
[/xml]

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.
[xml]
<div id="footer">
<p>{footer}</p>
</div>
<!– end #footer –>
{googleanalytics}
{javascript}
{slideshow}
</body>
</html>
{utf8support}
[/xml]

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:

[php]
define(‘FOOTER_TEXT_BODY’, ‘All content and Images Copyright © ‘ . date(‘Y’) . ‘ <a href="’ . tep_href_link(FILENAME_DEFAULT) . ‘">’ . STORE_NAME . ‘</a><br />Copyright © 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>’);
[/php]

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

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

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

[php]
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.’);
[/php]

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

Tonys Tech Blog

Just another day in the IT trenches

Converting a Free CSS Stylesheet for osCmax store Part 3

August 14, 2011

Leave a Reply Cancel reply