How to create a theme for Ghost

You are here:

The blogging platform Ghost has been getting a lot of attention recently due to its recent move from beta to public release (if you somehow haven’t heard of it yet, head over hereand read up).

Like other platforms, Ghost supports third party ‘themes’. In this article we’ll design a simple, responsive and content-driven blog. Then code it into a fully-functional theme for Ghost.

The design

The default theme for Ghost, ‘Casper’, is very clean looking. They put content first, showing off the typography with a modern color palette, so that the focus is on the writing.

We’re going to follow that lead, so our design process needs to start by understanding how Ghost works and what’s available to the user in the back-end. There are 4 main elements that we’ll be able to draw upon from the back-end while designing the theme (apart from the articles/posts themselves obviously) which are:

Blog title
Blog description
Blog logo
Blog cover

All of which can be set in the Settings tab in Ghost. These point the design in an obvious direction of some sort of banner at the top of the page, which contains the title, logo and description and a cover picture as a background.

The home page

So we really only have to design 2 pages, that is the home page, which shows all of the latest posts, and the individual post page. As the design is relatively simple, I’ll show the finished page first, then go over the details again. So here is the “home” page which displays the latest posts:

So as you can see, colourful highlights, along with basic and clean design. Let’s run over the details again. So we’ve got the header, that contains the logo (here I’ve made a little sheet costume for a ghost), the name of the blog and the description.

So if the user chooses a cover photo we’ll put it in as a full-width background image here. If not we’ll go for a solid blue color that’ll be our highlight color as above.

Then we’ve got some content boxes in which we’ll show all the information about each post (title, published date, author, tags) and the excerpt.

Finally we make a simple pagination link and a footer. In the article share box, the footer and all throughout the site we’re using a custom icon font made at Fontello and the font Open Sans from Google Web Fonts. Which we’ll see how to implement later.

The individual post page

This design is very similar to the home page. Except the block in which we enclosed the excerpt before will now stretch full-height and show all the content. Plus we’ll add an author box at the bottom.

Via How to create a theme for Ghost | Webdesigner Depot