Curious - Ghost Theme v2.1.0

Theme Documentation

First of all a huge thanks for purchasing this theme! If you have any questions that are not answered here, please feel free to contact us via email (support@justgoodthemes.com) or the contact form on our user page here. Thanks so much!

Table of Contents

  1. Theme Information
  2. Theme File Structure
  3. How to Upload a Theme to Your Ghost Blog
  4. Theme Features
  5. Favicon
  6. Publication Logo
  7. Publication Cover
  8. Navigation
  9. Social Media Links
  10. Featured Images
  11. Featured Carousel or Intro Section
  12. Members
  13. Syntax Highlighter
  14. Image and Blockquote Styles
  15. Disqus Comments
  16. Sidebar
  17. Footer Widgets
  18. Copyright Information
  19. Google Analytics
  20. Search
  21. Translation
  22. Style Adjustments
  23. Credits
  24. Support
  25. Updates

A. Theme Information

  • Name: Curious
  • Description: Responsive & clean, magazine style Ghost theme
  • Current Version: 2.1.0
  • Last Updated: July 6, 2020
  • Creator: JustGoodThemes.com
  • Ghost version: >= 3.22.0

B. Theme Structure

Here's an overview of the main theme files:

  • default.hbs - The parent template file that includes the global header and footer.
  • index.hbs - The main template that generates a list of posts.
  • home.hbs - The template that provides special content for the home page, i.e. intro section or featured posts carousel.
  • post.hbs - The template used to render single posts.
  • page.hbs - The template used to render static pages.
  • author.hbs, tag.hbs - The templates used for author and tag archives respectively.
  • error.hbs, error-404.hbs - The templates for any 500 or 404 errors.
  • custom-membership.hbs - The custom template that can be selected in the admin interface. Used to display available membership plans.
  • acount.hbs, signin.hbs, signup.hbs, subscribe.hbs - The templates that are necessary for the members feature. Located in the members folder.
  • routes.yaml - Ghost's routing configuration which you should upload if the members feature is enabled.

C. How to Upload a Theme to Your Ghost Blog - top

  1. Log into the admin section of your Ghost blog: yourblog.com/ghost.
  2. Click on Design under Settings in the left hand column and scroll to the very bottom.
  3. Click on Upload a theme.
  4. Drag-and-drop or click and locate the zip file for your theme.
  5. Once it is uploaded, click on either Activate Now to activate the theme immediately or Close if you want to activate later on.

D. Theme Features - top

1. Favicon

To add a favicon, navigate to Settings → General in your Ghost admin dashboard and click Upload Image next to Publication icon.

favicon

To add a logo, navigate to Settings → General in your Ghost admin dashboard and click Upload Image next to Publication logo. If no publication logo was added, the theme shows the site title.

logo

3. Publication Cover

The publication cover image is displayed in the background of intro section and error, member sign in, sign up and subscribe pages.

To add a publication cover, navigate to Settings → General in your Ghost blog admin dashboard and click Upload Image next to Publication cover.

cover

4. Navigation

You can add, edit, delete and reorder menu links on your Ghost blog, directly from the navigation tool within the blog admin area, located at Settings → Design.

To add a menu item to your navigation menu, enter a label for the menu item in the label field and the destination for the menu item to link to in the URL field.

navigation

Once you have organized your menu, click Save.

The social media links are displayed in the footer of the theme.

To add Facebook and Twitter links, navigate to Settings → General, click Expand next to Social accounts and enter the URLs of your Facebook and Twitter profiles.

social links

All other social media links can be added manually in the footer.hbs partial located in the partials folder of the theme. For instance, if you want to add the link to your GitHub account use the following code:

<a href="#" class="square dark" target="_blank" rel="noopener">{{> "icons/github"}}</a>

To see the available icons, please check the icons folder of the theme located in the partials folder.

You can add featured images to all of your posts, static pages, tag and author pages.

To add a post/page featured image, open Post/Page Settings Menu by clicking on the gear icon in the top right corner of the Ghost editor, click the "Upload post image" button and locate the image on your computer. Save it and you're all set.

post image

To add a tag image, navigate to Tags, select the tag you want to edit, click the "Upload tag image" button and locate the image on your computer. Save it and you're all set.

tag image

To add an author image, navigate to Staff, select the author you want to edit, click the "Change Cover" button and locate the image on your computer. Save it and you're all set.

user image

If you have any posts marked as featured, the featured posts carousel is displayed on the homepage. It showcases up to five of your latest featured posts.

To mark a post as featured, open Post/Page Settings Menu by clicking on the gear icon in the top right corner of the Ghost editor and check the "Feature this post" box.

featured post

If there are no posts marked as featured, the intro section is displayed instead. You can edit the information displayed in the intro section in the home.hbs file located in the main theme folder. By default, the site title, description and publication cover image are displayed. Also, if the "Members" feature is enabled in Ghost, the "Subscribe" button appears which leads to the subscribe page.

8. Members

The theme supports Ghost's Members feature. To find out more about it, check out the Ghost members documentation.

Important! Please keep in mind that the Members feature is still in Beta. It means it may change at any time or some things may not work as expected.

Members Activation

To start using Members, you first need to enable this feature by checking the "Enable members" box in Settings → Labs in your Ghost admin dashboard.

enable members

Next, unzip the theme archive file and locate the file named routes.yaml. Then navigate to Settings → Labs and upload this file by clicking the "Upload routes YAML" button.

upload routes

Membership Plans

The theme has three available membership plans: free, monthly and yearly. These plans are displayed in the member account page (members/account.hbs) and custom membership template (custom-membership.hbs).

The feature list of each plan can be adjusted by editing the corresponding partial file. For instance, to adjust the features of the free plan, open the membership-free.hbs within the partials folder and edit the <ul> element contents:

<ul>
  <li>Full access to posts for subscribers</li>
  <li>Weekly email newsletter</li>
  <li>No advertising</li>
</ul>

Proceed in the same way with membership-monthly.hbs and membership-yearly.hbs.

Custom Membership Template

The theme has a custom template "Membership" that allows you to display available membership plans for your site visitors. To use this template, create a page, open the page settings menu by clicking on the gear icon in the top right corner and select "Membership" from the "Templates" dropdown.

custom mebership template

The content added for this page is displayed below the membership plans section, while the custom excerpt, is displayed above the membership plans section in bigger font.

To adjust the feature list of each membership plan, follow the instructions outlined in the previous section.

9. Syntax Highlighter

Curious comes with Rainbow.js to automatically syntax highlight code blocks in your posts. To make syntax highlighter work, just wrap the code in pre and code tags and change the value of "data-language" attribute to your code language:

<pre><code data-language="javascript">var testing = true;</code></pre>

By default, the supported languages include: C, CSS, generic, HTML, JavaScript. If you need to support more languages, visit https://craig.is/making/rainbows, select the languages you need and download the JS file. Replace the Rainbow code in the plugins.js file located in the assets/js folder of the theme with the contents of the file you downloaded.

10. Image and Blockquote Styles

When adding blockquotes and images to your posts and pages, you can use special CSS classes to create a more attractive flow of content.

For instance, you can align your image left or right, by wrapping it in a div tag with the CSS class alignleft or alignright like this:

<div class="alignleft">
<img src="/content/images/2019/07/my_image.jpg" alt="Alt Text">
</div>
<div class="alignright">
<img src="/content/images/2019/07/my_image.jpg" alt="Alt Text">
</div>

alignleft or alignright CSS classes can be applied to blockquotes as well. See an example below.

<blockquote class="alignleft">
<p>Good ideas never go out of style.</p>
</blockquote>
<blockquote class="alignright">
<p>Good ideas never go out of style.</p>
</blockquote>

11. Disqus Comments

