Simply theme for Ghost

Simple and Elegant theme for Ghost.

Free theme for Ghost

Hello, I created this theme for Ghost with inspiration from Medium. It is available for free so you can use on your site. It is strictly forbidden to use it for commercial use. If you have any suggestions to improve the theme, you can send me a tweet @GodoFredoNinja

❤ Please, help me with a small donation on Paypal. It'll help motivate me to update the theme with many improvements.

Demo

You can see Simply in action on my Page Demo

Featured

• Responsive layout
• Blog navigation
• Page 404 (Multiple faces emoticons)
• Page subscribe
• Pagination Infinite Scroll
• Instagram Feed in footer of Post
• AMP Template (Accelerated Mobile Pages)
• Cover images for blog, tag and author
• links to followers in social media
• Related Articles (6 articles)
• Template Video Post Format
• Template Image post Format
• Template Audio post Format
• Template not Image Featured in Post
• YouTube Subscribe Button in video post Format
• 5 articles latest posts in the (Author - Tag) section sidebar
• Tags Cloud in page of Author and Tag
• Previous and next button in the Post
• Support for comments (Facebook or Disqus)
• Support for counter comments (Facebook or Disqus)
• Buttons to share the article (Facebook - Twitter - Reddit - Linkedin - Pinterest - Whatsapp)
• Counter shared articles on Facebook
• Sticky content in the sidebar
• YouTube, Vimeo, kickstarter, Facebook, dailymotion => Responsive
• Lazy image loading for better performance only in backgrounds
• Code syntax Prismjs Supported all syntax.

Web Browser Support for Simply

Simply supports the following web browsers.

Ghost Settings

Enable all checkboxes on the labs page in your Ghost admin panel.

Simply Settings

Social Links

Add the Social Links only for the services you want to appear in the header section of your website. Pay attention as enabling too many services will cause menu problems.

YouTube Subscribe Button

This section enables the YouTube Post format. Add the Channel Name and Channel ID which can be found here YouTube Advanced Settings

— Copy the below script to Settings -> Code Injection -> Blog Footer section

<script>
/*====================================================
  THEME SETTINGS & GLOBAL VARIABLES
====================================================*/

/* 01. Social Media Follow*/
var followSocialMedia = {
  'google': 'https://...',
  'youtube': 'https://...',
  'instagram': 'https://...',
  'snapchat': 'https://...',
  'dribbble': 'https://...',
  'github': 'https://...',
  'linkedin':'https://...',
  'spotify':'https://...',
  'codepen':'https://...',
  'behance':'https://...',
  'flickr':'https://...',
  'pinterest':'https://...',
  'telegram':'https://...',
  'feed':'https://...',
};

/* 0.2  Video Post Format Subscribe */
var youtubeChannelName = 'YOUR_CHANNEL_NAME';
var youtubeChannelID = 'YOUR_CHANNEL_ID';

/* 03. Disqus Comment Settings */
var disqusShortName = 'YOUR_DISQUS_SHORTCUT_HERE';

/* 04. Newsletter (optional) */
var newsletterTitle = 'YOUR_TITLE';
var newsletterDescription = 'YOUR_DESCRIPTION';

/* 05. instgram */
var instagramToken = 'Token_app_instagram';
var instagramUserId = 'User_ID';
var instagramUserName = 'User_Name';
</script>

<!-- Disqus Comments Count-->
<script id="dsq-count-scr" src="//YOUR_DISQUS_SHORTCUT_HERE.disqus.com/count.js" async></script>

Facebook Comments

To use facebook comments, skip the configuration Disqus.

This enables comments and comment counter

— Add the code Settings -> Code Injection -> Blog Footer

  <div id="fb-root"></div>
  <script>(function(d, s, id) {
    $('.simply-facebook').removeClass('u-hide');
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.async=true;
    js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

Add additional content to the sidebar

Add you own custom content into the side bar by editing the ./partials/sidebar.hbs file.

<div class="sidebar-items u-marginBottom30">
    <h3 class="sidebar-title u-fontSizeBase u-textColorDarker">.. your title ..</h3>
    <p class="u-textColorDarker u-fontSize15 u-marginBottom10">.. your description or content ..</p>
</div>

Warning - Note - Success

Add some more styling options to your articles text with these three styles.

PrismJS code syntax

Make your code stand out with the PrismJS code highlighter. PrismJS allows you to select which languge you embeded and performs code highlighting according to the language. Neat!

Take a look at the Prismjs Supported Language List

Template for (Video - Image - Audio)

Image — The Featured image will become large in size.

Not Image — The featured image will not be displayed in the article (Post).

Video — The first video in the article will be large in size. Supports formats

• vimeo
• Dailymotion
• Facebook Video
• Youtube
• Vid
• kickstarter

Audio — The first Audio in the article will be large in size. Supports formats

• Soundcloud
• Mixcloud
• Spotify

---

Add video or Audio where convenient. When you change the theme you will not have problems and not have Problem in your AMP Template

---

Change Theme Style

To make your changes with your favorite colors you just have to add the following code and replace with your colors Themes.

Credits

• Hodor AMP Template
• Normalize
• Jquery.ghostHunter
• Prismjs
• sticky-kit
• lunr.js
• zoom.js
• jquery-lazyload
• Fonts

Copyright & License

Copyright (c) 2017 GodoFredoNinja - Released under the CC BY-NC 4.0.