Stretch Ghost Theme

( 1 ) Getting Started

Once you have downloaded the zip file from our website or ThemeForest, unzip it using your standard zip software. When it has finished you should have a folder with the following files & directories inside.

Folder Contents

documentation contains the documentation and code for ‘Google Analytics’ and ‘Disqus.com Commenting system’
dot-stretch.zip The ghost theme files in zip format. ( for installation into Ghost )
other-licenses Licensed of 3rd party assets used in the theme
source-less .LESS CSS pre-processor files.

 

NOTE:

Images shown in the demo are not part of the theme package.

( 2 ) Installing the theme

After unzipping the theme folder place it in /ghost/content/themes/

To switch to your newly added theme:

  1. Restart Ghost. At the moment, Ghost won’t notice that you’ve added a new folder to content/themes so you’ll need to restart it
  2. Login to your Ghost admin, and navigate to /ghost/settings/general/
  3. Select your Theme name in the ‘Theme’ options dropdown
  4. Click ‘Save’
  5. Visit the frontend of your blog and your new theme would be active

NOTE:

  1. Before uploading the theme, we would recommend making a copy of the theme and editing it to set links to your social profiles and to enable your Disqus.com commenting system and Google Analytics.
  2. Images shown in the demo are not provided with the theme. You may download free high resolution images from http://unsplash.com/

( 3 ) GHOST / BLOG SETTINGS

Login to your ghost backend (domain/ghost) and go to the Settings>general

These are the Blog specific settings.

  1. Blog Title: Changes your Blog’s title.
  2. Blog Description: Changes your Blog’s description. Displayed in the centre of home page once you active this theme.
  3. Blog Logo: Upload a Logo for your blog in either ‘.png’, ‘.jpg’ or ‘.gif’. We recommend using ‘.png’ or ‘.gif’ with transparent background.
  4. Blog Cover: Upload your blog cover image in either ‘.png’, ‘.jpg’ or ‘.gif’. To get the best visual experience, we recommend using a high resolution image to cover the entire width of a user’s screen.
  5. Email Address: This is the email admin notifications are sent too. It must be a valid email.
  6. Posts per page: This is how many posts are displayed per page. This should be a numeric value.
  7. Theme: This will list all the themes in your ghost/content/themes directory. Selecting one from the dropdown will change your blog’s look.

( 4 ) Adding Pages

Since Ghost version 0.4, Ghost officially supports pages. The theme version 1.1 has been modified to take use of this. Please find instructions on creating pages and added the links to your theme below:

( 4.1 ) Creating Pages

To create pages follow below steps:

  1. Login in your ghost backend (domain/ghost) and create a new post.
  2. Click on the “Gear Icon” next to the “Save Draft / Update Post” button.
  3. The small window that opens on clicking the icon, allows a checkbox to convert a post to a page. Click on the checkbox labelled “Static Page” and then save and publish your post. Also make note of the URL field, as you would require this later on to add link to this page in your theme.

NOTE:

  • Being a page, posts marked as “static page” would not be available in the general post loop and to make it available to your end user you have to add link to it in your theme.
  • Instructions on how to modify the theme to add links to your newly created pages is given in the next section “Modifying the theme”.

( 5 ) MODIFYING THE THEME

The theme structure consists of these main files:

default.hbs Loads Favicon, CSS and JavaScript files required to run the theme.
index.hbs Contains the loop required to display the full screen cover and the list of posts on the home page.
post.hbs Post Template
page.hbs Static Page Template.
partials/header-blog.hbs Contains header for blog index
partials/header-post.hbs Contains header for posts & pages
partials/post-meta.hbs Displays Post meta information such as data, tags & comment link on Blog & Post pages.
partials/author-details.hbs Contains code to display author details on posts.
partials/social-sharing.hbs Contains sharing links for Twitter, Facebook & Google Plus.
partials/comments.hbs Template to integrate either Disqus (default), Google Plus or Facebook commenting system.
partials/comments-disqus.hbs Contains code to integrate Disqus commenting system
partials/comments-google.hbs Contains code to integrate Google Plus commenting system
partials/comments-facebook.hbs Contains code to integrate Facebook commenting system
partials/pagination.hbs Contains code to show pagination on the blog index page.
partials/footer.hbs Contains footer details.
partials/google-analytics.hbs Contains Google Analytics code
partials/disqus-comment-count.hbs Contains additional code required for displaying comment count from Disqus.
partials/custom/credits.hbs Contains links to Ghost.org displayed in the footer.
partials/custom/copyright.hbs Contains copyright notice.
partials/custom/social-profiles.hbs Contains links to social profiles that is displayed in the header and footer
partials/custom/menu.hbs Contains links to pages.
partials/custom/disqus-shortname.hbs Contains Disqus Shortname
partials/custom/google-analytics-ua-code.hbs Contains Google Analytics UA code.

( 5.1 ) Using Text only logo

The theme currently is optimized for either Image based logo or text only logo. If a logo is uploaded, then it’s displayed by default. If you wish to display the site title instead of the logo, please follow below steps:

  1. Login in your ghost backend (domain/ghost) and go to the Settings>general
  2. Delete the Blog Logo.

( 5.2 ) Setting up cover image