Curious comes with Disqus commenting built-in, you just need to have a Disqus account. To enable commenting, you have to add your Disqus account shortname. Navigate to Settings → Code injection and add the following code into the Site Header field (replace yourshortname with your forum's shortname):

<script>var disqus_shortname = 'yourshortname';</script>
code injection disqus

If you wish to disable commenting, just remove the following lines from the post.hbs file located in the main theme folder:

{{!-- The tag below includes the theme comments - partials/comments.hbs --}}
{{> comments}}

12. Sidebar

The theme sidebar contains Ghost subscription form and hard-coded text widgets. To delete or reorder the widgets, edit the sidebar.hbs file located in the partials folder of the theme.

{{!-- Includes the text widget - partials/widget-text1.hbs --}}
{{> "widget-text1"}}

{{!-- If members enabled and user not logged in, includes the subscribe form widget - partials/widget-subscribe.hbs --}}
{{> "widget-subscribe"}}

{{!-- Includes the text widget - partials/widget-text2.hbs --}}
{{> "widget-text2"}}

To adjust the information displayed in the widgets, open the corresponding partial file locate in the partials folder of the theme.

For instance, to edit the "About" widget text, open the widget-text1.hbs file located in the partials folder of the theme and make the adjustments you need.

The theme footer widget area contains "Latest Posts" and "Tags" widgets. To delete or reorder the widgets, edit the footer-widgets.hbs file located in the partials folder of the theme.

To adjust the information displayed in the widgets, open the corresponding partial file locate in the partials folder of the theme.

You can edit the copyright information in the footer.hbs file within the partials folder of the theme.

15. Google Analytics

First, you need to create a Google Account. If you already have one, you should be able to sign into Google Analytics using your existing Google Account credentials.

Once you've logged into Google Analytics, follow their guide to create an account for your blog. Once the account has been created, you'll receive a tracking code. Copy your tracking code and head over to your Ghost blog admin dashboard. Navigate to Code Injection settings and paste your tracking code into the Blog Header field.

custom integration

Or you can paste your tracking code inside the <head> tag in the default.hbs file located in the main theme folder, right below the {{ghost_head}} and above </head>.

The search functionality implemented in the theme requires Content API Key.

To obtain Content API Key, navigate to Settings → Integrations in your Ghost admin dashboard and click Add custom Integration. Type the name of your custom integration and click Create. Copy your Content API key and click Save.

content api key

Next, navigate to Settings → Code injection and add the following code into the Site Header field (replace yoursearchkey with your generated Content API Key):

<script>var search_key = 'yoursearchkey';</script>
code injection search

E. Translation - top

The Curious theme is fully translatable. You can find the default file in the target locales folder. Copy locales/en.json to locales/[language_code].json. The "language_code" must be replaced with a valid code. You can edit the renamed translation file with any plain text editor.

Even if your site is in English, you can customize any theme texts by simply editing the default English file (locales/en.json), without modifying the theme templates.

You can find more information on how to translate the theme at https://ghost.org/docs/api/v3/handlebars-themes/helpers/translate/.


F. Style Adjustments - top

To customize the theme style, you’ll need to either edit the theme stylesheet or use the Code Injection tool located in Settings → Code Injection in your Ghost admin dashboard.

The theme stylesheet style.css is located in the assets/css folder. You will also find the Sass files included in the assets/sass folder. If you make changes in Sass files, you can use a Sass compiler app, like Scout-App, to recompile the stylesheet.

For small tweaks, you can simply use the Code Injection tool and place your CSS rules in the Site Header field. For instance, if you have uploaded a publication logo and want to adjust the logo size, you can do it by adding the following CSS:

<style>
  .site-logo img {
    max-width: 150px;
  }
</style>
code injection style

G. Credits - top


H. Support - top

The documentation included provides all the information needed to get the theme installed and customized. However, if you have any questions you can email us at support@justgoodthemes.com, and we will be happy to help you.

If you have any bug reports, or feature requests, please let us know!


I. Updates - top

As Ghost platform grows, so will this theme. We’re dedicated to keeping our Curious up to date.


Go To Table of Contents

© 2020 Just Good Themes. All rights reserved.