Lhmdesign Redesign Write Up

So, as promised, here's the full write up on the Lhmdesign redesign. I'll cover the whole site, but focus mainly on the blog section as it incorporates the more complex setup and theming.

Firstly, then, a few details:

I built the site in Firefox, with frequent use of the ever awesome Firebug extension.
IE7 corrections were handled using conditional comments placed in the page.tpl.php file.
IE6 fixes were handled via a secondary style sheet - a process which I outlined previously here.
Safari and Opera corrections are a straight up hack:
@media screen and (-webkit-min-device-pixel-ratio:0) { #divid { rules: here; } }
Blog posts are story nodes which, by default, are promoted to the front page and have comments enabled.
Blog post tags are a vocabulary (admin/content/taxonomy/add/vocabulary).

The entire site is built on Drupal 5.7. I would have liked to build it on 6.x, but a number of the contributed modules used don't yet have 6.x support, so for now it's 5.7 all the way.

And speaking of modules (smooth eh ;) the ones I've used (excluding core required modules) are:

LHMDESIGN		MY DRUPAL BLOG
Core optional:	Contributed:	Core optional:	Contributed:
Color	Dynamic Rendering	Color	Code Filter
Comment	Global Redirect	Comment	Comment RSS
Help	Meta tags	Help	Dynamic Rendering
Menu	Panels	Menu	FeedBurner
	Pathauto	Path	Global Redirect
	Token	Ping	Insert View
	Webform	Search	Meta tags
		Taxonomy	Pathauto
			Service Links
			Spam
			Switchtheme
			Views

THEMING:

Due to the site being built on Drupal 5.7 the theme is also tailored for Drupal 5.x, so just be aware that all following references are as such.

REGIONS:

The theme incorporates six regions - header, topbar, content, right sidebar, recommended, and footer.

Custom regions can easily be added to a theme - check out a previous post about creating custom regions in a Drupal theme for an explanation of how to do so.

PAGE.TPL.PHP:

The page.tpl.php file is both structurally and semantically correct. CSS is then used to visually position the primary links so that they appear at the top of the page, and the skip to content link so that it appears in the upper right-hand corner.

SKIP TO CONTENT LINK:

Lhmdesign skip to content link

To get the skip to content link in position I first need to have an id on the main content area I want the link to skip to, like so:

<div id="main"></div>

Then I add the actual skip to content link code at the top of my page.tpl.php file:

<div id="skiplink"><a href="#main" title="Skip to the main content">Skip to content</a></div>

Finally, I use CSS to position it in the upper right-hand corner and include the background image:

#skiplink a {
	padding: 6px 15px;
	position: absolute;
	right: 0;
	top: 3px;
	background: url(images/skiptocontent_bg.png) no-repeat;
}

PRIMARY LINKS:

Lhmdesign primary links

Primary links are output via the following code in the page.tpl.php file:

<?php
print theme('links', $primary_links)
?>

This generates classes on both the list items and the links within the list items to allow for easy theming. The whole primary links section is then positioned visually at the top of the page using CSS.

SIDEBAR BLOCKS:

There are currently four sidebar blocks on the blog - 'Hello', 'Most Popular', 'Subscribe via E-mail', and 'Categories'.

HELLO:

This is just a basic custom block, containing some text, an image, and the Technorati button. The button is custom code which is generated from within your Technorati account.

MOST POPULAR:

'Most Popular' items are rated by how many comments they have. To create the block you'll first need to install the views module and then add a new view (admin/build/views/add) with the following settings:

Basic Information

Name: most_popular

Block

Check 'Provide block'
View type: List View
Title: Most Popular
Nodes per Block: 10

Fields

Node: Title - As link

Filters

Node: Published - Yes

Sort Criteria

Comment: Comment Count - Descending

Save the view, and you should then find it has appeared in your blocks page (admin/build/block) ready to be enabled.

SUBSCRIBE VIA E-MAIL:

