UI

How to create a theme for Ghost

Wdd Logo.
By WDD Staff
October 28, 2013
How to create a theme for Ghost.

[“

\"thumbnail\"The blogging platform Ghost<\/a> 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 here<\/a> and read up).<\/p>\r\n

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.<\/p>\r\n

The design<\/h1>\r\n

The default theme for Ghost, ​‘Casper’, is very clean looking.\u00a0They put content first, showing off the typography with a modern color palette, so that the focus is on the writing.<\/p>\r\n

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.\u00a0There 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:<\/p>\r\n

\r\nBlog title<\/li>\r\nBlog description<\/li>\r\nBlog logo<\/li>\r\nBlog cover<\/li>\r\n<\/ul>\r\n

All of which can be set in the Settings<\/em> 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.<\/p>\r\n

The home page<\/h2>\r\n

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:<\/p>\r\n

\"1\"<\/p>\r\n

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.<\/p>\r\n

\"2\"<\/p>\r\n

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.<\/p>\r\n

\"6\"<\/p>\r\n

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.<\/p>\r\n

\"3\"<\/p>\r\n

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 

WDD Staff

WDD staff are proud to be able to bring you this daily blog about web design and development. If there’s something you think we should be talking about let us know @DesignerDepot.

Popular Posts

Read Next

Are Simple Websites Better For Business?.

Are Simple Websites Better For Business?

As web design technologies raise the bar on what it is possible to achieve on a realistic budget, there’s a rising deba…
By Simon Sterne
Apple Opts for AR over VR at WWDC.

Apple Opts for AR over VR at WWDC

An Apple VR headset has been one of the most widely-rumored devices of the last few years, and it was finally settled a…
By Ben Moss
Exciting New Tools for Designers, June 2023.

Exciting New Tools for Designers, June 2023

We’re halfway through 2023 already, and the number of incredible apps, tools, and resources for designers is mounting.
By Paddi MacDonnell
3 Essential Design Trends, June 2023.

3 Essential Design Trends, June 2023

This month we are focusing on three trends within a bigger website design trend – different navigation menu styles and …
By Carrie Cousins
15 Best New Fonts, May 2023.

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …
By Ben Moss
10+ Best Tools & Resources for Web Designers and Agencies (2023 updated).

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …
By WDD Staff
20 Best New Websites, May 2023.

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…
By Paddi MacDonnell
How to Find the Right White Label Website Builder for Your Agency.

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…
By WDD Staff
Exciting New Tools For Designers, May 2023.

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…
By Paddi MacDonnell
3 Essential Design Trends, May 2023.

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…
By Carrie Cousins
10 Best AI Tools for Web Designers (2023).

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…
By Simon Sterne
10 Best Marketing Agency Websites (Examples, Inspo, and Templates!).

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …
By WDD Staff

Join 500,000+ Subscribers

Get exclusive access to freebies and news. We don’t spam, rent or sell your email. See our Privacy Policy.