The First Five Things You Should Modify in Ghost 2.0’s Default Theme (Casper)
Note: I’ve updated this for Ghost 3.0 with a new article here.
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 Ghost’s 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).
Try Ghost for 2 Weeks for Free
A couple of other useful posts on modifying a base Ghost installation:
- Add a dynamic table of contents into a Ghost blog using pure Javascript
- Using grids and columns layouts in Ghost — without using Bootstrap
Remove the “Ghost” link
I want to support Ghost. You might notice I write about them a lot! But leaving this 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.
You can also add a custom link here, like Instagram or LinkedIn.
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.hbsLook 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="https://ghost.org" target="_blank" rel="noopener">Ghost</a>I replaced it with this:
<a href ="https://linkedin.com/in/hoosh/" target="_blank" rel="noopener">LinkedIn</a>Add an Instagram or LinkedIn icon (and remove the Twitter one)
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.)
For Instagram, create a file called in content/themes/casper/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>For LinkedIn, similarly, create a file called in content/themes/casper/partials/icons called linkedin.hbs. Here’s the code for the LinkedIn SVG:
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"width="26" height="26"viewBox="0 0 192 192"style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,192v-192h192v192z" fill="none"></path><g fill="#ffffff"><g id="surface1"><path d="M156,0h-120c-19.875,0 -36,16.125 -36,36v120c0,19.875 16.125,36 36,36h120c19.875,0 36,-16.125 36,-36v-120c0,-19.875 -16.125,-36 -36,-36zM59.36539,162.98077h-29.82693l-0.17307,-89.30769h29.82692zM43.70192,61.99038h-0.17308c-9.75,0 -16.03846,-6.72115 -16.03846,-15.08653c0,-8.56731 6.49039,-15.0577 16.41347,-15.0577c9.92308,0 16.00961,6.49038 16.21153,15.0577c0,8.36538 -6.31731,15.08653 -16.41346,15.08653zM162.77885,162.98077h-30.08654v-48.51923c0,-11.74039 -3.11538,-19.73077 -13.61538,-19.73077c-8.01923,0 -12.34615,5.39423 -14.42308,10.61538c-0.77885,1.875 -0.98077,4.44231 -0.98077,7.06731v50.56731h-30.23077l-0.17308,-89.30769h30.23077l0.17308,12.60577c3.86538,-5.97116 10.29808,-14.42308 25.70192,-14.42308c19.09616,0 33.37501,12.46154 33.37501,39.25961v51.86539z"></path></g></g></g></svg>Then change the code inside content/themes/casper/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>
{{/if}}That’s the Twitter link. You can leave it, or replace it. To make a LinkedIn one:
<a class="social link" href="https://linkedin.com/in/hoosh" target="_blank" rel="noopener"> {{> "icons/linkedin"}}</a>And there you go!
Change the Casper theme title font size
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:
<style> .site-title { font-size: 7.0rem !important; }</style>The result:
Change the Casper theme fonts
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)
<style> 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; }</style>What it looks like after:
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 I had to add the !important tag to override the CSS everywhere else.
Here’s the code:
<style>
.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%);
}
</style>
<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="[email protected]">
<textarea class="form-control widerform betterfields" id="message" rows="3" placeholder="This form is awesome!"></textarea>
<button type="submit" class="widerform betterbutton">Send</button>
</form>
You’ll still need to connect it to something, like Mailgun, to send you emails.
Finally: Remember to restart Ghost!
Remember to run this in your Ghost folder:
ghost restart(No, you don’t need sudo!)
And you’re good!
