1. Introduction

Thank you! for buying one of our template, if you find any kind of issue or bug don't hesitate on contact us.

We will resolve your problem as soon as possible.

Template information:

Features

  • Constantly updated.
  • Translation ready (English and Spanish Included).
  • Minified and Optimized code: 100% Desktop Google page speed
  • HTML5 & CSS3 ready.
  • Ghost 2.12 compatible.
  • 2 Single post dispositions
    • Fullwidth: cover for large images, see here.
    • Standard: image inside the article, see here.
  • No Sidebar template for Post and Pages see here.
  • Custom Tag page, see here.
  • Custom Author page, see here.
  • Custom 404 Page see here.
  • Search Widget.
  • Gallery Support, similar to a Wordpress Shortcode.
  • Advertising sections.
  • Disqus Support.
  • Fully responsive.
  • Video Support (Vimeo, Youtube, etc).
  • Retina Display Ready.
  • Font Awesome icons.
  • Works on Android, Ipad and Iphone.
  • Documentation included.
  • Clean Design.
  • Well Coded.
  • Navigation Menu.

Requirements

Reco is a Ghost theme so the basic requirements are the same of Ghost

2. Theme Setup

2.1. Install the template

This guide assumes that you already have a Ghost installation ready.

Uploading the theme (v1.0 for Ghost 1.2.x and higher)

  • Log in into your Ghost admin panel.
  • Go to settings (design section) and upload "reco.zip"
  • Click Activate.

Uploading the theme on custom hosting (FTP)

The instructions are pretty simple:

  • Login on your FTP account.
  • Unzip the reco.zip file and copy reco folder to your /ghost_installation/content/themes
  • Restart your installation if neccesary. You can ask help to your hosting provider if you don't know how to do this step.
  • Login into your ghost admin panel.
  • Go to settings (general) and select theme "reco"
  • Click Save.

2.2. Activate Public API (Until Ghost 2.10)

Important: if you are using Ghost 2.10.2 or higher, just skip this section.

  • Go to Settings/Labs.
  • Enable Beta Features.
  • Check Public API.
  • Go to Settings/General.
  • Click Save.

2.3. Basic theme usage

Upload a background image cover

  • Go to Settings/General
  • Go to Blog Cover and Click Upload Image.
  • Click Save.

Note: the recommended size for this image is 1920x1080px. Just be sure you are not uploading a small size image.

How to change the logo

Reco supports text and image logo. By default text logo is used, if you want a image logo you can do the next steps:

  • Go to Settings/General
  • Go to Blog Logo and click upload image.
  • Click Save.

Setting a post featured image

We recommend to set a post image this will set the image just above the post title, like the next image:

To add the featured image for every post you must follow the next steps:

  • Click the cog icon (on left side of update/save button).
  • You will see a new sidebar has opened.
  • Click on Add post image and upload your thumbnail like the screenshot.
  • Click update/ save.

Creating an about and contact page.

Create 3 static pages with about/contact/gallery url, the steps are:

  • Go to New Post.
  • Set a title and content.
  • Go to post settings (cog icon next to save button).
  • Check Static Page and in the url field set about (like the next image).

  • To create a contact page repeat all steps but change the url with contact. Note: contact page is required in your custom 404 page.
  • To create a gallery page repeat all steps but change the url with gallery
  • There is an additional step: you must paste the next code in your markdown content: 
<iframe
style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3216.894113180728!2d-92.54210274337773!3d36.26634957903754!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x87ce2227998fc6eb%3A0x1797e7fc1ba3142d!2sWarrior+Cafe!5e0!3m2!1ses-419!2scl!4v1528871596774" width="100%" height="350" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

You can get your iframe code from: https://www.google.com/maps click on your location and share this location and incorporate map.

Or you can use an embed generator, like: https://www.embedgooglemap.net/

Creating the navigation menu.

Note: This feature is available on ghost 0.5.9 and higher.

  • Login into your admin.
  • Go to "Settings" -> "Navigation".
  • You can create some links like: home, contact or gallery if you are actually using them.

How to create a gallery

Reco includes an easy way to add gallery images. Just add a <div class="gallery"></div> and add your images inside this html tag.

Example:

How to add a download button

Reco 1.2 includes a download button shortcode. Just add a <div class="download"></div> and add your link inside this html tag.

Example:

