Steam
Steam is a minimal and responsive theme for Ghost, largely based on Vapor by Seth Lilly.
It features a clean and essential style with single column layout and two colors, perfect for focusing on text.
With customizable partials and some nice javascript enhancements, Steam is ideal for any kind of blog, whether it is about coding, short stories or photographs.
See Steam live here.
Installation
Git - development release
Just clone the repository in the /content/themes
folder of Ghost. Restart Ghost and choose Steam in the settings pane.
$ git clone https://github.com/epistrephein/Steam.git
Zip - stable release
Download the latest stable release of Steam and unzip it in the /content/themes
folder of Ghost. Restart Ghost and choose Steam in the settings pane.
Customization
Activate a custom menu
Replace {{!> menu}}
with {{> menu}}
in default.hbs
, then customize the file partials/menu.hbs
using the given template.
Choose a theme color
By default Steam uses a flat green theme color. To switch to another theme color, first replace {{> theme-green}}
with {{!> theme-green}}
in default.hbs
, then choose your desired color among those available: i.e. to activate the orange theme replace {{!> theme-orange}}
with {{> theme-orange}}
.
To use a custom color, replace instead {{!> theme-customcolor}}
with {{> theme-customcolor}}
and change the three occurrences of #111111
and #000000
in partials/theme-customcolor.hbs
with the colors you prefer.
Customize the social icons
Change the given a href
addresses in partials/footer-social.hbs
or replace the icons with the ones you prefer using the Font Awesome list, e.g. to add a Facebook icon add
<a href="https://www.facebook.com/username" target="_blank" title="Facebook"><i class="fa fa-2x fa-fw fa-facebook"></i> <span class="hidden">Facebook</span></a>
If you don't want the social icons section, replace {{> footer-social}}
with {{!> footer-social}}
in default.hbs
.
Customize the blog signature
Replace the text, email address and author name in the file partials/footer-author.hbs
. To remove it, replace {{> footer-author}}
with {{!> footer-author}}
in default.hbs
.
Hide post author section
If you don't want to show the author section (which is profile picture, name with link to website and bio) at the bottom of posts, replace {{> post-author}}
with {{!> post-author}}
in post.hbs
.
Activate the comments
Replace {{!> comments-disqus}}
with {{> comments-disqus}}
, {{!> comments-facebook}}
with {{> comments-facebook}}
or {{!> comments-google-plus}}
with {{> comments-google-plus}}
in the post.hbs
file.
To enable Disqus comments, remember to add your actual Disqus ID in partials/comments-disqus.hbs
.
Custom favicon and apple-touch-icon
To customize the favicon and/or apple-touch-icon of your blog place your 16x16 favicon.ico
and 152x152 appletouchicon.png
in /assets/img/
.
JavaScript
Smooth Scroll
Steam features Smooth Scroll: the default settings are at the bottom of default.hbs
<script>
smoothScroll.init({
speed: 800,
easing: 'easeInOutCubic',
updateURL: false,
offset: 125,
});
</script>
To use Smooth Scroll for footnotes, first locate the word or sentence in edit mode where you want to put the link to the footnote (generally a number of an ascending order) and add the following code
<sup id="reference1"><a data-scroll href="#footnote1">1</a></sup>
where reference1
is the unique name of the footnote link, footnote1
is the unique name of the footnote itself and 1
the number of the note. Don't forget to add data-scroll
if you want to benefit of the Smooth Scroll functionality. Do this for every footnote link you want to add, increasing the number of each identifier.
Next, at the end of the post insert
---
<ol class="notes">
<li id="footnote1">Here is the notation that the sentence above leads up to. <a data-scroll href="#reference1">↩</a></li>
</ol>
which is the actual body of the footnote and is linked to the link you add before. Make sure footnote1
and reference1
match the link that calls them. Insert as many <li>
tags as your footnote links and don't forget to add data-scroll
or Smooth Scroll won't work.
highlight.js
Steam features also highlight.js for syntax highlighting: you can disable it by removing the line
<script>hljs.initHighlightingOnLoad();</script>
at the bottom of default.hbs
.
The css defining the colors is assets/css/github.css
, which is a slighty modified version of this style.
License
Steam is a fork of Vapor - Copyright (c) 2013-2014 Seth Lilly.
Steam is open source and released under the MIT License, feel free to contribute.