Step 02: Rebuilding the Default Page Template
From PikaDocs
| Table of contents |
Overview
In Step 01 we stood back for a second to take a quick overview of how the out-of-the-box Home Page is built. In Step 02, we will build on the core code elements in the orginal Pika default.html template, which includes three page display components:
- Banner area: inclusive of three sub-elements - on the left, a "page title" and the "breadcrumb trail," and on the right the global search form;
- Horizontal navigation: inclusive of eight text buttons providing Pika-internal navigation; and
- Footer: Well, actually the Claire redesign removes the default Pika footer. We'll explain, below.
We've rebuilt the HTML (http://www.htmldog.com/guides/htmlbeginner/) structural markup and CSS (http://www.htmldog.com/guides/cssbeginner/) external styles for a fully functional but distinctly different design. The rebuilt Project Claire: default.html template is posted as part of this series of redesign articles. Viewed in Firefox 1.0 in a 1024x768 viewport, here's where we're going with it:
How was this done? First, we'll breakdown the structural markup in the rebuilt default.html template and then review the CSS code.
The DOCTYPE and HEAD Elements
The Claire redesign proudly embraces the existing DOCTYPE and HEAD elements used in the default.html template:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <meta http-equiv="MSTHEMECOMPATIBLE" content="no"/> <title>Pika: %%[page_title]%%</title> <link rel="stylesheet" type="text/css" href="%%[base_url]%%/css/danio.css" /> </head>
The details of this part of the template are explained in Heads Up: The First 9 Lines of Pika Code. Enough said.
The Page Container
Immediately after the body (http://www.htmldog.com/reference/htmltags/body/) tag, you'll see a "page-container" div (http://www.htmldog.com/reference/htmltags/div/):
<body> <!-- Page-Container DIV --> <div id="page-container">
The "page-container" div in this rebuilt template is functionally equivalent to the "main" div in the original Pika template, i.e., it's what web designers commonly call a "container" or "wrapper." We've taken considerable liberties with the XHTML tag id and class selectors (http://www.htmldog.com/guides/cssintermediate/classid/) used in the various Pika templates, and what we've done in the default.html template is illustrative. Because we strive to use intuitive, full-word id and class names (and with hyphens where appropriate to make the names easier to read or intuit), you'll discover that "main" is now the more functional "page-container" ... "titlebox" is now the more easy to read "title-box" ... "searchbox" is now the more descriptive "global-search" ... and so on. What this also means, of course, is that these new id and class names are also new to their counterparts in the danio.css external style sheet.
The "page-container" div is the first real building block of the basic Claire page design. As detailed in the CSS, below, this div, which wraps around or contains everything else on any give page, provides the width (760px), the "centered" look for the page (margin: 0 auto), and the styled top and bottom borders for the part of the page that has content. Hence, the name "page-container."
The Banner Area
The next major building block for the default page design is the Banner area:
<!-- Banner DIV -->
<div id="banner">
<!-- Page title and breadcrumb -->
<div id="title-box">
<h1>%%[page_title]%%</h1>
<h5>%%[nav]%%</h5>
</div>
<!-- Global search form -->
<form name="sform" method="get" action="%%[base_url]%%/search.php">
<div id="global-search">
<input id="" class="search-text" title="Enter keywords for a global search of the Pika database" type="text" name="s" size="20" value="" accesskey="" />
<input class="button" id="global-search-button" title="Global search of the Pika database" type="submit" value="Search" onmouseover="this.className='button button-hover'" onmouseout="this.className='button'" />
</div>
</form>
</div> <!-- Banner closing DIV -->
Again, we've taken liberties with id and class names, but structurally this part of the page is pretty much what you'll find in the original Pika template. As you'll see in all of our rebuilt templates, we've added descriptive comments (http://www.w3schools.com/tags/tag_comment.asp) to each logical part of the structural markup to make it easier to scan and locate parts of the page code.
For the most part the only changes made here to the Pika original code are minor: Remove the size (http://www.w3.org/TR/REC-html40/interact/forms.html#adef-size-INPUT) attribute for the search form field, and substitute control of its dimension with a CSS class selector -- input.search-text {width: 140px;} -- and add title (http://www.w3.org/TR/REC-html40/struct/global.html#h-7.4.3) attributes to both the search input (http://www.htmldog.com/reference/htmltags/input/) form (http://www.htmldog.com/reference/htmltags/form/) field and input button so that their corresponding functions are identified as a mouseover tool tip:
That being said, there is one very significant code change here: In the second input tag ...
<input class="button" id="global-search-button" title="Global search of the Pika database" type="submit" value="Search" onmouseover="this.className='button button-hover'" onmouseout="this.className='button'" />
... we've added onmouseover and onmouseout events (http://www.htmldog.com/guides/htmlintermediate/javascript/) to make calls for the "gradient" CSS code used to style the submit buttons. The Claire design includes a default submit-buttom design that in Firefox looks like the search button in this screenshot:
But the same button viewed in Internet Explorer 6.x looks like this:
This gradient filter (http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/filters/gradient.asp) effect is possible because of IE-only proprietary CSS properties, detailed below in Claire CSS code below.
The Horizontal Navigation Elements
The next major segment of structural markup are two floated divs ...
<!-- Two floated horizontal navigation DIVS -->
<div id="horizontal-navigation">
<a href="%%[base_url]%%/" accesskey="" title="Pika Home page">Home</a>
<a href="%%[base_url]%%/intake2.php/" accesskey="" title="Begin new intake">Intake</a>
<a href="%%[base_url]%%/activity.php?screen=compose&act_type=L" accesskey="" title="Create new MSR entry">MSR</a>
<a href="%%[base_url]%%/activity.php?screen=compose&act_type=T" accesskey="" title="Create new Time Slip">Time Slip</a>
<a href="%%[base_url]%%/cal_day.php" accesskey="" title="Daily, weekly and monthly calendars">Calendar</a>
<a href="%%[base_url]%%/cases.php/" accesskey="" title="Case List">Case List</a>
<a href="%%[base_url]%%/reports/" accesskey="" title="Pika report options">Reports</a>
<a href="%%[base_url]%%/site_map.php" accesskey="" title="Site Map">Site Map</a>
</div> <!-- Default horizontal navigation closing DIV -->
<div id="icon-navigation">
<!-- Anchor target="_blank" attribute = XHTML non-compliant hack -->
<a target="_blank" href="http://www.google.com/"><img src="%%[base_url]%%/images/google_button.gif" alt="Google" title="Click to go to Google" /></a>
<a target="_blank" href="http://www.lsnc.net/"><img src="%%[base_url]%%/images/lsnc_button.gif" alt="LSNC.net" title="Click to go to LSNC.net home page" /></a>
<a target="_blank" href="http://www.westlaw.com/"><img src="%%[base_url]%%/images/westlaw_button.gif" alt="Westlaw" title="Click to go to Westlaw" /></a>
</div> <!-- Icon-navigation closing DIV -->
The changes here are akin to what we did, above: Changes to class and id names, and the addition of title attributes. We have simplified but retained a basic complement of eight text "button" links on the horizontal navigation bar, like the Pika original. But we changed their order to cluster natural, logical groups: Ground Zero = Home ... Work tasks = Intake and MSRs ... Time = Time Slip and Calendar ... Data/Search Results = Case List and Reports ... Help = Site Map:
The eight text buttons are enclosed in the "horizontal-navigation" div that is floated to the left; and the three circular icon images (http://www.openpika.org/images_claire/claire_images.zip) are enclosed in the "icon-navigation" div floated to the right.
You may notice that we have left in the code for accesskey (http://www.w3.org/TR/WCAG10-HTML-TECHS/#link-accesskey) attributes but left out their corresponding values. We will be inserting them later, once we resolve the final workflow design and complete the rest of the Claire beta templates.
The "Content" Code
At the bottom of the template, you'll see this last bit of markup:
<!-- Begin page content --> %%[content]%% <!-- End page content --> <!-- Clear nested floats in "content-container" DIV --> <div class="clear-fix"></div> </div> <!-- Page-Container closing DIV -->
The [content] field here is industrial-strength Pika code; nothing new here. This is the code that places the content of the home.html template into the Pika Home page you view through the browser window. The "clear-fix" div (see the CSS, below) is an addition to the default.html template. Because of the "no-tables" floated div design we will be using for the home.html template, we needed to add this div to make sure the browser properly clears all the floats (http://www.positioniseverything.net/easyclearing.html) used in the home.html template.
Where's the Footer?
Footer? Who needs a footer? With apologies to Aaron and his copyright statement, we came to the conclusion that on almost every Pika page we need every square pixel we could grab and just couldn't afford to spare the real estate. So we nuked the footer. Call us irresponsible. (But Aaron, we promise to respect your copyright. Really.)
The Custom CSS Code
You can find the complete CSS code for this article at Project Claire: CSS Code. As we complete further steps and post more custom templates, the Claire CSS code page will be updated.
But before you look at the CSS code, we gotta ' fess up about something. Working on the Claire redesign has made us appreciate how typically lean and no-fuss the basic Pika design is. And our experiments with this CSS restyling highlights the point. The production version of the danio.css file has something like, total, 350 lines of CSS code, including line breaks. How does our smarty-pants redesign CSS code compare? For the default page alone, we ended up adding almost 150 lines of new CSS code, without line breaks. All we can say is, "Comedy is easy. CSS coding is hard!"
That said, you can view the CSS used for the Claire redesign at Project Claire: CSS Code .
One of the most significant differences between the Claire CSS code and the Pika production version is how the CSS font-size (http://css-discuss.incutio.com/?page=FontSize) property is handled. Out of the box, Pika relies heavily on pixels to set font sizes for various page elements. For example, a setting of body {font-size: 13px} is used to set the default font-size to a fixed pixel increment. A practical problem this creates, however, is that fonts set in pixels will readily resize (http://cookiecrook.com/sxsw/2004/demo/) in almost all web browsers (including Firefox) but not in the ever cranky but market-dominant Internet Explorer. What to do? The Claire design opts for relative font sizing (http://css-discuss.incutio.com/?page=UsingFontSize), setting the body tag to a relative default: body {font-size: 75%}, and anticipates use of ems (http://css-discuss.incutio.com/?page=UsingEms) and percentages to get the job done (http://www.clagnut.com/blog/348/) as we get deeper into other parts of the redesign. That's the theory, anyway.
A few things to keep in mind: The new CSS code, of course, assumes you are using the Claire rebuilt default.html template with its custom id and class names. The CSS code has been tested and should work as intended in current Windows versions of Firefox 1.x and IE 6.x. You will also notice occasional uses of the famed star html (http://www.info.com.ph/~etan/w3pantheon/style/starhtmlbug.html) hack to tweak a few things to accommodate aspects of IE that are non-compliant with prevailing CSS standards. Also, remember this is add-on code. If your experimenting with an actual Pika install where you've substituted a Claire design template, just add this new CSS code to the end of the existing danio.css file and let the cascade do the rest.
Next: Step 03: Home.html Template Makeover (Part One)
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
