The following documentation is provided for all users of the Huckleberry Ghost Theme, which is available from ThemeForest.
Getting started with Ghost
For the purposes of this documentation, we assume that you have Ghost up and running. If not, please head on over to http://docs.ghost.org/ and follow through the guide to install and configure your site.
Installing the theme
Main documentation: http://docs.ghost.org/themes/
As of version 0.3.2 of Ghost, this is what you have to do to install a new Ghost theme:
- Using FTP, navigate to the directory on your server where Ghost is installed. Once there, navigate to the
- Upload your theme files to this directory.
- Restart Ghost. How you do this will depend on where you're running Ghost. We host this Ghost blog on Digital Ocean (which has a sweet little Ghost droplet to get you started), and for us, restarting Ghost involves typing
service ghost restartinto the command line.
- Once Ghost has restarted, log into your Ghost dashboard. Navigate to
- In the 'Themes' dropdown menu, select the theme you just uploaded.
- Click 'Save'.
There are a few settings you can use to customize Huckleberry to your needs.
Once you are logged into your Ghost dashboard, click the Settings link. Here, you can enter your blog's title and description, as well as upload a logo and cover.
If you upload a logo, this will be displayed instead of the blog title in the header of the theme.
If you upload a blog cover, this will be displayed on the index page.
For best results, we recommend a cover image that is 768px wide.
A note about retina images
Huckleberry comes pre-loaded with retina.js, a script which will look for retina versions of any images it finds in your page and display them to retina-ready screens. It does this by taking the file name and appending
@2x before the file extension. For example, if you have an image with a file name of
funnycatphoto.jpg, retina.js will look for a file called
Using this in Ghost requires a little bit of an odd workflow at the moment, though this is certainly something that we hope will improve as Ghost itself evolves. Here's how you would set up retina versions of your photos:
- Use the Ghost image uploader to upload the retina version first. Note: This should be exactly 2x the height and width of the original version.
- Save the post or settings.
- Once you have uploaded this image, delete it and upload the standard version.
- Save the post or settings.
This process will apply for images within posts, as well as your blog logo, cover and author profile and cover images.
You can also configure your user-specific settings, under the User tab. Here, you can upload your profile picture, an optional cover and enter your details. Your name, bio and website link will be shown below each blog post, as well as your profile pic and cover (if you upload one).
Huckleberry is designed to provide you with a rich Ghost blogging experience, and is geared towards Ghost's Markdown editor. If you're not really that familiar with Markdown, we strongly recommend taking a look at the Markdown syntax document at http://daringfireball.net/projects/markdown/syntax
That said, Huckleberry does pack a few extra HTML classes that are designed to give you some additional options when crafting your posts.
In addition to the outline below, you can view this online at http://theme-ghost.net/all-the-custom-classes/.
You can use the
post-intro class to start your post emphatically.
post-intro text is larger than standard body text.
<p class="post-intro">This is my intro text.</p>
Fullwidth and outer width
Huckleberry includes a couple helper classes that are designed to allow you to wrap a given set of text (or other element, such as an image) past the width of the main post column.
To have a fullwidth image, use the
<div class="wrap-full"> ![Bert Humphries](/content/images/2013/Oct/bert_humphries.jpg) </div>
Or you can wrap an element to be wider than the main post column, but not quite fullwidth with the
<div class="wrap-wide"> ![Bert Humphries](/content/images/2013/Oct/bert_humphries.jpg </div>
There are some simple classes included for aligning your text.
<p class="align-left">This text is aligned to the left. Which is the default anyway.</p>
<p class="align-right">This text is aligned to the right.</p>
<p class="align-center">This text is aligned to the centre.</p>
We can also float elements to the left and right:
Left floated blockquote
<blockquote class="float-left">This is a left-floated blockquote.</blockquote>
Right floated blockquote
<blockquote class="float-right">This is a right-floated blockquote.</blockquote>
Changing the theme look & feel
If you're comfortable with CSS and HTML, you can dive into the template files and make any changes you would like to make. However, please be aware that if we provide updates to the theme in future, you will need to be sure to re-integrate your changes.
The CSS files were created using SASS. If you are familiar with SASS, you can easily make changes to the main theme colour and font size, amongst other things.
Changing the theme colour using SASS
huckleberry/assets/css/post.scss (the change will need to be made in both).
There are three variables that refer to the main theme colour:
$main-shade-light. Change these to the colours you want and re-build the CSS file.
To find shades of your main accent colour, we recommend to 0to255 tool.
Changing the theme colour with CSS
If you don't want to use SASS, you can instead edit the CSS files directly. The files to edit are
The easiest way to change the colours is to do a find and replace. These are the colours you should look for:
#4a5689The primary accent colour.
#edeff5A light shade of the accent colour.
#f8f9fbAn even ligher shade of the accent colour.
As above, to find shades of your main accent colour, we recommend to 0to255 tool.
- ScrollTo: https://github.com/balupton/jquery-scrollto
- Retina.js: http://retinajs.com
- History.js: https://github.com/browserstate/history.js
- Ajaxify: https://github.com/browserstate/ajaxify
- Fitvids: http://fitvidsjs.com/
How can we help you?
If you have found a problem with the theme, please let us know via the product page on ThemeForest. You can also contact us directly via our profile page: themeforest.net/user/Studio164a/?ref=Studio164a