I updated the theme on my blog. I was previously using a customized version of AutoFocus, and it looked like this:

Sorry about the size, it was a cached screenshot.

Now I’m using Editor, also customized. Everything I did to the site is something you can do using the Custom Design included in the Premium upgrade (Editor is a free theme).

I knew I was ready for a change, but didn’t have anything specific in mind. Typically, this means that I end up with something pretty different but not difficult to accomplish. If you come up with a really specific vision you’ll have to actually make it work – which is great, of course, and will force you to hone your skills. But when you sort of wander into a new look on your site, the stakes are pretty low (and things may continue to get tweaked for awhile, but for now I’m happy with it).

So the first thing I did was browse the themes in my Appearance > Themes, and just previewed a few. I considered Twenty Fifteen, but ultimately chose Editor for reasons unknown.

Next, I went into my Customizer and fiddled with the fonts. I had been using Raleway (love it) with Chaparral Pro. I updated to Calluna Sans for the headers and kept Chaparral Pro for the body (because it’s the prettiest). I changed the sizes around until it felt right. The first thing that I noticed was that the site title was not working for me in all caps, so I dashed off a little CSS to change that to lowercase, and then I went to the Colors section to pick out the ones I wanted to use, before diving more seriously into the custom CSS.

A couple notes: if you are curious about CSS but don’t know where to start, go here to our CSS Forums. Poke around, ask questions, read answers. I wrote a series of articles on getting started with CSS over here at the DailyPost (ahem), which I recommend if you don’t know how to even begin. Also, Google things. I Googled “fuzzy text css” and got a hit right away for my favorite CSS site, css-tricks.com.

So anyway, I started out by wanting to sort of ease back everything that wasn’t my headings and my content. I started with tweaking the colors, and then added in a blurry shadow with low opacity on the text itself, so it would still be readable, even with somewhat small point size. I adjusted the color on my page navigation, so it stood out a bit more. That got us here:

Or, it almost did, actually. It took me a few tries to get the icons in front of the meta data (Categories, comments, edit – you won’t see the edit icon when you view my site, but I will!) to blur acceptably. Since they’re images, the text shadow ended up just blurring them out of visibility, so some tweaks were needed to just them.

And that was nice, but it seemed like something should happen when you hovered over the anchor links. So I added a transition that would change the color of the anchor and if it was blurred, to sharpen it up to “normal” – or, slowly remove the shadow (however you want to think of it).

A screenshot doesn’t do this justice – you only see the end change, so I recommend hovering your mouse over any of the meta data.

Then I added the same thing to the navigation.

I looked at a post page, to see if I wanted to make changes there, and while I am still weighing it, I decided I liked that my by-line and post title were sharp and the same color, and the site-title is still red.

To me, it feels like you have fewer distractions to reading the post itself at this point. But again, more edits may come.