Step 05: Home.html Template Makeover (Part Three)
From PikaDocs
| Table of contents |
Overview of the Message Board Makeover
In Part One of the makeover of the home.html template, we changed the markup from a table-based to a floated-div structure to control the layout and positioning of page elements in the overall "content" area of the Pika Home Page, which includes both "side" and "main" content areas. Part Two focused on further structural and design changes affecting the vertical menu choices on the left "side content" of the page. This final Part Three takes on the "main content" area of the Home Page.
What we here refer to as the "main content" area of the original Pika Home Page design is embedded in a table (http://www.htmldog.com/reference/htmltags/table/), and within that element further embedded within two td (http://www.htmldog.com/reference/htmltags/td/) (table data) cells that create the center and right columns, i.e., the "Message Board" and the search form fields for "Other Websites," as illustrated here:
Stripped of embedded style elements -- but with a dashed blue border added to the tds to show their structural relationship -- this same part of the Home Page looks like this:
For the Claire design, what we've done to this main content area is, first, replace the original structural markup in the home.html template with floated divs, as documented in Part One (including deletion of the "Other Website" search fields). Next, as documented in Using WordPress for the Message Board, we made modifications to the index.php file and further changes to the home.html template to substitute a WordPress (http://wordpress.org/) blog feed for the original Pika "motd" (message of the day) publication code.
The final touch was to add some way groovy CSS code to give the new "Message Board" feed a complimentary look, matching the rest of the Claire design. In the next sections, we explain how we did it.
Tweaking the WordPress Options
First, having installed the WordPress blog on our Pika server, we simply accepted the default design and settings and then added a half dozen or so blog postings so we had some real "content" to work with. The only system changes to the WordPress installation we made were to the "weblog title" and "tagline" under General Options, illustrated here:
These two WordPress settings affect the blog title and subtitles that appear on the WordPress blog's home page. (We explain below why we made these two changes.) With these settings in place, here's what the WordPress blog looks like:
Restyling the Web Feed
Now move on to your new Pika Home Page. With the changes made to the index.php and home.html template to tap this blog feed, but without any added CSS changes, this same blog content is fed to Pika and generates "main content" that looks something like this:
Not too shabby, but only serviceable. But there is plenty to work with here. Use "View Source" from your web browser to take a look at the newly generated content, and you can identify the particular page elements that make up each blog feed item, as generated by the feed. They are:
- h2 (heading)
- ul (unordered list)
- li (list item)
- p (paragraph)
- feedDescription
- feedItemTitle
- feedItem
- meta (class name)
With this structural information in hand, we added the following CSS code to the danio.css file:
/* WordPress Feed */
.feedDescription h2 a:link,
.feedDescription h2 a:visited,
.feedDescription h2 a:hover,
.feedDescription h2 a:active {
color: #7F7C6A;
}
.feedItemTitle {
margin-bottom: -4px;
}
.feedItemTitle a {
font-weight: bold;
}
.feedItemTitle a:link,
.feedItemTitle a:visited {
color: #333333;
}
.feedItemTitle a:hover,
.feedItemTitle a:active {
color: gray;
}
li.feedItem {
margin: 0;
margin: -1px 6px 16px -34px;
padding: 10px;
list-style: none;
line-height: 140%;
border: 1px solid #B5C6A5;
background-color: #FDFDFD;
}
<!-- IE hack to control margin discrepency -->
* html li.feedItem {
margin-top: -8px;
}
li.feedItem p {
margin: 10px 0;
}
<!-- prevent the posting date from displaying -->
li.feedItem .meta {
display: none;
}
Now, with all the modifications made and this new CSS code added, we have our all new "message board" on steroids, including the ability to insert images, embed links to internal and external web pages, plus all the advantages of maintaining an archive of message posts:
Extra Goodies
Three extra goodies, not to be missed: See why we changed the WordPress settings earlier? The heading for the content area ("LSNC News and Alerts") now matches the "weblog title" in the WordPress settings. If you hover your mouse over the heading, the title attribute (http://www.w3.org/TR/REC-html40/struct/global.html#h-7.4.3) displays as a "tool tip" that matches the WordPress "tagline" ...
... and if you click on the heading itself, it jumps you to the underlying WordPress blog home page! Handy, huh?
Okay, with the Pika "default" page design all primped up for the prom and the Pika front door all functional and "news-ified" to greet case workers as they login, it's time to move on to the next step: The Prospective Client search filter page.
Next: Step 06: Prospective Client (Part One)
Related articles and files:
