How I customized Ruby for this site

In this post, I'll walk you through some of the changes I made to the out-of-the-box Ruby theme to make my website. I like starting from a theme that does most of what I want already. It's easier to tweak than to start from zero, and Ruby is pretty close. I'll walk you through how to make a similar site, using a demo 'trail volunteers' site.

Here's how it looks before modification:

I love the cards, but I don't love how Ruby treats featured posts. I want my featured posts first, because I'm going to use that to pin my 'about me' post at the start. I also didn't want the dark overlay, because I'm going to use my avatar and I want it to be full color.

I use Chrome's inspection tool to determine that the each card lives in an <article> (within .post-feed), and the featured ones have a "featured" class. So here's my code injection to put all the featured articles first:

.post-feed .featured {order: -1;}

And then to remove the shadow:

.post-feed .featured .post-link:before {background: none;}

Don't be like me (every single time) and forget to wrap your css style injections in a <style> tag, and then wonder why it isn't working, ok?

Here's what those two lines of code injection got me:

I'm not a big fan of "read more" in this theme. It feels unnecessary, given that each article is very clearly a card, and clicking anywhere on the card works. So I added

.post-feed .post-footer {display: none;}

to suppress that section.

Fixing the image height in posts

Images that are taller than the page annoy me. In the example below, the image is actually taller than can be seen on the screen at once! Yes, I could crop my images, but I'd rather that the theme took care of the display for me, making taller images fit nicely on the page.

So I add the following code injection:

.gh-article-image img {
    max-height: 90vh;
    object-fit: contain;
}

It's not a huge change, but I much prefer seeing the whole image on the page at once.

I hope this is helpful to you as you customize your Ghost theme to do whatever you want it to do!

Hey, before you go... If your finances allow you to keep this tea-drinking ghost and the freelancer behind her supplied with our hot beverage of choice, we'd both appreciate it!

Buy me a tea ☕️