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.
[xml]
<div style="height:14px; width: 400px;">
<a href="#" class="read">read more</a>
</div>
[/xml]
But… there is also the lower boxes / images that have
[xml]
<div style="height:14px;">
<a href="#" class="read">read more</a>
</div>
[/xml]
So how to handle the two variants?
Change the lower boxes (4 of them) to:
[xml]
<div class="readmore">
<a href="#" class="read">read more</a>
</div>
[/xml]
and the banner sections x 3 to
[xml]
<div class="readmore banner">
<a href="#" class="read">read more</a>
</div>
[/xml]
Then add these classes into the styles.css file in catalog/templates/freecss_sky/stylesheets/
[xml]
.readmore {
height:14px;
}
.banner {
width: 400px;
}
[/xml]
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.
[xml]
<div style="clear: both"></div>
[/xml]
Setting this as
[xml]
<div class="clear-both"></div>
[/xml]
and adding
[xml]
.clear-both {
clear: both;
}
[/xml]
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.
[xml]
<div class="clear-both" style="height:20px;"></div>
[/xml]
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.
[xml]
<div style="height:5px"></div>
<div style="height:15px"></div>
<div style="height:25px"></div>
<div style="height:10px"></div>
[/xml]
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:
[xml]
<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>
[/xml]
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:
[xml]
<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>
[/xml]
In the code file modify the menu options
[php]
//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}
[/php]
With this template there is a second section in the footer that presents the main menu items in a different format.
[xml]
<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>
[/xml]
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.
[xml]
<div id="logo">
<a href="#">freecss_sky</a>
<h2><a href="#"><small>Small Company Slogan Goes Here</small></a></h2>
</div>
[/xml]
becomes
[xml]
<div id="logo">
{cataloglogo}
</div>
[/xml]
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.
[css]
#logo {
padding: 65px 0px 0px 0px;
width: 242px;
float: left;
}
[/css]
changed to:
[css]
#logo {
padding: 0px 0px 0px 0px;
width: 242px;
float: left;
}
[/css]
While doing this I noted something (mainly ‘cos I broke it) and I figured I had to comment.
[css]
/*
Design by Metamorphosis Design
http://www.metamorphozis.com
Released for free under a Creative Commons Attribution 2.5 License
*/
*
{
border: 0;
margin: 0;
}
[/css]
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:
[css]
/*
Design by Metamorphosis Design
http://www.metamorphozis.com
Released for free under a Creative Commons Attribution 2.5 License
*/
* {
border: 0;
margin: 0;
}
[/css]
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
[xml]
<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 –>
[/xml]
and I created a new section in the main_index_page.code.php like this by cutting the core information from the above:
[php]
//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}
[/php]
while in the main_index_page.html where I chopped the above code from I added the script label
[xml]
<div class="item">
{banner_item1}
</div> <!– item –>
[/xml]
Repeating the above for each of the 3 banner sections results in the html file looking like:
[xml]
<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 –>
[/xml]
Then for the horizontal boxes lower down I do something similar resulting in the following in the html page:
[xml]
<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>
[/xml]
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:
[php]
//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}
[/php]
the first line is the bit to change first.
[php]
// <img src="images/img1.jpg" alt="" /> // changed from this to….
<?php echo tep_image(DIR_WS_TEMPLATES . ‘images/’ . ‘img1.jpg’, "alt text here"); ?>
[/php]
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:
[xml]
<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>
[/xml]
Cut the centre of that out and paste it to a new section in the code file:
[php]
//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}
[/php]
and then change the html file to use the new code section:
[xml]
<div id="b_col4">
{follow_us_menu}
</div>
[/xml]
Finally update the image links in the code file to use the template path:
[xml]
//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}
[/xml]
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.