Simply theme for Ghost
Simple and Elegant 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.
You can see Simply in action on my Page Demo
- 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.
Simply supports the following web browsers.
Enable all checkboxes on the labs page in your Ghost admin panel.
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.
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>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 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>Add some more styling options to your articles text with these three styles.
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
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
To make your changes with your favorite colors you just have to add the following code and replace with your colors Themes.
- Hodor AMP Template
- Normalize
- Jquery.ghostHunter
- Prismjs
- sticky-kit
- lunr.js
- zoom.js
- jquery-lazyload
- Fonts
Copyright (c) 2017 GodoFredoNinja - Released under the CC BY-NC 4.0.