Fork

Esquire is a cool theme, but it was really created for WordPress and tumblr. Some kind soul converted it to a Blogger theme, but it was a rather botched job that resulted in a deformed Frankensteinian abomination. Fortunately, Blogger, unlike WordPress, allows you to directly edit your site's HTML/CSS, so despite my limited knowledge of those languages I was able to monkey around in there and fix most of the problems. Here's what I've fixed so far:

  • The date box: it was displaying "undefined." I traced the problem to a bit of javascript that grabbed the date from the post timestamp. Blogger has a different timestamp format than WordPress/tumblr; by default it only uses the time, whereas the other sites use time, month day, year. Changing my timestamp in the Blogger settings fixed the issue without any coding required.
  • The sidebar: it was an absolute mess. It tried to splice my Google+ information into it and the result was quite unsightly. Fortunately this could be fixed from the Blogger settings as well.
  • There was a giant orange dot that highlighted the first letter of each post. Jesus that thing was hideous, I don't know what the designer was thinking. It was easy to fix, though; I just deleted the ".text .content > p:first-child:first-letter" code.
  • The font: the title font especially was unacceptable because it made 0 look like o. I checked its font-family and it was trying to use Adobe Caslon Pro. I don't have Adobe Caslon Pro because I'm not an art major, so it was defaulting to Garamond. I switched it to Segoe and the monospace font to Consolas (both developed for Windows, by the way).
  • The black bars -- what are the black bars for? There was one in the sidebar and one in the footer. Just had to excise a few lines of CSS and they were banished forever.
  • Hyperlinks: they were just underlined, and the background would change to yellow on mouse over. That wasn't so bad, but it didn't jive well with the tag, so I changed it to the standard blue.
  • The credit section: three full lines? Come on. I removed everything but the theme/author name, because I'm not a jerk.
  • The footer logo: I replaced it with my own. Maybe I am a bit of a jerk. 
  • The overall bloat: this theme apparently requires over 2200 lines of code. I removed lots of WordPress/tumblr - specific stuff but it's still around 2000 lines. Maybe that's normal though. 

For reference, here's what it looked like on day 1:


There were also a few things that I touched up that weren't the theme's fault:

  • Code blocks: there weren't any. Just the <code> tag. So multiline stuff was all different lengths, as you can see in the screenshot above. Fortunately it wasn't too difficult to change the minimum width, but allowing code blocks to extend past 70 characters if needed has proved much harder.
  • Code colors: I added a bunch of custom tags to make color-coding easier. 
  • Images: images were being resized to fit the 560px postbody. Ugh. I don't think I'll be embedding lots of large images, but just in case I removed the size restriction.

That's about all I can think of for now, but I'm sure the work will continue for quite a while. Here's the To Do list:

  • Create custom codeblock tag (fixed 8/12/12)
  • Make code blocks variable width (fixed 8/12/12)
  • Reduce bloat where possible 

2 thoughts on “Fork

  1. Hi, maybe you can help me? I use esquire and I have a really large space between posts. It's not particularly bad, but it's a bit annoying.

    ReplyDelete
  2. Hmm. I took a look at your page's source and it looks like the culprit is a google ad section (div class='inline-ad'). You may be able to get rid of it by snooping around your blog's settings. If not, a quick google (ironic, no?) lead me to someone with a similar problem, who suggested adding the following to the end of your site's CSS:

    div.inline-ad { display: none; }

    That should do the trick.

    ReplyDelete

Theme: Esquire by Matthew Buchanan.