2.4. Plugins configuration

Main Config File

Inside Reco/defaults.hbs file (line nº 36) you will find some important parameters that the theme will use, example: 

var theme_config = {
	flickr_id: '46776802@N03', // You can get it here: http://idgettr.com/
	flickr_photos_limit: 6, // How many photos you want to show
	disqus_shortname: 'ghostexample', // You can create your own Disqus Comments here: https://disqus.com/admin/create/
};

So, before you upload your theme is highly recommendable to edit these parameters with your own profiles.

How to get your Flickr ID

In the next url http://idgettr.com/ you can copy and paste your profile username, example:

Now we can copy that ID and paste into our config.js file, this will show 6 images of the Wordpress user.

How to get the Disqus Shortname

Disqus comments works like any JS api. You can create your Disqus code in the next url: http://disqus.com/admin/create/

If you don't have a Disqus account just create it (it's free) then open the url: http://disqus.com/admin/create/

Now you can see something like this:

Your unique "Disqus URL" is your shortname copy that name and click finish registration.

In this case will be disqus-example. Now we have our disqus shortname and we must change our template to view these changes..

  • Go to the directory where is your template.
  • Go to /content/themes/reco and open the next file: default.hbs and search for disqus_shortname = 'ghostexample;
  • Change with your shortname, in this case 'disqus-example';
  • Save the file and upload to your ghost installation.
  • Optional, you can verify if all is correct clicking Verify on disqus steps (where we get our shortname).

2.5. Reserved tags for the theme

Reco uses some important tags to extend ghost functionalities, these tags are:

  • fullcover: articles will be displayed in fullwidth mode.
  • nosidebar: hide the main sidebar on posts or pages.

These tags must be always in lower case and it is highly recommended to never use them as primary tag.

Example of correct usage:

In this case we used fullcover tag "in lowercase" in the 2nd position.

2.6. Enable Suscribers form

On Ghost 3.0 and higher, the subscribers form was fully removed so the only way to get back this basic support is following the next steps:

  • 1.- Login into your Ghost admin and click on "Labs"
  • 2.- Enable "Members" button and "Allow free member signup"
  • 3.- Click Save

Note: this will enable basic support for subscribers, not membership (public or paid posts), so you can export your suscribers to any mailing platform like Mailchimp to do custom campaigns.

3. Advanced Setup (code knowledge needed)

3.1. Add widgets to the template

Edit advertising section

Reco includes 1 strategic place to add advertising:

  • reco/partials/sidebar.hbs

It is important to replace the link "<a>" tag with your respective advertising or remove the div container if you are not going to use them.

How to add widgets to the sidebar

  • Go to reco/partials/sidebar.hbs
  • Edit any current widget or add a new copying the next lines of code: 
<!-- start: .widget -->
	<section class="widget ep-text">
		      <h4 class="widget-title title bordered">Text Widget</h4>
		<div class="textwidget">
			<p>Text widget content...</p>
		</div>
		<div class="clear"></div>
	</section>
	<!-- end: .widget -->

So if you want to add an iframe or any embed you must replace the paragraphs (<p>) with your iframe code.

3.2. How translate the theme

Reco supports multiples languages but you need to add your own lang file for this purpose:

  • Go to Settings/General -> Publication Language
  • Click "expand" and change to your correct lang code, for example: French is "fr", Spanish is "es".
  • Click Save.

After that, you need to add an extra files inside reco/locales/fr.json

We recommend to copy en.json file and start translating every text inside this file.

3.3. Syntax Highlighter

Reco v2.0 and later supports code highlighting via Prism Plugin: you can check the plugin documentation here.

If you want to highlight your code, you must always use <pre class="language-X"><code></code></pre> tags, where X can be: html, css, js, php, etc.

Highlight HTML example:

Line numbers class is optional, so if you want to show short code examples, you can use <pre class="language-html"></pre>

Important: you must escape your code (only for HTML) before paste into your Ghost markup, for example https://www.freeformatter.com/html-escape.html

3.4. Enable search engine (API Key)

On Ghost v2.12 and later moved the old Beta API to the new Content API, this require some steps if you want to get it work the search engine.

  • Login into your Ghost admin.
  • Go to integrations.
  • Click on "add custom integration" button.
  • Add a name like "Search Engine".

  • Click create.
  • Copy the Content API Key.
  • Open reco/default.hbs file and edit line nº 46 search_engine_key = "";

