A Thousand Words
I couldn’t help myself. Despite this being the last weekend before dead-week and finals, I spent far too much of the past few days redesigning my website. What started as an interest in improving the typographic elements and repairing a few minor issues gradually grew into a lesson on .css and Wordpress styling.
I was aiming for something that lent itself a bit more to the typographic elements of a blog, and would be less dependent on big grey rectangles to convey organization. Hopefully the new design works, but if you see anything misbehaving please let me know.
If you’re interested in how I came to soil my hands with the blood of the internet craft my own stylesheet, read on!
I’m currently using the K2 theme, which is what generates all the functional elements of my site, like posts, pages, comments, archives, etc. On top of that is my own stylesheet named ‘Milk+Salt’ (after this photo), which is what determines the visual presentation of K2’s functionality.
K2’s ability to load different styles is rather unique for a Wordpress theme, and is part of what sets it apart. Whereas most other themes have a single built in to them, K2 is more of a framework upon which you can easily load many different style, without having to mess around with the core files. When you write a custom stylesheet for K2, it doesn’t need to define each individual element on the page, because K2 has a core stylesheet built in. Rather, you only need to define the elements that you want to change.
So the process of designing my own style consisted mainly of making changes to a clone of K2’2 core stylesheet, and altering the properties of one element at a time in order to see how they worked. What I ended up with is more the result of repeated trial and error than it is the product of a concerted creative effort.
While the end result isn’t exactly what I wanted, it’s close enough for me to stop messing around with code. It’s not uncommon for designers to leave comments within .css files to help explain what portions of the page specific elements control, such as “Resets font-size to 1.2em”, or “Requires cell spacing set to 0px”. Many of the comments I left for myself were more along the lines of “Adjust header height, maybe?”, and “Do not touch, breaks everything somehow!”.
I’ve found in myself a growing interest in typography, specifically on the web, and much of the inspiration for this redesign came from an increased awareness and appreciation of good web typography. I owe this interest almost entirely to the awesome type-nerd-blog I Love Typography. (Run by a Johno, surprise!) Other inspiration was certainly drawn from Jon Tangerine, Daring Fireball, Antipixel, among others.
Also, I just had to have a Colophon. All the cool bloggers are doing it, don’t you know?