To enhance your website, the theme checks if you have uploaded a cover image. If you have uploaded one, the using CSS & JavaScript, the theme uses the blog cover as a full screen faded background on home page. To upload a cover image:

  1. Login in your ghost backend (domain/ghost) and go to the Settings>general
  2. Blog Cover: Upload your blog cover image in either ‘.png’, ‘.jpg’ or ‘.gif’. To get the best visual experience, we recommend using a high resolution image to cover the entire width of a user’s screen.

( 5.3 ) Social Icons

To update the links to social profiles or add links to new social profiles, you would have to edit a single theme file ‘partials/custom/social-profiles.hbs’ located inside ‘/partials/custom’ folder.

  1. partials/custom/social-profiles.hbs contains the social icons displayed in header & footer.
  2. The icons used are powered by GPL font icons provided by ‘Genericons – http://genericons.com/’. You may visit their site to learn how to add more icons to your other social profiles.

( 5.4 ) Adding links to Static Pages

In earlier section we discussed on how to create static pages. However since there is no UI so far in Ghost App to dynamically create menus, the updated Stretch Theme 1.1 includes a menu placement. Please follow below steps to modify and add your own links.

  1. Open ‘partials/custom/menu.hbs’ and modify the URL to add links to your static pages.

( 5.5 ) Updating links in Footer

Links to Ghost.org & copyright notice is further separated from footer.hbs to allow easier upgrade to new theme version. Please find the details below

  1. To update the credit links, edit ‘partials/custom/credits.hbs’.
  2. To update the copyright link, edit ‘partials/custom/copyright.hbs’.

( 5.6 ) Commenting system

Stretch Theme 1.1 offers integration with 3 commenting system. By default code for commenting by Disqus.com is activated by default. To disable commenting or to change to Google Plus or Facebook commenting, please follow below steps:

  1. Open theme file ‘partials/comments.hbs’ and search for “{{> comments-disqus}}”. To remove commenting, simply deleted the above code.
  2. To switch to commenting system of either Google Plus or Facebook, simply replace the text “disqus” with either “google” or “facebook” and save the file.

( 5.7 ) Disqus commenting system

Ghost by default does not have a commenting system. However if you wish to enable a commenting system, one of the best and free service to use is one provided by Disqus.com

Simply visit their website and create an account. After you create an account, follow below steps:

  1. Visit http://disqus.com/admin/create/
  2. Site Title: Enter Name of your website
  3. Disqus URL: This is automatically set based on the site name but you can also customize it.
  4. Category: Choose a category that based describes your website.
  5. The code required to make Disqus commenting work is placed in 3 separate files ‘partials/comments-disqus.hbs’ & ‘disqus-comment-count.hbs’ and ‘partials/custom/disqus-shortname.hbs’. But you only are required to modify one file.
  6. Open the ‘partials/custom/disqus-shortname.hbs’. Find the text “ghost-theme-stretch” and replace it with your Disqus shortcode that you had set on disqus.com.

( 5.8 ) Google Plus commenting system

Google does not offer or official recommends using their commenting system anywhere else other than Blogger. However thanks to people in the Ghost Community for sharing code to integrate Google Plus commenting to a ghost blog integration is simply dropping few lines of code to your theme. To enable, please follow below steps:

  1. Open theme file ‘partials/comments.hbs’ and search for “{{> comments-disqus}}”.
  2. Replace the text “disqus” with “google” and save the file.

( 5.9) Facebook commenting system

Integrating Facebook comments to your Ghost Blog is similar to integrating Google Plus comments except for 2 additional step, i.e. to create a Facebook App ID.

  1. Open theme file ‘partials/comments.hbs’ and search for “{{> comments-disqus}}”.
  2. Replace the text “disqus” with “facebook” and save the file.
  3. Next you need a Facebook AppID. You can get one by going to Facebook Developers/apps and creating one.
  4. Once you have your AppID, open your ‘partials/comments-facebook.hbs file and replace ‘<your-facebook-app-id-here>’ with the actual Facebook AppID and then save.

 ( 5.10 ) Google Analytics

Google Analytics code has already been added to ‘partials/google-analytics.hbs’. To activate it, go to Google Analytics and setup a new site. On Property > Tracking Info > Tracking code, you would find your Google Analytics Site ID which is in the format “UA-XXXX-Y”

Once you find your site id, follow below steps:

  1. Open the ‘partials/custom/google-analytics-ua-code.hbs’
  2. The UA-XXXX-Y, parameter must be replaced with the Web Property ID for the Google Web Property you wish to track.

( 5.11 ) Modifying the theme colours using .less CSS pre-processor files.

The CSS of this theme is developed using .LESS. If you are not familiar with .less and want to modify the theme styling, you can directly edit the ‘screen.css’ file. However, if you are familiar with .LESS, than changing colours or font in the theme you can use the .less files provided in the theme package.

To use the .LESS files, follow these steps:

  1. Copy the “source-less” folder and place it inside your theme file in your local system.
  2. Add the .less files to your desktop tool. (For Windows we recommend using WinLess.)
  3. The styling is broken down into different .less files for convenience. However only 3 .less files should output to .css files inside the path “assets/css/”. These files are “screen.less” which includes all other .less files, “normalize.less” and “genericons.less”.

NOTE:

If you modify a theme and upload it, it’s safer to restart ghost as sometimes changes are not visible on some hosts.

Was this article helpful? ·