Finally save your file, ZIP reco folder and upload into your Ghost admin.

4. CSS Styles

This project uses the following .css files for development:

  • assets/dist/grids-ie.css - Unsemantic grids for IE.
  • assets/scss/font-awesome.min.css - font awesome icons.
  • assets/scss/jquery.magnific-popup.scss - MagnificPopup jQuery Lightbox.
  • assets/scss/tooltipster.scss - Main tooltipter assets.
  • assets/scss/prism.scss - Syntax Highlighter styles.
  • assets/scss/*.scss - Main project styles, this folder includes: reset, grids, template style and responsive media queries.

In production mode we use the next minified CSS files:

  • assets/css/plugins.min.css - all external plugins in one large file used in the template.
  • assets/css/style.min.css- Main project styles minified and optimized.

5. How to change template main color

Reco on version 2.0 was moved to SASS, specifically to SCSS, the major improvement about this, is the possibility to change main and secondary color easily.

If you want to change the main color you must follow the next steps:

1.- Unzip reco.zip (this is the template only file) and remember where is the folder location.

2.- Install a SASS compiler, we recommend you to use Prepos 6, you can download it here.

3.- After installed you must see a window like this (just click continue trial):

3.-Click on "Add Project" on the left bottom side.

4.- Search for reco folder (where you already unziped the project).

5.- Click on config icon -> refresh, this will load Prepos 6 Config file inside theme, so everytime you save a SCSS or JS file, it will be minified and saved into reco/assets/dist folder.

6.- Open reco/assets/scss/_settings.scss file and change the color that you want, example:

On this screenshot we already changed $red variable to a dark blue color at line nº 22.

7.- After you save settings file, you will see a notification if there isn't any error:

8.- It is recommended to copy all content generated from reco/assets/dist/style.min.css into reco/partials/css/critical-css.hbs to avoid any delay when styles are rendering.

9.- Zip Reco Folder and reupload into your Ghost Installation.

6. Javascript Files

Plugins and libraries

Development mode

Production

  • assets/dist/scripts.min.js - all external plugins and functions in one large file used in the template.

IMPORTANT: if you are a developer and you need to ADD JS changes, we recomment you to edit functions.js and use Prepos 6 to autocompile your code changes.

7. Optimization

This section will explain the basics concepts of optimization to get the highest score on Google Page Speed test.

7.1 Image Optimization

There is a lot of recommeded tools for this purpose, if you don't want to loss image quality, just skip this section.

Highest compression tool: Toolur

Website: http://compressimage.toolur.com/

We tested several compression tools and toolur online, is one of the best if you want to get 0 errors on Google Insight.

Recommended options:

  • Compression method: C
  • Image Quality: 70%
  • Don't resize and don't enlarge images.

TinyPNG: good quality and weight balance

TinyPNG is one of the most used compressor in the web, has a very basic interface and you will lost almost 10 - 15% quality. Its is highly recommended if you want to optimize your images without loosing quality.

Website: https://tinypng.com/

FileOptimizer: desktop APP

This application has the a good balance pretty closer like TinyPNG but as a desktop app.

Website: https://sourceforge.net/projects/nikkhokkho/files/FileOptimizer/

The only one important thing, is to enable "allow lossy optimizations":

7.2. Code editing CSS/JS

If you need to edit some CSS we recommend to add your changes at line nº 31 for example, in the next screenshot we changed the header background to a dark green::

If you want to minify your code, we recommend you to use CSS Minify: https://cssminifier.com/

JS Minify: https://javascript-minifier.com/

The steps are pretty similar to CSS, you just need to copy your code into assets/dist/scripts.min.js at line nº 100 and it is highly recommended to minify your code.

If you are familiarized with Javascript (developer) and you need to add extra jQuery functions, we recommend you to download Prepos 6 and load the prepos-6.config file into Prepos APP, this will help you to compile js/functions.js and minify all your code automatically.

8. Fonts used

9. Credits.

Fonts Icons

By Font Awesome

Images

Unsplash: http://unsplash.com/ and pixabay

10. Support

If you have any questions, please use our profile contact form on Envato http://themeforest.net/user/estudiopatagon

In case you find any bug, issue or just having some problems with the theme, use our ticket system: https://estudiopatagon.ticksy.com/