Two months ago, I was thinking about a blog redesign. To my surprise, I ended up going in a completely different direction from what I had in mind at that time.
Anders Noren, a Swedish designer, released a new theme, Hitchcock. (His themes tend to have literary or creative names, like Hemingway or Rowling or Lovecraft.) I liked its overall look, identified a few things I wanted to change to make the theme more “me,” and started building a child theme.
One thing I wanted was headlines with the thumbnails on the index page. The default with this theme — and I admit it’s a striking look — is graphic thumbnails without text, then when the user hovers over the thumbnail the headline appears. I wanted to make the headline appear from the start.
I admit, I had some trouble at first figuring out the logic of the CSS. I was about to give up entirely, when I took a deep breath, said to myself, “Work the problem,” and when I thought about it I figured out how to make it work the way I wanted. It had to do with opacity, and it required some experimentation to find the right combination.
Then I wanted widget areas in the footers on the single post pages. There I went to Noren’s Lovecraft theme and pilfered the footer widget code from there.
Hitchcock uses Droid Serif as the body text. I wanted to use a different font, and I spent time with Google Fonts looking for the right font. EB Garamond was not the right font for me; it looked terrible on the screen and was largely unreadable. I ended up using Libre Baskerville, a free version of the venerable Baskerville font.
There was one bug to fix; some stylesheets didn’t load correctly in the child theme. I saw three ways of fixing this, and I opted initially for what I considered the medium solution — write a function in the child theme that loaded the stylesheets correctly. Then it occurred to me that it would be better to remove the action that loaded the stylesheets in Hitchcock entirely; it would prevent 404 errors, as well as prevent the Google fonts I wasn’t using (such as Droid Serif) from loading. In principle, I knew what I doing, but I had to experiment with priorities to make sure I was removing the action in the right order. Again, I had to “work the problem.” I knew I’d find the right answer, I simply had to be patient and not give up.
Overall, I’m happy with how this looks. Until the next time I feel like I need to make a change, of course. 🙂
There are a couple more things I want to do, and I may get to them this weekend.
My child theme loads the js for a responsive slider. I have to figure out where to put this slider and how I want to call content for it.
I want to look at making centered images overhang the margins if they’re wider than the content area. Images aligned left or right already overhang; I think a centered wide image would also look good with an overhang. I’m going to look at the Argent theme (which I should note was one of the themes I considered using two months ago).
There are a couple of navigation pages to work on, too.