Skip to content

Commit

Permalink
update documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
GodoFredo committed Oct 9, 2017
2 parents cc7b007 + a0780db commit 7de64a4
Show file tree
Hide file tree
Showing 181 changed files with 1,452 additions and 7,795 deletions.
143 changes: 69 additions & 74 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
# Simply theme for [Ghost](https://github.com/tryghost/ghost/) by @GodoFredoNinja
# Simply theme for [Ghost](https://github.com/tryghost/ghost/)

[![Ghost version](https://img.shields.io/badge/Ghost-1.x.x-brightgreen.svg)](https://github.com/TryGhost/Ghost)
[![Ghost version](https://img.shields.io/badge/Ghost-1.x-brightgreen.svg)](https://github.com/TryGhost/Ghost)
[![Node](https://img.shields.io/node/v/uno-zen.svg)](https://nodejs.org/en/)
[![Donate](https://img.shields.io/badge/donate-paypal-blue.svg)](https://bit.ly/PayPal-GodoFredoNinja)

> Simple and Elegant theme for [Ghost](https://github.com/tryghost/ghost/).
### Free theme for Ghost
## Free theme for Ghost

Hello, I created this theme for Ghost with inspiration from [Medium](https://medium.com/).
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](https://goo.gl/y3aivK)
Expand All @@ -16,16 +16,19 @@ It is available for free so you can use on your site. It is strictly forbidden t

![](./screenshot.png)


## Demo

You can see Simply in action on my Page [Demo](https://goo.gl/V7moIY)

## 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)
Expand All @@ -34,36 +37,46 @@ You can see Simply in action on my Page [Demo](https://goo.gl/V7moIY)
- YouTube Subscribe Button in video post Format
- 5 articles latest posts in the (author - tag) section sidebar
- Previous and next button in the Post
- Has button to save the link on Facebook
- Has a search engine system
- 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, Spotify, soundcloud => Responsive
- YouTube, Vimeo, kickstarter, Facebook, dailymotion => Responsive
- Lazy image loading for better performance only in backgrounds
- Code syntax [Prismjs](http://prismjs.com/index.html#languages-list) Supported all syntax.


## Web Browser Support for Simply

Simply supports the following web [browsers](http://caniuse.com/#search=flexbox).

# Simply settings
## Ghost Settings

> Enable all checkboxes on the labs page in your Ghost admin panel.
![](./documentation/labs.png)

## Social Links
Add the Social Links only for the services you want to appear in the header section of your website. Pay careful attention as enabling too many services will cause menu problems.
## 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](https://www.youtube.com/account_advanced)

Add the following code in `Settings -> Code Injection -> Blog Footer`
— Copy the below script to `Settings -> Code Injection -> Blog Footer section`

```html
<script>
/* links to followers in social media */
/*====================================================
THEME SETTINGS & GLOBAL VARIABLES
====================================================*/
/* 01. Social Media Follow*/
var followSocialMedia = {
'google': 'https://...',
'youtube': 'https://...',
'instagram': 'https://...',
'snapchat': 'https://...',
Expand All @@ -76,74 +89,53 @@ var followSocialMedia = {
'flickr':'https://...',
'pinterest':'https://...',
'telegram':'https://...',
'rss':'https://...',
'feed':'https://...',
};
</script>
```
## Enable Disqus or Facebook Comments
Only enable either Disqus or Facebook comments.
/* 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';
#### Disqus Comments
Insert your [Disqus shortname](https://shortname.disqus.com/admin/) in both the comments and Disqus comment count sections.
/* 04. Newsletter (optional) */
var newsletterTitle = 'YOUR_TITLE';
var newsletterDescription = 'YOUR_DESCRIPTION';
1. To enable Disqus comments update the code in `Settings -> Code Injection -> Blog Header.`
```html
<style>
.simply-facebook {display:none !important}
</style>
```
/* 05. instgram */
var instagramToken = 'Token_app_instagram';
var instagramUserId = 'User_ID';
var instagramUserName = 'User_Name';
</script>

2. To enable Disqus comments update the code in Settings -> Code Injection -> Blog Footer.
```html
<script>
/* Disqus for Comments */
var disqusShortName = 'YOUR_DISQUS_SHORTCUT_HERE';
</script>
<!-- Disqus Comments Count-->
<script id="dsq-count-scr" src="//YOUR_DISQUS_SHORTCUT_HERE.disqus.com/count.js" async></script>
```

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

#### Facebook Comments
To use Facebook comments, skip the configuration Disqus.
To use facebook comments, skip the configuration Disqus.

This enables comments and comment counter.
This enables comments and comment counter

1. Add the code in `Settings -> Code Injection -> Blog Header`
— Add the code `Settings -> Code Injection -> Blog Footer`

```html
<style>
.simply-disqus {display:none !important}
</style>
```
2. Add the code `Settings -> Code Injection -> Blog Footer`
> If you have the Facebook button to save. It is no longer necessary to add the following code.
```html
<div id="fb-root"></div>
<script>(function(d, s, id) {
$('.fbSave').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>
```

## YouTube Subscribe Button
Add the code `Settings -> Code Injection -> Blog Footer`
```html
<script>
/* 0.2 Video Post Format Subscribe */
var youtubeChannelName = '...Your channel name...';
var youtubeChannelID = '... Your Channel ID ...';
</script>
<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.

```html
Expand All @@ -154,35 +146,38 @@ Add you own custom content into the side bar by editing the `./partials/sidebar.
```

## Warning - Note - Success

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

![](./documentation/note.png)

### 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](http://prismjs.com/#languages-list)

![](./documentation/prism.png)

## Image Post Format

If you want to have a image post format, you only have to add the tag `#image-post-format` The Featured image will become large in size.

## Video Post Format

If you want to have a video post format, you only have to add the tag `#video-post-format`. The first video in the article will be large in size.

![](./documentation/video-post-format.png)
---
![](./documentation/video-post-format-2.png)
---

## Image Post Format
If you want to have a image post format, you only have to add the tag `#image-post-format` The Featured image will become large in size.


## 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](THEMES.md).

### Credits

- [Hodor AMP Template](https://github.com/godofredoninja/Hodor-AMP-Template-for-Ghost)
- [Normalize](https://necolas.github.io/normalize.css/)
- [Jquery.ghostHunter](https://github.com/jamalneufeld/ghostHunter)
- [Prismjs](http://prismjs.com/)
Expand Down
70 changes: 54 additions & 16 deletions THEMES.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,12 @@ To change the color of the Mapache theme select one of the theme styles below an

In the following article shows a list of better color palettes [https://goo.gl/VE2K5r](https://goo.gl/VE2K5r)

## Theme Deep Orange 800

### Theme Deep Orange 800
``` html
<style>
/*header color links*/
.u-headerColorLink a {color: #FFC79E !important}
.header .u-headerColorLink a {color: #FFC79E}
.button-nav--toggle span {background-color: #FFC79E !important}
.u-headerColorLink a.active,
.u-headerColorLink a:hover {color: #FFF4DE !important;}
Expand All @@ -23,19 +23,29 @@ In the following article shows a list of better color palettes [https://goo.gl/V
.u-bgColor {background-color:rgba(210, 87, 4, 1) !important}
/* Color global for links */
.link--accent {color: #B34E11 !important}
.link--accent:hover{ color: #A34913 !important}
.link--accent,
.u-accentColor--iconNormal {
color: #B34E11;
fill: #B34E11;
}
/* btn color */
.button--primary {
color: #B34E11;
border-color: #B34E11;
}
/* mark */
mark {background-image: linear-gradient(to bottom, rgba(255, 225, 194, 1), rgba(255, 225, 194, 1)) !important;}
</style>
```
### Theme Cyan 500

## Theme Cyan 500

``` html
<style>
/*header color links*/
.u-headerColorLink a {color: #00787F !important}
.header .u-headerColorLink a {color: #00787F}
.button-nav--toggle span {background-color: #00787F !important}
.u-headerColorLink a.active,
.u-headerColorLink a:hover {color: #005057 !important;}
Expand All @@ -47,20 +57,29 @@ In the following article shows a list of better color palettes [https://goo.gl/V
.u-bgColor {background-color: rgba(106, 200, 207, 1) !important}
/* Color global for links */
.link--accent {color: #347F85 !important}
.link--accent:hover{ color: #256165 !important}
.link--accent,
.u-accentColor--iconNormal {
color: #347F85;
fill: #347F85;
}
/* btn color */
.button--primary {
color: #347F85;
border-color: #347F85;
}
/* mark */
mark {background-image: linear-gradient(to bottom, rgba(223, 246, 248, 1), rgba(223, 246, 248, 1)) !important;}
</style>
```

### Theme Blue Dark
## Theme Blue Dark

``` html
<style>
/*header color links*/
.u-headerColorLink a {color: #C1CBDB !important}
.header .u-headerColorLink a {color: #C1CBDB}
.button-nav--toggle span {background-color: #C1CBDB !important}
.u-headerColorLink a.active,
.u-headerColorLink a:hover {color: #FCFFFF !important}
Expand All @@ -72,19 +91,29 @@ In the following article shows a list of better color palettes [https://goo.gl/V
.u-bgColor {background-color: rgba(30, 55, 87, 1) !important}
/* Color global for links */
.link--accent {color: #607491 !important}
.link--accent:hover{ color: #586A84 !important}
.link--accent,
.u-accentColor--iconNormal {
color: #607491;
fill: #607491;
}
/* btn color */
.button--primary {
color: #607491;
border-color: #607491;
}
/* mark */
mark {background-image: linear-gradient(to bottom, rgba(223, 246, 248, 1), rgba(223, 246, 248, 1)) !important;}
</style>
```

### Theme Red 400
## Theme Red 400

````html
<style>
/*header color links*/
.u-headerColorLink a {color: #FFBBB4 !important}
.header .u-headerColorLink a {color: #FFBBB4}
.button-nav--toggle span {background-color: #FFBBB4 !important}
.u-headerColorLink a.active,
.u-headerColorLink a:hover {color: #FFF0EC !important}
Expand All @@ -96,8 +125,17 @@ In the following article shows a list of better color palettes [https://goo.gl/V
.u-bgColor {background-color: rgba(196, 50, 53, 1) !important}
/* Color global for links */
.link--accent {color:#BC403E !important}
.link--accent:hover{ color: #AB3D3A !important}
.link--accent,
.u-accentColor--iconNormal {
color: #BC403E;
fill: #BC403E;
}
/* btn color */
.button--primary {
color: #BC403E;
border-color: #BC403E;
}
/* mark */
mark {background-image: linear-gradient(to bottom, rgba(255, 220, 214, 1), rgba(255, 220, 214, 1)) !important;}
Expand Down
Loading

0 comments on commit 7de64a4

Please sign in to comment.