Huckleberry Documentation

The following documentation is provided for all users of the Huckleberry Ghost Theme, which is available from ThemeForest.

Important links:

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:

  1. Using FTP, navigate to the directory on your server where Ghost is installed. Once there, navigate to the /content/themes/ directory.
  2. Upload your theme files to this directory.
  3. 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 restart into the command line.
  4. Once Ghost has restarted, log into your Ghost dashboard. Navigate to /ghost/settings/general/.
  5. In the 'Themes' dropdown menu, select the theme you just uploaded.
  6. Click 'Save'.

Theme configuration

There are a few settings you can use to customize Huckleberry to your needs.

General settings

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 funnycatphoto@2x.jpg.

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:

  1. 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.
  2. Save the post or settings.
  3. Once you have uploaded this image, delete it and upload the standard version.
  4. 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.

User settings

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).

Using Huckleberry

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/.

Introductory text

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 wrap-full class.

<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 wrap-wide class:

<div class="wrap-wide">
![Bert Humphries](/content/images/2013/Oct/bert_humphries.jpg
</div>

Text alignment

There are some simple classes included for aligning your text.

Left alignment

<p class="align-left">This text is aligned to the left. Which is the default anyway.</p>

Right alignment

<p class="align-right">This text is aligned to the right.</p>

Centre alignment

<p class="align-center">This text is aligned to the centre.</p>

Floating

We can also float elements to the left and right: float-left and float-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

Open up huckleberry/assets/css/style.scss and 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-color, $main-shade and $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 huckleberry/assets/css/style.css and huckleberry/assets/css/post.css.

The easiest way to change the colours is to do a find and replace. These are the colours you should look for:

  • #4a5689 The primary accent colour.
  • #edeff5 A light shade of the accent colour.
  • #f8f9fb An even ligher shade of the accent colour.

As above, to find shades of your main accent colour, we recommend to 0to255 tool.

Credits

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

Profile of Eric Daams

Eric Daams

We are a small designer & developer team based in Melbourne and Darwin, Australia. And once upon a time, before we had wives and kids, we were housemates.