Blog Design Solutions (2006)
.pdf
B L O G D E S I G N S O L U T I O N S
Next I want to center the wrapper in the middle of the page. To do this, I set the width of the wrapper and then set the left and right margins to auto.
#wrapper {
margin: 0 auto; width: 720px;
}
Unfortunately, this doesn’t work in Internet Explorer (IE). Luckily, IE misinterprets text-align, aligning everything instead of just the text. This can be used to your advantage to center the wrapper in IE. Using text-align: center also centers all the text so it is manually corrected by adding text-align: left to the wrapper. I also added a minimum width to the body to avoid any problems if the browser window is scaled smaller than the width of the wrapper.
body {
min-width: 720px; text-align: center;
}
#wrapper {
margin: 0 auto; width: 720px; text-align: left;
}
Finally, I set the default font for the design and set the main background image. I also set the background color on the wrapper to be white and added some margin and padding.
body {
min-width: 720px; text-align: center;
font: 76%/1.6 "Lucida Grande", Geneva, Verdana, sans-serif; background: #fceff7 url(images/bg.gif) repeat-x;
}
#wrapper {
margin: 50px auto 0 auto; padding: 10px 0;
width: 720px; background: #fff; text-align: left;
}
Rather than embed the branding image in the XHTML, I’m applying it using the CSS. This procedure gives you much greater flexibility and allows you to swap out the branding image by just changing one line in the CSS, rather than doing a find and replace on every
96
M O VA B L E T Y P E
page on the site. You’ll notice that I’m creating the 10-pixel gutter around the sides of the branding area by applying a margin to it. It would seem to make more sense to add this gutter to the wrapper div as a padding instead. However doing this brings into effect Internet Explorer’s “Box Model Bug”; to avoid this it’s generally better to apply margins to child elements than padding to parent elements that have a defined width or height.
#branding { |
|
width: 700px; |
|
height: 200px; |
|
margin: 0 10px 10px 10px; |
3 |
background: url(images/branding.jpg); |
}
Now let’s look at the content area. First, I want to add the 10-pixel gutter to the left and right of the content area. The content area is to be broken into two columns with the main content on the left and the secondary content on the right. Although there are various ways to do this, I find floating to be the most effective method. By setting the desired widths, floating the main content left and the secondary content right, it is possible to create a very simple two-column layout.
#content {
margin: 0 10px;
}
#mainContent { width: 510px; float: left;
}
#secondaryContent { width: 190px; float: right;
}
If you look at the template, you’ll notice that the wrapper no longer seems to enclose the floated content because floated elements are taken out of the flow of the document and essentially take up no space. I want the wrapper to extend around all the content; to do this, the floated content needs to be cleared. Clearing is a complicated topic, but applying clear to an element adds the total height of all the preceding floated elements to the cleared element’s top margin. Normally, people would add an empty element after the floats and apply a clear to that. Luckily I already have an element I can clear—in the form of the footer div.
#footer { clear: both;
}
97
B L O G D E S I G N S O L U T I O N S
A quick check in Firefox reveals that the problem isn’t completely solved. Firefox has a rather annoying bug whereby it doesn’t clear empty floats. To solve this problem, you need to either add some content to the footer or give it a nominal height.
#footer { height: 1px; clear: both;
}
The layout is now almost finished. The last thing I’ll do is apply colored backgrounds to help define the content areas. For the intro area I’ll be adding a horizontally repeating gradient as a background image. The background for the latest area is even simpler because it’s just a solid color.
#intro {
background: #fddaef url(images/intro-bg.gif) repeat-x;
}
#latest {
background: #fbeef6;
}
Adding the background image for the latest posts area is a little more complicated. If you add the background directly to the secondary content area, it will stop where the secondary content stops. However, I want the image to extend all the way to the bottom of the wrapper, creating a column effect. To do this you need to apply the background image, aligned right, to one of the secondary contents parent elements. You could apply it to the wrapper, but then the background would tile down the whole of the right side of the wrapper. Instead it would make more sense to apply the background to the content div.
#content {
margin: 0 10px;
background: url(images/secondary-bg.gif) repeat-y right;
}
Unfortunately when you do this, nothing happens. At least you can’t see anything happening. The problem is that the content div doesn’t actually contain its two floated children: the mainContent div and the secondaryContent div. You could add an empty element at the end of the content div and clear that, however that is just adding unnecessary markup. Instead I’ve simply floated the content element as well, letting the cleared footer div take care of the rest.
#content {
margin: 0 10px;
float: left; /* so the bg expands */
background: url(images/secondary-bg.gif) repeat-y right;
}
98
M O VA B L E T Y P E
Looking at the template in Internet Explorer for Windows, you’ll notice something odd happening. The left and right margins on the content area now seem to be 20 pixels wide rather than the specified 10 pixels. This is because of an IE/Win bug known as the IE Double Margin Float Bug, which doubles the margins on floated elements. Luckily, this bug can be fixed simply by giving the element a display property of inline.
#content { |
|
margin: 0 10px; |
|
display: inline /* fixes the IE double margin float bug */ |
|
float: left; /* so the bg expands */ |
3 |
background: url(images/secondary-bg.gif) repeat-y right; |
}
And that’s the basic layout finished. If you open up basic-layout.html in your favorite browser, you should see something like Figure 3-15.
Figure 3-15. The basic template layout: basic-layout.html
99
B L O G D E S I G N S O L U T I O N S
The rest of the work is essentially cosmetic. Adding margins and padding, setting text, headline and link styles. I won’t bore you with the details, but Figure 3-16 shows a screenshot of the tidied-up XHTML/CSS template basic-template.html.
Figure 3-16. Tidied-up version of the template basic-layout.html
Where’s the drop shadow?
If you’ve been paying attention, you might have noticed that the final template is missing one crucial element from the original designs: a drop shadow. There are several ways to accomplish drop shadows, and each has its good and bad points. If there is a solid background color, you can create a 10-pixel-high image whose background matches the background color. You can then apply it as a repeating background image to the wrapper. However, your design calls for a graduated background, so you can’t use that method. Another method is to create a really long background image and apply that to the wrapper. Unfortunately, you have no idea what the maximum page length it likely to be, but it could be fairly long. A long enough image, perhaps 2000 pixels, would have a big file size and seem a little over the top just for a nice drop shadow effect. The other problem that both these methods have is the need to create a separate image for each color theme. Wouldn’t it be good if you could create one drop shadow that worked, no matter what the background was?
100
M O VA B L E T Y P E
Well, as a matter of fact you can, using a file format known as PNG. You see, 24-bit PNGs support alpha transparency, allowing you to create drop shadows that act just like real shadows. The majority of recent browsers support PNG alpha transparency, with one notable exception: Internet Explorer. However, Microsoft has some proprietary CSS that allows you to enable alpha transparency support in IE 5.5 and above. It will involve a couple of “hacks” and using nonstandard code, but you can minimize the impact of it by using another Internet Explorer-specific technology: conditional comments.
Going into this in detail is beyond the scope of this book, but if you look at final-template.html, you’ll see that I altered the XHTML and CSS slightly by using PNGs
to produce the drop shadow. I then created a special stylesheet for IE 5.5 and above that 3 uses the Microsoft proprietary code to enable alpha transparency. Because this doesn’t
work in IE 5.0, I created another stylesheet that removes the drop shadow for IE 5.0. You can see the final template in Figure 3-17.
Figure 3-17. Final template with transparent drop shadow: final-template.html
It’s now much easier to skin the design by simply changing the background image or color. For instance, you could add a different gradient, or possibly a patterned background, and not have to worry about changing the drop shadow to match. Cool, huh?
101
B L O G D E S I G N S O L U T I O N S
Movable Type templates
Movable Type is essentially a specialized template engine. You create an XHTML template page and then add Movable Type template tags where you want the content to appear. So for a template that displays an individual blog entry you’d probably want to add tags for the title of the entry, the content, and when it was posted. When Movable Type processes that template, it will strip out the template tags and replace them with the content of your actual entry. Besides replacing individual chunks of content, template tags also allow you to perform simple logic such as displaying a comment form only if comments are allowed on a particular entry.
Movable Type has many different template tags, all of which are detailed in its excellent documentation. Movable Type template tags look similar to HTML tags, although all single tags start with the prefix $MT, and pairs of tags start with the prefix MT. Most are sensibly named so it’s pretty easy to figure out what each one does.
<h2><$MTEntryTitle$></h2> <MTDateHeader>
<h2 class="date-header"><$MTEntryDate format="%x"$></h2> </MTDateHeader>
<$MTEntryBody$> <p><$MTEntryDate$></p>
Many template engines do the processing each time a page is requested, and such a system is said to be dynamic. However, a busy site with many page requests can put a lot of pressure on the template engine. Instead, Movable Type creates static HTML pages through a process called rebuilding. Each time you change a template, you need to rebuild it to see the change take effect. Although this process decreases the system overhead, rebuilding can take a bit of time, especially if you have lots of entries associated with that template. If you’re making a series of changes to the templates, the constant rebuilding can get a little frustrating, and it is not uncommon to forget to rebuild and then wonder why the change hasn’t taken effect. Luckily, most of the template tweaking will be done when your site is relatively new, so you don’t have to worry about rebuilding lots of pages of content.
Main index template
Although Movable Type comes with a number of default templates, I’ll show you how to build your own based on the XHTML template created earlier. The first is the Main template, which powers the blog homepage. To edit it, click the templates link on the left side of the blog config screen. Select the Indexes tab if it is not already selected and then click Main Index. Select All and delete the existing content.
The first thing I’ll show you is how to make the title of the main page the name of the blog, which you can do by adding a Movable Type template tag called MTBlogName inside the <title> element. In this case, I’m using the encode_html attribute of this tag to make sure no unencoded entities such as ampersands appear in the title:
<title><$MTBlogName encode_html="1"$></title>
102
M O VA B L E T Y P E
Most blogs publish an XML feed to allow visitors to keep track of the latest posts. Movable Type comes installed with a number of templates for different feed formats, such as RSS1.0, RSS 2.0, and Atom. You could add links to these feeds using relative paths, but it makes life a little easier if you use absolute paths. Rather than entering the paths by hand you can use the MTBlogURL template tag. I did the same for the stylesheet URL.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" |
|
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
|
|
<html |
xmlns="http://www.w3.org/1999/xhtml"> |
|
<head> |
3 |
|
<meta |
http-equiv="Content-Type" content="text/html; |
|
charset=iso-8859-1" />
<title><$MTBlogName encode_html="1"$></title>
<link rel="alternate" type="application/atom+xml" title="Atom" href="<$MTBlogURL$>atom.xml" />
<link rel="alternate" type="application/rss+xml" title="RSS 1.0" href="<$MTBlogURL$>index.rdf" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<$MTBlogURL$>index.xml" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="<$MTBlogURL$>rsd.xml" />
<style type="text/css"><!--
@import url("<$MTBlogURL$>styles-site.css"); -->
</style>
</head>
Besides being used for the page title, I want the name of the blog to appear as the toplevel heading in the branding section of the page. It is quite a common convention to link the site name or logo to the homepage, so I did that as well.
<div id="branding"> <h1>
<a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$> </a>
</h1>
</div><!-- close branding -->
The first piece of real content on the homepage is an introduction to the site. This intro text can be drawn from the description you added when configuring your blog using the
MTBlogDescription tag.
<div id="intro"> <p><$MTBlogDescription$></p> </div><!-- close intro -->
103
B L O G D E S I G N S O L U T I O N S
Now it’s time to get to the core of this template—the latest entries. If you remember, the latest posts area looked something like this:
<div id="latest"> <h2>Latest</h2> <div class="entry">
<p class="date">24th March 2005 10:49am</p> <h3><a href="">One entry</a></h3>
---
content
---
<p class="author">Posted by: <a href="#">Andy</a></p> <p class="comments"><a href="#">Comments (3)</a></p> </div>
</div><!-- close latest -->
On the homepage I’ll display the last six entries posted. To tell Movable Type to loop through several entries, you need to use a container tag called MTEntries. In this instance, I’ll use the lastn attribute to specify the last six entries. If I didn’t specify this, Movable Type would display posts from the number of days specified in the blog config preferences section. Unlike most Movable Type template tags, container tags like MTEntries need to be closed.
<div id="latest"> <h2>Latest</h2>
<MTEntries lastn="6">
<div class="entry">
<p class="date">24th March 2005 10:49am</p> <h3><a href="">One entry</a></h3>
---
content
---
<p class="author">Posted by: <a href="#">Andy</a></p> <p class="comments"><a href="#">Comments (3)</a></p> </div>
</MTEntries>
</div><!-- close latest -->
104
M O VA B L E T Y P E
Within the MTEntries tag, you can add tags that will display information about each entry. The first thing I’ll do is add the date and time the entry was made using the MTEntryDate tag, which has many formatting options (so check with the documentation to see what they all mean). I’ll add the entry title using MTEntryTitle and a link to the full article using MTEntryLink. As you can see, a pattern is starting to form. Movable Type template tags are very sensibly named, so it’s easy to tell what each one does. The main text of the entry is added using MTEntryBody, the author using MTEntryAuthorLink, and the number of comments made about this entry using MTEntryCommentCount. Adding a few more template tags, the latest post area looks like this.
<div id="latest"> |
3 |
<h2>Latest</h2> |
|
<MTEntries lastn="6"> |
|
<div class="entry"> |
|
<p class="date"><$MTEntryDate format="%B %e, %Y %I:%M %p"$></p> |
|
<h3><a href="<$MTEntryLink$>"><$MTEntryTitle$></a></h3> |
|
<$MTEntryBody$> |
|
<p class="author">Posted by: <$MTEntryAuthorLink$></p> |
|
<p class="comments"><a href="<$MTEntryLink$>#comments"> |
|
Comments (<$MTEntryCommentCount$>)</a></p> |
|
</div> |
|
</MTEntries> |
|
</div><!-- close latest -- |
> |
The navigation list in the secondary content area is created in a similar way.
<div id="secondaryContent"> <h2>Latest Posts</h2>
<ul id="latestNav"> <MTEntries lastn="6">
<li><a href="<$MTEntryLink$>"><$MTEntryTitle$></a></li> </MTEntries>
</ul>
<p><a href="<$MTBlogURL$>archive/">Archive</a></p> </div><!-- close secondaryContent -->
105