Step 03: Home.html Template Makeover (Part One)
From PikaDocs
| Table of contents |
Overview of Step 03
In the prior step we rebuilt the default.html template relied upon throughout Pika for each page's banner area, horizontal navigation and page footer elements. In the Claire redesign, we've eliminated the footer itself, to grab back more page real estate.
Here in Step 03, we focus on the so-called "content" area of the Home Page, i.e., everything between the horizontal navigation bar and the page footer. Actually, Step 03 is the first of three parts about the home.html template. In this first part we'll review how the original Pika home.html template is built using table markup and the changes in structural markup we've made to simplify the template and control the page layout as a whole without tables, instead using floated divs. In the second part we'll explain the particular code we used to create the new left-hand, vertical menu. In the third part we show how we integrated WordPress into the Home Page to create a more flexible "Message Board" content area and how it was styled using CSS.
The Original "TABLE-based" Template
As explained in a related article, the structural markup in the original home.html template is 100+ lines of straightforward table, p (paragraph) and form elements used to control the positioning and layout of the three columns and their corresponding "content," as can bee seen in this screenshot. This structural approach -- which at its simplest is a single table with a single tr row and three enclosed td columns -- is clean, stable and reliable, and very retro-compatible with older web browsers. Solid stuff.
In contrast, the Claire design goes down the path of relying on more semantically correct (http://www.govis.org.nz/conference2005/presentations/joseph-lindsay-html/semantichtml.html), web-standards (http://www.webstandards.org/) compliant structural markup by rebuilding the same template using divs to define the structural elements of the page, and CSS to control the positioning and style of those same elements. Our first experiments with this type of design were rationalized and documented in our ealier article, Home Page: No Tables. This redesign is even leaner than the original Pika template, and every bit as stable and reliable ... assuming you're using a current version of Firfox or Interent Explorer. (If not, these kind of changes may not be good for your overall Pika lifestyle. But then, this may be your wake-up call to upgrade your browser to a more web-standards browser experience.)
That said, let's soldier on. Here's an IE 800x600 screenshot of where we're going with the revamped home.html template. In this particular screenshot the "Message Board" elements have yet to be added:
The New "Floated-DIVs" Template
With lessons learned from our earlier "no-tables" experiments, we've refined the markup for the Claire design and posted the newly rebuilt Project Claire: home.html template.
As we did in the prior step, we've renamed many of the id and class names to match our new structural approach. In the orginal Pika home.html template, the containing div is called "main-content" and its three td columns are called "side-column." We substitute more functional names, using "content-container" for the overall wrapper or container; "side-content" for the smaller content area on the same page; and "main-content" to refer to the larger or dominant content area. In this particular template, the "main-content" is the "Message Board," to be detailed later in the Step 05.
As templates go, the Claire home.html template is especially straightforward. It has three basic structural elements. It begins with the "content-container" div (closed at the very bottom of the template page) which is the wrapper for everything else within the template ...
<!-- Content-container DIV --> <div id="content-container">
... followed by the "side-content" div which holds the h2 (http://www.htmldog.com/reference/htmltags/h1h2h3h4h5h6/) headline or heading or the left-hand, vertical menu list made up of three clusters of unordered (ul (http://www.htmldog.com/reference/htmltags/ul/)) list items (li (http://www.htmldog.com/reference/htmltags/li/)) ...
<!-- Side-content DIV -->
<div class="side-content">
<h2>Core Tasks</h2>
<ul>
<li><a href="%%[base_url]%%/intake2.php/">New Client Intake</a> </li>
<li><a href="activity.php?screen=compose&act_type=L">New MSR Data</a></li>
<li><a href="activity.php?screen=compose&act_type=T">New Time Slip</a></li>
<li><a href="activity.php?screen=compose&completed=0">New Calendar Entry</a></li>
<li><a href="activity.php?screen=compose&act_type=K">New Tickler</a></li>
</ul>
<ul>
<li><a href="%%[base_url]%%/cases.php/">My Case List</a></li>
<li><a href="%%[base_url]%%/cases.php/?closed_on_after=NULL&status=2">My Open Cases</a></li>
<li><a href="%%[base_url]%%/cases.php/?status=1">My Pending Cases</a></li>
</ul>
<ul>
<li><a href="%%[base_url]%%/cal_adv.php? ">My Time Slips</a></li>
<li><a href="%%[base_url]%%/cal_adv.php? ">My Weekly Calendar</a></li>
<li><a href="%%[base_url]%%/cal_adv.php? ">My Weekly Tickler</a></li>
</ul>
<ul>
<li><a href="%%[base_url]%%/reports/">Reports</a></li>
</ul>
</div> <!-- Side-content closing DIV -->
So, you're asking yourself, "What's with the gaps in the anchor (http://www.htmldog.com/reference/htmltags/a/) tags in the third set of LI list items?" We're still working out the details of how we want those particular menu items to call the search results for "My Time Slips," etc. See the next step for more details about this design conundrum and how we plan to deal with it.
The next section of markup is a third div named "main-content." It encloses the Pika code target for the Message Board "message of the day" content (hence, the [motd] code), which in turn is followed by the "content-container" closing div:
<!-- Main-content DIV -->
<div class="main-content">
%%[begin:motd]%%
%%[end:motd]%%
</div> <!-- Main-content closing DIV -->
</div> <!-- Content-container closing DIV -->
Using CSS to Restyle the Content Areas
With the home.html template structure rebuilt, we then added the following to the Project Claire: CSS Code to get the look illustrated in the screenshot, above:
#content-container {
clear: both;
font-size: 100%;
}
#content-container h2 {
clear: both;
margin: 0;
padding-bottom: 2px;
border: 1px solid #B5C6A5;
background-color: #F7F2EA;
color: #7F7C6A;
font-size: 110%;
text-align: center;
}
.side-content {
float: left;
width: 160px;
padding: 10px 0 10px 10px;
}
.side-content ul {
margin: 10px 0 10px 20px;
padding: 0;
list-style-type: square;
color: #00A585;
font-size: 100%;
}
.side-content ul a {
font-size: 90%;
}
.main-content {
float: left;
position: relative;
width: 566px;
margin-left: 10px;
padding: 10px 10px 10px 0;
}
Next: Step 04: Home.html Template Makeover (Part Two), where we focus on the design logic and functions of the "side-content" for the Home Page, i.e., the vertical "Core Tasks" menu list.
Related articles and files:
- Project Claire: CSS Code
- Project Claire: Images (http://www.openpika.org/images_claire/claire_images.zip)
- Project Claire: default.html
- Project Claire: home.html
- Heads Up: The First 9 Lines of Pika Code
