Post Format

Have Your Sorbet and Eat It Too

One of the dangers of working for Automattic is being acutely aware of all the gorgeous new themes that are launched on WordPress.com. It’s hard for me to stick with one theme for very long! (If you want to stay in the know, too, you can follow WordPress.com News or browse through the theme announcements there.)

I recently switched my blog to the Sorbet theme, created by my talented coworker Caroline. I wanted to share how I tweaked it from the out-of-the-box theme into the custom design you can see on my blog now. Here’s what I started with:

sorbetlg

1. Fonts & Colors

To start, I spent a few minutes picking out the fonts and colors I wanted on my blog. Picking out fonts is tough! As I’ve mentioned before, selecting and pairing fonts takes practice. So I decided to stick with one font, Calluna Sans, for everything.

Then I moved on to colors. Sorbet has a couple nice featured color palettes, and I almost went with one of those. But I can’t resist browsing the options, and eventually I found a color palette that was almost perfect. So I picked that palette, replaced one of the colors (or was it two? I played around enough to lose track), and saved those choices.

custom sorbet - fonts and colors

2. Titles & Widgets & Comments (oh my!)

After picking my fonts and colors, I added some quick tweaks to the design with CSS. I started with the site title. Since I don’t use a tagline on my blog, the title looked little small and lonely in the header. I doubled the size with this CSS:

.site-title {
font-size: 2em;
}

Next I wanted to tweak the sidebar design, to give my widgets a background. (The sidebar content felt like it was floating in space a bit, and I wanted to ground it.) I didn’t want the widgets to stand out too much, so I went with a translucent version of the white background behind the posts. I decided to add a little top border, too, to bring through the border design from the posts. Here’s the CSS I used for that:

.widget {
background: rgba(255,255,255,0.5);
padding: 0 1em;
border-top: .5em solid #242d36;
}

Finally, I made a tiny adjustment to the post meta (information like the publish date/time, post tags, and link to leave a comment). I felt like the comment link was hidden among all the other meta data, so I pushed it onto its own line:

.comments-link {
display: block;
}

And then I was done. At least, for a few hours. 🙂

custom sorbet - css round 1

3. Rounded corners

After staring at those hard angles and considering my somewhat softer font choice, I decided to try out rounded corners. Here’s where things got tricky.

If you’ve made rounded corners before, you may be familiar with this CSS:

#secondary .widget {
border-radius: 5px;
-webkit-border-radius: 5px;
}

That is nice and tidy, and it gave my widgets rounded corners without any problems. But it didn’t work on the posts. Why not?

Well, did you notice the gorgeous way that Sorbet adds featured images to the top of the post? The tricky bit is that the featured image is a separate HTML element (a figure) that is then followed by the post element (an article). So I had to style each one separately:

.entry-thumbnail img {
border-top-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
border-top-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
}

.post, .page {
border-bottom-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
}

That worked perfectly, except … what about posts with no featured image? They ended up with rounded corners on the bottom and right angles on the top:

custom sorbet - no featured image

I shook my fist at that for a while, until a thought occurred to me: Why not create a faux featured image for those posts? I started with the idea of extending the white background up above the top border of the post. That ended up looking a little bland, so I grabbed the header background color and went to town.

First, I dug around with my browser inspector to find an HTML element I could use. And there I saw .hentry:after — a little element with border styling, just begging to be co-opted for this purpose. I added .hentry:after to my .entry-thumbnail img CSS to give it rounded corners, and then I styled it further with this:

.hentry:after, .comment-body:after {
border-top: 60px solid #242d36 !important;
top: -60px;
z-index: -1;
}

That did the trick. A fun top border for posts without a featured image. My rounded corners were complete.

4. Cleanup

Of course, that wasn’t really it. I had to clean up a number of odds and ends:

  • Rounded corners on buttons
  • Margins between posts
  • Margins on post archives and single posts/pages
  • Comment styling

And I have a feeling I’ll keep cleaning things up here and there as I find them. Just while writing this post, I had to add little tweaks for styling blocks of code and galleries. But that’s part of the fun! (If you notice anything that looks out of whack, do let me know so I can fix it up.)

And now, time for a bowl of sorbet. 🙂

Advertisements

Posted by

Excellence Wrangler for Automattic, the company behind WordPress.com. Linguaphile and Translator. Tester.