Menu

Creating a Custom Ghost Theme

Once you have Ghost set up, you will probably want to start messing around with different themes. Ghost comes with the Casper theme by default, and this basic theme acts as a good starting point for customisation.

Additionally, I removed the small logo on the left of the main page, and increased its size on the post pages, by simply removing the following lines in the main-nav class of the index.hbs header:

{{#if @blog.logo}}
<a class="blog-logo" ...
{{/if}}

and modifying the height attribute of the .blog-logo img class:

...
height: 64px;
...

The end result:

Using Different Fonts

The Casper theme uses the Google Fonts API, which is a great way to use custom fonts on your site without any hassle, although it does add to the load time of the page significantly more than using local fonts.

Using the Google Fonts page, you can browse through the fonts and just click Add to Collection for each font you would like. Then click on Use on the bottom right corner, and you can select each of the font weights you want, as well as additional character sets (i.e.latin-ext, cyrillic, etc.).

After selecting which fonts you want, Google automatically generates an html snippet to copy to the head in default.hbs:

I put this right below the {{! Styles'n'Scripts }} comment in default.hbs.

Next, to actually use the fonts, I will edit the assets/css/screen.css stylesheet. To specify the font, I use the font-family attribute, and the font-weight attribute to specify (surprise) the font weight.

First I will change the font for post body and headings:

In body:

...
font-family: 'EB Garamond', serif;
font-weight: 400;
...

In h1, h2, h3, h4, h5, h6:

...
font-family: 'Raleway', sans-serif;
font-weight: 700;
...

Hyperlink Colours

Changing the hyperlink colours is easy as well. I just changed the links to a blue colour when hovered. In assets/css/screen.css:

Backgrounds

My goal for the background/colours is to change the colour of the main-header when there is no cover in the ghost settings, change the title font colour to yellow, and change the colour of the description to light grey.

I also changed the colour of the logo to match the darker background, but that is just changing the image and uploading it again via the Ghost settings panel.

If you have a cover defined in the Ghost settings, none of these changes will matter, and you will instead be editing the normal .page-titlecolor attribute, instead of the .no-cover .page-title attribute.

This logo is also displayed in the top left corner of every page, but this presents an issue: The main page has a dark background but the post pages are white, and my logo happens to be yellow.

I tried adding a drop-shadow, adding a background to the image, and a few other things, but I ultimately decided to create two new images in a new folder under assets: assets/img/post-logo.png and assets/img/post-logo-hover. Then I used a bit of JavaScript to display they darker logo by default and then switch to the yellow logo on hover for an extra bit of pizzaz.

Notice that I used the {{asset "path/to/image"}} built-in helper, rather than a link directly to the file. This makes the theme easier to reuse and modify later, although this method of using an image that is not governed under the @blog-... helper will be an issue if someone wants to use this theme out of the box and doesn't have the knowledge or ability to put their own post page icons in the assets/img/ folder.

At this point, my blog main page looks like this:

Pretty nice!

Adding a favicon

By default, a Ghost blog will use the standard Ghost favicon. To use your own, you just need to add it to the assets folder, and use the built-in {{asset}} helper.

In defaults.hbs, change:

<link rel="shortcut icon" href="{{asset "favicon.ico"}}">

to

<link rel="shortcut icon" href="{{asset "/favicon.ico"}}">

Note the addition of the leading /.

Then simply place your favicon under assets/favicon.ico.

Adding Links and a Bio to the Footer

The footer that appears under each post is found in, you guessed it: post.hbs. Most of the information it displays is from variables defined by using your Ghost dashboard, by clicking on Users and then your username.

However, I still want to add a link to my GitHub and Twitter, and also change some of the hyperlinks from my blog to my personal website.

Adding links to GitHub and Twitter is easy... just use <a href=...>.

But what if I want to have the fancy icons? Well, you can either use something like FontAwesome, or roll your own icon font with Icomoon. I chose the latter, and added the following files generated by Icomoon to the assets/fonts folder:

boo-icons.eot

boo-icons.svg

boo-icons.ttf

boo-icons.woff

Then, I added to the assets/css/screen.css file under the font section:

To choose the colours, I used BrandColors, which gives you the hex value for the colour set of almost any brand.

NOTE: I was unable to get the font icons to work properly as of right now, so I am just using the text for GitHub and Twitter, but I will edit this as soon as I get it working.

Adding Disqus Comments

Ghost has a great tutorial on this here, and there's really not anything else that I would add to that, other than that if you have downloaded my Boo theme then you will have to modify post.hbs and default.hbs to use your own Disqus username.

Also, I added a slim vertical bar between the date and comment items on the loop, by adding the following to assets/css/screen.css:

Syntax Highlighting and Code Snippet Colours

Another blog post has a nice tutorial on how to add syntax highlighting using prism.js.

Getting prism.js to work is super simple. Just head over to PrismJs's Download Page and configure the JavaScript and CSS files and download them. You will have downloaded prism.js and prism.css. Now simply place them in the assets/js/ and assets/css/ folders, respectively.

Other Changes

Over the course of editing the theme, I made a number of small stylistic changes, such as changing colours of buttons, adding small animations, making external links open in new tabs instead of in the same page, etc. By now, you should be able to make any stylistic changes you want for your own theme.