September 1, 2018

The First Five Things You Should Modify in Ghost 2.0's Default Theme (Casper)

If you're new to using Ghost, these are the first five things you should modify in the default theme to make it your own.

The First Five Things You Should Modify in Ghost 2.0's Default Theme (Casper)

I hate messing with themes. I always break them. But you just have to, to get it looking like how you believe they should look.

I have written before about why I love Ghost. I wanted to add here the first things you should modify in the Ghost default theme, before you go out shelling bucks on another theme (which you'll probably also have to modify, so you may as well push this one as far as you can).

I want to support them Ghost. You might notice I write about them a lot! But leaving this there in the default theme seems a little unprofessional, and takes away from the fledgling brand you're building. So here's how to remove it.

I also added an Instagram link. Why not?

To do this, you need to open up a terminal window and edit a file:

sudo vim /var/www/your-ghost-dir/content/themes/casper/default.hbs

Look for the section near the bottom where it says Ghost. You can do a search if you like, saying /Ghost.

{{#if @blog.twitter}}<a href="{{twitter_url @blog.twitter}}" target="_blank" rel="noopener">Twitter</a>{{/if}}
<a href="" target="_blank" rel="noopener">Ghost</a>

I replaced it with this:

<a href ="" target="_blank" rel="noopener">Instagram</a>

2. Add an Instagram icon. And remove the Twitter one (who uses Twitter?)

This is my personal site, and I don't really use Twitter, so didn't want to display it. I DO use Instagram, so did want to display that.

There's a few steps to this. You need to firstly create an SVG file for the Instagram icon. (We should be using font awesome, but that's another story.)

Create a file called in partials/icons called instagram.hbs. Here's the code:

<svg viewBox="0 0 512 512"><path d="M256 109.3c47.8 0 53.4 0.2 72.3 1 17.4 0.8 26.9 3.7 33.2 6.2 8.4 3.2 14.3 7.1 20.6 13.4 6.3 6.3 10.1 12.2 13.4 20.6 2.5 6.3 5.4 15.8 6.2 33.2 0.9 18.9 1 24.5 1 72.3s-0.2 53.4-1 72.3c-0.8 17.4-3.7 26.9-6.2 33.2 -3.2 8.4-7.1 14.3-13.4 20.6 -6.3 6.3-12.2 10.1-20.6 13.4 -6.3 2.5-15.8 5.4-33.2 6.2 -18.9 0.9-24.5 1-72.3 1s-53.4-0.2-72.3-1c-17.4-0.8-26.9-3.7-33.2-6.2 -8.4-3.2-14.3-7.1-20.6-13.4 -6.3-6.3-10.1-12.2-13.4-20.6 -2.5-6.3-5.4-15.8-6.2-33.2 -0.9-18.9-1-24.5-1-72.3s0.2-53.4 1-72.3c0.8-17.4 3.7-26.9 6.2-33.2 3.2-8.4 7.1-14.3 13.4-20.6 6.3-6.3 12.2-10.1 20.6-13.4 6.3-2.5 15.8-5.4 33.2-6.2C202.6 109.5 208.2 109.3 256 109.3M256 77.1c-48.6 0-54.7 0.2-73.8 1.1 -19 0.9-32.1 3.9-43.4 8.3 -11.8 4.6-21.7 10.7-31.7 20.6 -9.9 9.9-16.1 19.9-20.6 31.7 -4.4 11.4-7.4 24.4-8.3 43.4 -0.9 19.1-1.1 25.2-1.1 73.8 0 48.6 0.2 54.7 1.1 73.8 0.9 19 3.9 32.1 8.3 43.4 4.6 11.8 10.7 21.7 20.6 31.7 9.9 9.9 19.9 16.1 31.7 20.6 11.4 4.4 24.4 7.4 43.4 8.3 19.1 0.9 25.2 1.1 73.8 1.1s54.7-0.2 73.8-1.1c19-0.9 32.1-3.9 43.4-8.3 11.8-4.6 21.7-10.7 31.7-20.6 9.9-9.9 16.1-19.9 20.6-31.7 4.4-11.4 7.4-24.4 8.3-43.4 0.9-19.1 1.1-25.2 1.1-73.8s-0.2-54.7-1.1-73.8c-0.9-19-3.9-32.1-8.3-43.4 -4.6-11.8-10.7-21.7-20.6-31.7 -9.9-9.9-19.9-16.1-31.7-20.6 -11.4-4.4-24.4-7.4-43.4-8.3C310.7 77.3 304.6 77.1 256 77.1L256 77.1z"/><path d="M256 164.1c-50.7 0-91.9 41.1-91.9 91.9s41.1 91.9 91.9 91.9 91.9-41.1 91.9-91.9S306.7 164.1 256 164.1zM256 315.6c-32.9 0-59.6-26.7-59.6-59.6s26.7-59.6 59.6-59.6 59.6 26.7 59.6 59.6S288.9 315.6 256 315.6z"/><circle cx="351.5" cy="160.5" r="21.5"/></svg>

Then change the code inside partials/site-nav.hbs:

{{#if @blog.twitter}}
	<a class="social-link social-link-tw" href="{{twitter_url @blog.twitter}}" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>

3. Change the font size of the title.

I thought the title font was small. I should make a logo, but later!


Now, making this level of change means you have to change the CSS. I just edited it globally in 'code injection', to avoid having to change the template.

I added this code:

    .site-title {
        font-size: 7.0rem !important;

The result:

After. It's slightly bigger.

4.Change the fonts themselves.

Want to show the whole website in Comic Sans? I just like the fonts used in the official Ghost blog. So I'll use those.


I added this code in the 'Code Injection' section (between the same <style> tags, but I included these in case you didn't do the heading modification)

    a, abbr, acronym, address, applet, article, aside, audio, big, blockquote, body, canvas, caption, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, ul, var, video {
	font-family: Whitney SSm A, Whitney SSm B, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif !important;

What it looks like now:


5. Add a contact form that looks good.

Everyone needs forms for something! Here's a basic form:

Oh, man that's ugly!

Here's one that looks attractive. I used the styling elements from some CSS around the web. Note aI had to add the !important tag to override the CSS everywhere else.

Here's the code:

	.widerform {
        font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;
		display: block !important;
        margin: .5rem;
        padding: .375rem .75rem;
        width: 100% !important;
        align-items: flex-start !important;
        box-sizing:border-box !important;
    .betterfields {
        color: #495057 !important;
        background-color: #fff !important;
        background-clip: padding-box !important;
        line-height: 1.5 !important;
        border-radius: .5rem !important;
        border: 1px solid #ced4da !important;
        transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out !important;
    .betterfields:focus {
        border-color: #007bff !important;
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
    .betterbutton {
        color: #fff !important;
        background-color: #007bff !Important;
        border-color: #007bff !important;
        user-select: none !important;
        line-height: 1.5 !important;
        border-radius: .5rem !important;
        border: 1px solid transparent !important;
        transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out !important;
    .betterbutton:hover {
        filter: brightness(80%); 

<form class="widerform">
    <input type="text" class="form-control widerform betterfields" id="name" placeholder="Your name">
    <input type="email" class="form-control widerform betterfields" id="email" placeholder="">
    <textarea class="form-control widerform betterfields" id="message" rows="3" placeholder="This form is awesome!"></textarea>
    <button type="submit" class="widerform betterbutton">Send</button>

You'll still need to connect it to something, like Mailgun, to send you emails.