My Drupal blog uses the FeedBurner service to burn the two blog feeds (you'll need to enable the feedburner module first to do so.)

It made sense, therefore, to use the e-mail subscription service also provided by FeedBurner, so this block contains the code which FeedBurner generates when you sign in (to FeedBurner) and choose Publicize > Email Subscriptions. I've then edited the code slightly to change some of the text and styling.

CATEGORIES:

This is a custom block with the following PHP code in the block body which generates the categories list (remember to set the input type to PHP and make sure that your vocabulary id is correct):

<?php
$vid = 1; /* <---- put correct vocabulary ID here */
$terms = taxonomy_get_tree($vid);
print "<div class=\"item-list\">";
print "<ul>";
foreach ( $terms as $term ) {
$tcount = taxonomy_term_count_nodes($term->tid);
print "<li>".
l($term->name." (".$tcount.")",'taxonomy/term/'.$term->tid, array('title' => $tcount." posts in ".$term->name)).
"</li>";
} /* end foreach */
print "</ul>";
print "</div>";
?>

SOURCE: I originally found the code for this block in a comment (#5 by xacro) on a post over at tela-web.

RECOMMENDED:

Lhmdesign recommended

This is a region containing a custom block, which itself contains an un-ordered list with each recommended item being one list item. The whole list is then styled to achieve the layout.

The links within this block are Amazon affiliate links. Setting up an Amazon affiliate account is pretty straightforward, and it's then just a case of using your affiliate account to generate the necessary code for the links which you can put in the list.

TOPBAR:

Lhmdesign topbar

I was originally planning to have this region contain a bottom section with all of the sidebar blocks in and then split the main blog posts out across the whole width of the page, but decided upon reflection that this would be a bit too much stuff at the top!

RSS LINKS:

Lhmdesign RSS links

By default Drupal generates a main RSS feed for your site posts (at /rss.xml), and I used the comment RSS module to generate the comments RSS (cunning eh ;)

I was then able to write and style an unordered list which contained links to both feeds like so:

<ul>
    <li><a href="/rss.xml" title="Blog posts">Posts</a></li>
    <li><a href="/crss" title="Blog comments">Comments</a></li>
</ul>

ACCESSIBILITY LAYOUT OPTIONS:

Lhmdesign layout options

I was keen to try and incorporate accessibility features into the theme, but actually found it quite difficult to find any comprehensive documentation about how such features should be implemented from a design point of view.

In the end I created two alternate themes - a high contrast layout, and a high visibility layout. I then used the switchtheme module which, once enabled, allows you to write a simple link into your theme to facilitate the actual theme switching. In my case the theme switching links are just an un-ordered list like so:

<ul>
<li><a href="?theme=mydrupalblog" id="default" title="Switch to the DEFAULT layout">Default layout</a></li>
<li><a href="?theme=highcontrast" id="high_contrast" title="Switch to the HIGH CONTRAST layout">High contrast layout</a></li>
<li><a href="?theme=highvisibility" id="high_visibility" title="Switch to the HIGH VISIBILITY layout">High visibility layout</a></li>
</ul>

How simple is that!

SEARCH:

Search is handled by the core optional search module (which you'll need to enable as it's not 'on' by default). The search button is styled in the same manner as outlined in a previous post.

POSTS:

HEADINGS:

Lhmdesign heading

The main post h2s are dynamically generated by the dynamic rendering module which uses sifr to replace the default h2 with an embeded flash file containing the new heading. The advantage of this method is that you can use any font to render the heading and it remains accessible (I'm using Helvetica Neue Medium for the blog post headings). The disadvantage is that you can't right-click and open in a new tab, although I'm looking into the possibility of an overlay hack to get around this.

SOCIAL NEWS / BOOKMARKING LINKS:

Lhmdesign social links

I think I get more email about how to generate these links than anything else on my blog! (is that a good thing? ;) But, sadly, there's no secret - I simply use the service links module, and set the links to be images only.

META INFO:

Lhmdesign meta info

I decided to stick all of the meta info at the bottom of the posts to save cluttering up the headline.

The meta info is generated via the following code which I place in the theme's node.tpl.php file:

<?php if ($submitted or $taxonomy): ?>
  <div class="meta">
    <?php if ($submitted): ?>
    <div class="submitted"><?php print t('Posted by ') . theme('username', $node) . t(' @ ') . format_date($node->created, 'custom', "h:iA") . t(' on ') . format_date($node->created, 'custom', "F jS Y"); ?></div> 
    <?php endif; ?>
    <?php if ($taxonomy) : ?> 
    <div class="taxonomy">Tags:<?php print $terms ?></div>
    <?php endif; ?>
  </div>
<?php endif; ?>

COMMENTS:

Comments are an often overlooked area of design, so I've tried to make them a bit more interesting:

Firslty, I added the following to the theme's comment.tpl.php file and styled it with some CSS:

<div class="comment <?php print $comment_classes; ?>">
    <div class="comment_id"><?php print $id; ?></div>
    <div class="comment_body">
        <div class="comment_info">
            <span class="comment_name"><?php print theme('username', $comment); ?></span><span class="datetime"><?php print format_date($comment->timestamp, 'custom', "F jS Y") . t(' @ ') . format_date($comment->timestamp, 'custom', "h:iA"); ?></span>
        </div>
        <?php if ($new != '') { ?><span class="new"><?php print $new; ?></span><?php } ?>	
        <div class="content"><?php print $content; ?></div>	
    </div>
</div>