$template = preg_replace(
    "#\%date(\:\s*(.*?))?\%#ei",
    "date(('\\2'!=\"\"?'\\2':\$date_format), \$timestamp)",
    $template
);

This falls on the “advanced” side of intermediate, I would think, so here’s an explanation:

This is a standard preg_replace($pattern, $replacement, $source_string). What we want to do is replace the variable %date% in $template with a date string generated from $timestamp. But %date% is too limiting; within the template, we’d like to write something like %date: F j, Y% to get a date like “March 12, 2009,” or any other format.

The regular expression is like so: #\%date(\:\s*(.*?))?\%#ei. The “hashes” (#) here act as delimiters for the regex; the e and i after the second hash turn on “eval’d replacement” and “case-insensitivty”, respectively (learn more about PCRE regex modifiers at php.net). So the regex to deal with is \%date(\:\s*(.*?))?\%. The \% are the markers for our template variables; date is the name of the variable to look for. (\:\s*(.*?))? matches zero or one instances of our “variable modifier”: a colon, followed by any amount of whitespace (including none), followed by any number of any characters (where the extra ? makes the .* “non-greedy”; it’ll stop “eating” characters when it reaches the next percent sign). For preg_replace, this will place our date() format in “\\2″ if it is present; if it is not present, “\\2″ will not be set.

The replacement is as follows: “date((’\\2′!=\”\”?’\\2′:\$date_format), \$timestamp)”. preg_replace will insert the matched date format from the regex into every occurrence of “\\2″ in the replacement string, and then run eval() on the resulting string to get the replacement value (all thanks to the e modifier in the regex). Assuming our regex matched “F j, Y” as the match, we’ll get “date((’F j, Y’!=\”\”?’F j, Y’:\$date_format), \$timestamp)”. The (’F j, Y’!=\”\”?’F j, Y’:\$date_format) part chooses the date format; if the match is not set (ie, an empty string), use whatever is in the variable $date_format; else, if the date format was matched, use it. This allows us to use %date% in the template, to default to a server-side specified format.

And there it is. You can now put “%date: F j, Y%” in your template, and it will be expanded to “March 12, 2009″ (depending on the actual date, of course ). That is, if your templating system works in the first place…

The new layout, also my first WordPress theme (yay), is a bit more flexible. By default, it is full-browser-width, with reasonable space allotted to the right sidebar and the main content areas. For modern browsers that support max-width CSS, the design will stop “growing” at 1,000 pixels, just short of full-width on a 1024×768 resolution. The content and sidebar columns have, in addition to their own (possibly redundant) max-widths, reasonable min-widths. This is to prevent the content from being squashed beyond recognition should someone with an abnormally small browser come along. In this case, the sidebar will drop below the content area when the point-of-no-more-shrinkage is reached.

There’s a whopping 6.3KB worth of images to load per page. Unfortunately, they’re almost all translucent gradients, so IE6 users will receive *html hacks in the CSS to clear most of them, to avoid unsightly grey blocks that would otherwise obscure text. The color scheme was heavily based on Cool Grays Lavender by julievonderropp on Kuler.

In addition to the right-hand sidebar, I put two separate “widget areas” in the footer, one above the other. The bottom section is primarily for displaying the archives links — there are a lot of them (one for each month the site’s been up), and they don’t fit very nicely in vertical sidebars. The top section is simply another sidebar, designed to fit up to three widgets.

A decent amount of work went into the comments section, along with some help and ideas from a comments template posted at ChristianMontoya.com. Even/odd comments are striped for easy differentiation. The post’s author’s name is retrieved via an extra database query, and comments made by that author are given an additional class name, used to attach another gradient image to the background. Also, comments and pingbacks are listed separately, comments first, along with their respective counts. This change is extended to the front and search pages, where another extra query is executed for each post to obtain the number of actual comments for that post. A small amount of extra overhead, but it might be worth it for the extra accuracy. Unfortunately, I haven’t yet thought of a succinct way of displaying the total number of responses (comments plus pingbacks).

