Movable Type to WordPress, Part 4
February 13, 2008 at 5:35 PM by Dr. Drang
This will be the last of my posts describing how I moved the blog from Movable Type to WordPress. The first one discussed my rationale for the move; the second covered the export of posts from Movable Type and their import into WordPress, and the special care needed to handle posts written in Markdown; the third one talked about the difference in permalink format between the two blogging engines and how I got MT-style links to point to the right posts after the move. This post will discuss how and why the blog is laid out the way it is.
Let me start with some advice to web designers. Keep your fucking hands off the size of my fonts! I don’t give a flying fuck what your 25-year-old eyes can see—I’m 47, and I can’t read 12 pt Times on a 100dpi screen! Have you noticed how every browser lets the user decide the default font and size? You have? Then where the fuck do you get off overriding that? Do you think I chose 18 pt Georgia as my default font on a whim? I chose it because I’m 47 years old and I need bifocals (sorry, progressive lens) just to read at all! Sure, I used to edit text in 9 pt Monaco back in the 80s, but that was twenty years ago on a 72 dpi monitor—I can’t do it anymore. I hope you all develop early-onset presbyopia. And then die.
So anyway, one of my main concerns in designing the blog was to accommodate the user’s choice in fonts and font sizes, while maintaining a line length conducive to readability. I’ve done that by avoiding pixel-based dimensions in my CSS file. Font sizes are given in percentages, and other dimensions are given in ems, so the layout expands and contracts as the baseline font size changes. You can test this out without changing your browser preferences—just use the “Larger Text” and “Smaller Text” options and watch the blog “breathe.” (In Safari 3, these options are the Make Text Larger and Make Text Smaller items in the View menu. In Firefox, they’re the Increase and Decrease items in the Text Size submenu of the View menu. In Internet Explorer, I don’t know and I don’t care.)
The basic structure of a blog page is simple. There are three parts: the header, the main content, and the sidebar. These are enclosed in a container that’s horizontally centered in the browser window. A skeleton of the HTML looks like this:
<html>
<head>
blah blah
</head>
<body>
<div id="container">
<div id="header">
blah blah
</div> <!-- end of header -->
<div id="sidebar">
blah blah
</div> <!-- end of sidebar -->
<div id="content">
blah blah
</div> <!-- end of content -->
</div> <!-- end of container -->
</body>
</html>
The CSS for the container is
#container {
width: 50em;
margin-left: auto;
margin-right: auto;
background-color: #ded;
}
As I said before, the width is given in ems, not pixels. Setting the left and right margins to “auto” is what centers the container in browser window.
The CSS for the header is
#header {
background: #384338;
padding-left: 3em;
padding-right: 3em;
padding-top: .5em;
padding-bottom: .5em;
margin-bottom: 0em;
color: white;
}
#header h1 {
font-size: 250%;
font-weight: bold;
margin-bottom: .25em;
}
#header h2 {
font-size: 120%;
font-weight: normal;
}
#header a {
color: white;
text-decoration: none;
}
#header a:hover {
color: #ded;
}
Most of this just positions the blog title away from the edges of the header. The text coloring and sizing is pretty much self-explanatory, I think. The last stanza, covering the “hover” psuedo-class, makes the title text—which is a link to the blog’s home page—change color when you hover over it.
I won’t show all the CSS for the sidebar, just the main part:
#sidebar {
font-family: Sans-Serif;
font-size: 75%;
background: #ded;
width: 10em;
float: right;
margin-top: 0em;
padding-top: .5em;
padding-left: 1em;
padding-right: 1em;
padding-bottom: 1em;
}
The important stuff here is how all the text is made smaller (sidebar text is for navigating, not extended reading), and how the entire sidebar <div> is floated to the right. The sizing and styling of headers and links within the sidebar is pretty standard stuff and not worth describing here.
The CSS for the content <div> is
#content {
margin-top: 0em;
margin-right: 9em; /* sidebar: (10 + 1 + 1)*.75 */
padding-top: .5em;
padding-left: 1em;
padding-right: 1em;
padding-bottom: 1em;
background: white;
line-height: 1.25;
}
The most interesting thing here is the right margin. It’s based on the
width and padding of the sidebar, adjusted for the sidebar’s smaller font size. As with the sidebar, the CSS for the elements within the content <div> is pretty standard stuff. The only unusual thing has to do with the styling of computer code. This goes into a <pre> block, which is styled like this:
#content pre, blockquote {
padding-left: 1em;
padding-right: 1em;
background-color: #efe;
}
#content pre {
overflow: auto;
padding-top: .5em;
padding-bottom: .5em;
}
The overflow property puts a horizontal scrollbar at the bottom of the block of code if the lines get longer than the width of the content <div>.
Sometimes I include line numbers with the code. As I described in this post, line numbers get dynamically enclosed in <span> tags and styled like this:
130: #content pre span.ln {
131: color: #888;
132: font-size: 75%;
133: }
As you can see, if the lines are numbered, a button appears at the bottom of the code block to toggle the line numbers on and off.
I think that pretty much covers it. I don’t intend to get into the use of WordPress tags to insert dynamic content into the blog—that’s what the WordPress Codex is for. You can also learn a lot about the proper use of WordPress tags by studying the template files that come with the standard WordPress distribution.
I should mention that the reason I have comments disabled because I haven’t yet figured out a style for comments that I like. But I do intend to get comments going here eventually. In the meantime, you can email or Twitter me at the addresses given near the top of the sidebar.