Concerning the actual theme construction, at the outset, I really had no clue about making WordPress themes, other than that it involved PHP, HTML, CSS, and some MySQL. The design itself started as an HTML file on my local harddrive, just an idea I started tweaking around. Fortunately, in my research I ran across a full-fledged WordPress theme tutorial on WPDesigner.com; it’s really a great tutorial for beginners to the whole WordPress skinning idea. For what the tutorial lacked, the WordPress Codex was a great reference, along with a couple of google searches for some unclear topics. I did have to consult PHP.net a couple of times, but that’s normal for any PHP project. Overall, though, it wasn’t too difficult, just a matter of putting the right pieces in the right places .

So, there you have it. My first post in almost a month (sorry ) is a self-centered look-at-me post. Criticisms, comments, and congratulations on the design are welcome. As are lectures about what coding, design, or WordPress standards I may have broken . In other words, I look forward to your feedback.

There are a few notable sites that have posted methods for doing this, but the short answer is it doesn’t work unless you meet certain requirements. Probably the most popular example (which is also the first google result for “sticky footer”) is A CSS Sticky Footer. However, as the explanation page shows, the method uses extraneous markup to push the footer down below the content. Also, this method only works with static-height footers.

Another good example comes from AListApart: Exploring Footers. The method involves using relative positioning on a container and absolutely positioning the footer to the bottom of that container. Inexplicably, this works, though for my implementation, I used the body element as my wrapper. Unfortunately, you have to apply appropriate padding or margin to the bottom of the content div, which in turn squashes the idea of having a dynamic-height footer.

Given these examples, which are perfect for fixed-height footers, it seems sticky, dynamic-height footers are not meant to be under current browser implementations. If you’re insistent on having a dynamic-height sticky, you’ll have to go the way of the faux footer (along the lines of the faux columns, which I’ve always thought to be cheating ). I couldn’t find any links talking about faux columns (in this sense, anyway), but one site which currently implements it is KilianValkhof.com. If you look into his code, you’ll see that the background of the footer is actually set in the body.

I find this to be an interesting approach to multi-column layouts. Better yet, the author claims that it works in all major browsers on the three major operating systems.

However, are ordered lists the proper elements to use in this case? Is it “semantically correct”? What about unordered versus ordered lists? It’d be terribly simple to convert the layout to work with unordered lists, but which is more “correct”.

Regardless of correctness, though, “no floats, no divs, no clears” is rather appealing.

Circular menus are superior in usability to the typical rectangular slide-out menu. Why? Because, ideally, each menu item is the same distance from the initial pointer position as each other item. Look at the iPod buttons, for example. Play/Pause, the most common function, is in the middle, and the other functions are equal distances from there.

Also check out the SecondLife context “spin menu”. The pie pops up surrounding the cursor, and all the available options are an equal twitch away from the center.

Submenus? Just expand the circle. For example, here’s a quick mockup I made converting much of my current FireFox context menu into a pie menu:

But how feasible would such menus be inside a website? WebToolkit.info has a mostly-working demo that uses images exclusively. I tried substituting text for the images, but the menu simply disappeared.

Credit for image: iPod image and SecondLife image

All you need to do to get an alternative underlining effect is to, first off, hide the default underline with text-decoration:none, and then specify a bottom border for the affected links:

a:link {
    text-decoration: none;
    border-bottom: #000 dashed 1px;
}

To make the effect stand out, you could also make the link and border separate colors, either on hover or all the time.

I’m going to use the Tableless CSS Forms code provided by DynamicDrive’s CSS library contributors. This gives us the basic layout and essential elements without too much trouble:

We’ll start with the basics: borders and background. In Web 2.0, simplicity is king. Beveled corners? Sooo Web 1.0. Sooo not pretty. We’ll make the borders solid, with uniform color, and thin to keep the simplicity. And we’ll specify a white background to avoid any cross-browser issues:

.cssform input, .cssform textarea {
    border: #999 solid 1px;
    background: #FFF;
}

A nice, neutral gray tones down the harshness of the input areas’ borders, and the solid-1px all the way around eliminates any doubts as to where the areas begin and end.

Next we want to make it a li’l roomier. How do you like cramming text into zero-padding textboxes?

.cssform input {
    padding: 3px 5px;
}
.cssform textarea {
    padding: 5px;
}

Here’s when you start getting into trouble with the disparities in browsers’ box models, though as long as the width of the elements isn’t an issue, you should be fine.

Now that we’ve covered the foundation, time to break out the makeup: images! Using a very small, very subtle gradient image, we can add a simple inner shadow to each input field. While this is “adding features”, I feel it actually adds to the feeling of simplicity:

.cssform input, .cssform textarea {
    border: #999 solid 1px;
    background: #FFF url(formgrad.png) repeat-x top left;
}

The gradient image is a 1px wide by 15px high PNG image with a gradient of hex colors #EEEEEE (top) to #FFFFFF (bottom). The slightest difference in color makes for a very nice effect.

We could very well stop here — all the form elements are styled nicely, even the submit and reset buttons. But why stop there when you can make the buttons intuitive as well?

.cssform .submit {
    background: #FFF url(submitgrad.png) repeat-x bottom left;
}
.cssform .reset {
    background: #FFF url(resetgrad.png) repeat-x bottom left;
}

Here we use another technique found at DynamicDrive. This simply adds two other colored gradient images to the background of the appropriate buttons. Of course, you must add the appropriate classes to the buttons for this to work. If you want to take full advantage of CSS standards and leave IE6 and below behind in the dust, you could just use the attribute selector:

.cssform input[type="submit"] {
    background: #FFF url(submitgrad.png) repeat-x bottom left;
}
.cssform input[type="reset"] {
    background: #FFF url(resetgrad.png) repeat-x  bottom left;
}

And there you have it. With no more than three images (or one, if you prefer), some very simple CSS, and an eye for simplicity, we’ve made our form elements nice looking.

Additional links:

• Download the example
• View the example page
• Browse the files
• DynamicDrive: CSS Tableless Forms
• DynamicDrive: Stylish Submit Buttons

The idea behind this event is to promote Web Standards. Plain and simple. This includes proper use of (x)html, semantic markup, a good hierarchy structure, and of course, a good ‘ol play on words. It’s time to show off your <body>.

While I would love to participate in this, I wouldn’t recommend it for Blogger users. The building blocks of Blogger blogs, widgets, produce all sort of irrelevant divs and such that are used exclusively as CSS hooks. Aside from the fact that the underlying code is NOT semantic, disabling styles on Blogger sites (well, this one anyway) is NOT pretty (or, for that matter, usable). If you must see the results of such an inadvisable act as disabling CSS, you can (using FireFox) go to View -> Page Style -> No Style. This will disable styles for the current page (or the current tab, I’m not exactly sure).

So, to reverse Dustin’s little play on words — sorry, you don’t get to see my <body>

Don’t have Photoshop? Check out the GIMP! I’m hoping that the PSD file is GIMP-compatible. You could try to convert it one way (using an online service) or another (directly in the GIMP),but there’s always the issue of unsupported layer effects getting messed up.

And, no, this is not an AFD trick. At least, I hope it isn’t…

Why have a favicon? Kiseki.co.uk puts it well:

A favicon can help people identify your site quickly and easily in, say, a long list of bookmarks….It is only a small detail, but it can be useful for people to recognise your site.

A favicon is an instant visual cue that, when a visitor sees it, conjures your website in their minds. As AbstractPromotion.com says, “If you don’t have a favicon, your users will forget about you”.

Making a favicon is fairly straightforward: churn up your creative juices, fire up the gimp, create a new 16×16px or 32×32px image, brand away, save as an ICO, GIF, or PNG file, then upload the image to a file hosting site. I personally enjoy Village Photos’ free account, though there’s always PhotoBucket, ImageShack, or Google’s own Picasa service. After the image is web-accessible, add the following lines to the <head> section of your blog HTML template:

<link href="http://host.com/path/to/image.png" rel="shortcut icon" type="image/png" />
<link href="http://host.com/path/to/image.png" rel="icon" type="image/png" />

And, voila! You should obviously replace the href and type attributes to fit your situation. For type, use image/png for PNG, image/gif for GIF, and image/ico for ICO, in case you were wondering

Why two nigh-identical tags? To answer a question with a question, what browser has, in decades past, caused us all so much pain? That’s right. It seems that older versions of IE need the “shortcut icon” link just to see the favicon image…whether or not they decide to display it.

According to the W3C, the rel attribute’s value should, “officially”, be “icon”. Interestingly, they also recommend putting a “profile” attribute in the <head> tag, “to define what the ["icon"] value means”. Their version:

<head profile="http://www.w3.org/2005/10/profile">
<link rel="icon"
      type="image/png"
      href="/somewhere/myicon.png" />

Though I don’t know for sure how well this will make IE6 behave…if such a thing is indeed possible.