1. Introduction

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

We will resolve your problem as soon as possible.

But please check carefully the documentation, all general questions of theme usage are highly detailed on this file.

Template information:

Features

  • Ghost 5.x Compatible
  • Highly optimized for speed.
  • Unlimited Post and Background colors (fully customizable from Admin).
  • Enable/Disable widgets with One Click.
  • Super flexible, convert your blog into a tutorial website or a personal blog.
  • Modern & Unique Design.
  • Native Search.
  • Native Comments and Disqus compatibility.
  • Secondary Navigation support.
  • Topic Index or Tag cloud widget.
  • About Me Widget.
  • Memberships with Pricing Tables see here..
  • Full Koenig Editor Support, check demo here..
  • Pre packaged with SASS (SCSS), Prepos 7 config file included.
  • Syntax Highlight see here.
  • Custom Subscribe Page see here..
  • Custom Sign In Page see here..
  • Constantly updated.
  • Translation ready (English and Spanish Included).
  • Minified and Optimized code.
  • HTML5 & CSS3 ready.
  • 4 Single post dispositions:
  • Custom Tag page, see here.
  • Custom Author page, see here.
  • NEW*: Custom Tags Archive: see here.
  • Custom 404 Page see here.
  • Blog Cover support.
  • All Koening blocks supported: Callouts, Toggles, Gallery, Audio, File, etc.
  • Lazy 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 (secondary included in the Footer).

Requirements

Zento 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

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

Uploading the theme on custom hosting (FTP)

The instructions are pretty simple:

  • Login on your FTP account.
  • Unzip the zento.zip file and copy Zento 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 "Zento"
  • Click Save.

2.2. Activate Membership Feature

For Ghost 4.0 and higher Members feature is enabled by default.

IMPORTANT: We highly recommend you to read the Full Guide about Membership and Subscribers: https://ghost.org/help/setup-members/

2.2.1 Create Required Pages for Members (Sign In and Subscribe)

On Ghost v3.0 and higher there is a new feature where visitors can subscribe to your Blog, this feature requires to create 2 pages:

Note: the most important is to create these pages with the next unique slugs: "membership", "subscribe" and "signin", the title doesn't matter:

Example of usage:

1.- A subscribe page (required): where all your visitors can register their emails. Ref: https://ghost.estudiopatagon.com/zento/subscribe/

2.- A Sign In page (required): where all your visitors can send login link to their emails. Ref: https://ghost.estudiopatagon.com/zento/signin/

3.- A Membership page (optional): if you are not going to publish paid articles, is totally optional. This page will display your Price Tables with free, monthly and yearly plans. Ref: https://ghost.estudiopatagon.com/zento/membership/

The Membership page must match "membership" slug and select "Page Membership" template, example:

2.2.2 How to create "Tiers" for members (Ghost 5.X)

For Ghost 5.x Price Tables are created automatically if you connect Stripe pay system, you can check the full guide here: https://ghost.org/help/setup-members/

Important note: Don't forget to create the required 3 pages detailed in step "2.2.1" from this documentation.

2.3. Basic theme usage

How to change the logo

Zento 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 and search for "logo"

  • Click " Brand"
  • Go to Publicacion Logo and click upload image.
  • Click Save.

Setting a post featured image

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

  • Click new post button.
  • Hover the content area and you will see an "add feature image" button like the next screenshot.
  • Click update/ save.

Creating the navigation menu.

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

  • Login into your admin.
  • Go to "Settings" (cog icon) on the left side and search for "Navigation".
  • You can create some links like: home, contact or gallery if you are actually using them.

For the Secondary Navigation, this section will appear on Footer (as Quick Links):

This section is specifically designed to show any relevant link like "Terms" or "Policy" but of course, you can link to any content/website you want.

How to create a gallery or any Koenig block.

Zento is compatible with the latest gallery feature from Koenig Editor.

First you must click "plus" button and select gallery:

After you select some images you will see a custom grid like this:

Finally click save and you will see you custom gallery on the post content, it is important to know every image can be clicked and displayed on a custom lightbox, so you must upload good quality images.

2.4. Plugins configuration

2.4.1 Main Theme Configurations

On Ghost 4.x and higher there is a new theme options panel, here it will located the most important options of the theme.

To access to these options you must:

  • Log In into your admin.
  • Click the "cog" icon on the left side.
  • Search for "Design" and click "Customize"

  • Click "Site wide" toggle.
  • You will see multiple custom options available for the theme.

2.4.2 How to Enable Native Comments

In case of using Native Comments, just go to Admin -> Settings -> Membership and enable commenting:

How to get your Disqus Shortname (in case of using Disqus comments).

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, so copy that name and click finish registration.

In this case the Disqus Shortname will be disqus-example. Now we have our disqus shortname and we must change save into our Theme Options Panel. So follow the steps 2.4.1 and paste the disqus shortname there.

In Zento we introduced this setting is available on Ghost admin -> Settings -> design -> site wide "Sidebar social feed widgets".

  • "Sidebar Social Feed Widgets": this will display Facebook & Twitter Widgets depending if your social accounts are properly connected.

To enable properly these 2 new widgets, it will be required to assign properly your Facebook and Twitter url, on: Ghost admin -> General -> Social Accounts:

2.5. Custom Post Templates

Zento add some extra templates to extend ghost functionalities, these post templates are:

After a post is created, click right sidebar button and you will find all available templates at the bottom:

2.6. Add Intro text to your Home

The Intro Text module that appear on your Homepage, will require to create a page with tag "#intro-text", assign content and a featured image, here is how it should look like:

You can add a plain title (using H2 or H3), but if you want to color the title, you can create a "Custom HTML" block and paste this:

<h1 class="title ularge fw-medium">Hi, I'm <span class="highlight">Jonathan Doe</span> 👋</h1>

Note: After the page is fully created and saved, go to Settings -> Design & Branding -> Homepage -> Enable Home intro text option.

2.7. Create a "Explore our tags" Custom Page

Zento includes the next custom page to list all your available tags: https://ghost.estudiopatagon.com/zento/explore-our-tags/

The most important about this page is to always use the "explore-our-tags" slug, this url will be used on the "explore" button from your Homepage:

2.8. How to use the rating/difficulty Post System

Optionally for every article you can add a rating (this also could be used for difficulty). The rate will go from 1 to 3 stars.

To assign the correct rating, you must use the next internal tags: "#rating-1", "#rating-2", or "#rating-3".

Here is how it should look like the Article:

Note: The wording can be changed on Settings -> Design & Branding -> Sitewide -> "Rating text wording".

3. Advanced Setup (code knowledge needed)

3.1. Add widgets to the template

All important widgets are located inside zento/partials/widgets, these widget can work inside Sidebar or Footer and imported as a "partial". The most important is to follow the widget name format, example "recent-articles" note that .hbs part is removed when using partials.

The full list of widgets are:

  • About Me (not visible in demo but available): zento/partials/widgets/about.hbs
  • Advertising (not visible in demo but available): zento/partials/widgets/advertising.hbs
  • Recent Articles: zento/partials/widgets/recent-articles.hbs
  • Related Articles (not visible in demo but available): zento/partials/widgets/related-articles.hbs
  • Social Profiles: zento/partials/widgets/social-profiles.hbs
  • Tag Cloud: zento/partials/widgets/tag-cloud.hbs
  • Text Widget (used in footer): zento/partials/widgets/text-footer.hbs

How to add widgets to the sidebar

  • Go to zento/partials/sidebar.hbs
  • All widgets are inside a folder named "widgets"
  • Add the desired widget following the next format {{> widgets/about }} after tag-cloud and inside "aside" HTML tag.
  • For larger name widgets use: {{> widgets/featured-articles }}

So if you want a base to create your own widget, it is recommended to copy "text-footer.hbs" content into sidebar.hbs

How to add widgets to the Footer Area

  • Go to zento/partials/footer.hbs
  • All widgets are inside a folder named "widgets"
  • Add the desired widget following the next format {{> widgets/about }}

The widget must be added between "epcl-row" container:

Note: In case you want to edit the "About Website" widget (located on Footer), go to zento/partials/text-footer.hbs and edit the content there.

3.2. How translate the theme

Zento 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 zento/locales/fr.json

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

3.3. Syntax Highlighter

Zento supports code highlighting via Prism Plugin: you can check the plugin documentation here.

If you want to highlight your code, it is highly recommmended to use the "Language code block", you can check on the right sidebar -> Keyboard Shortcuts how is created.

Here is an CSS example:

If you are going to use the theme mainly for Code examples, it is highly recommended to create a "Snippet", so you can easily and create the block faster:

4. CSS Styles and Variables

If you want the full list of CSS 2 variables (you can paste this list directly into Ghost admin -> Settings -> Code Injection -> Head) for full control:

                        <style>
                        :root{
                            /* Font Styles */
                            --epcl-font-family: "Urbanist", sans-serif;
                            --epcl-title-font-family: "Urbanist", sans-serif;
                            --epcl-font-size: 17px; /* General content font size */
                            --epcl-line-height: 1.8; /* General content line height */
                            --epcl-font-size-editor: 19px; /* Single Content font size */
                            --epcl-line-height-editor: 1.8; /* Single Content line height */
                            
                            /* Colors */
                            --epcl-main-color: var(--ghost-accent-color);
                            --epcl-secondary-color: #FF2AAC;
                            --epcl-titles-color: #282424;
                            --epcl-black: #282424;
                            --epcl-meta-color: #4D6385;
                            --epcl-background-color: #FAF8FF;
                            --epcl-boxes-background-color: #fff;
                            --epcl-boxes-border-color: #E9E8FF;
                            --epcl-border-color: #E9E8FF; /* General border color */
                        
                            --epcl-boxes-shadow: 0px 2px 5px 0px rgba(0,0,0, 0.03);
                            --epcl-small-shadow: 0px 3px 5px 0px rgba(0,0,0, 0.2); /* Used on small images (like widgets or related articles) */
                            --epcl-medium-shadow: 0px 8px 16px -4px rgba(0,0,0, 0.10);
                            --epcl-large-shadow: 0px 4px 25px -4px rgba(0,0,0, 0.20);
                            --epcl-transition-bezier: cubic-bezier(.5,2.5,.7,.7);
                        
                            /* Coding */
                            --epcl-code-background: #211d3f; /* Used on "code" blocks not syntax highlighter */
                            --epcl-code-color: #b0b9c5; /* Used on code blocks not syntax highlighter */
                        
                            /* Others */
                            --epcl-small-border-radius: 4px; /* Used on small elements (like buttons) */
                            --epcl-medium-border-radius: 10px; /* Used on medium elements (like boxes) */
                            --epcl-large-border-radius: 100px; /* Used to generate circles */
                        }
                        </style>

This project uses the following .css files for development:

  • 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.

For speed purposes we are using "Critical CSS" solution instead of style.min.css, you can find the main project CSS in zento/partials/head.bs file.

5. How to change template main color

For Ghost 4.0 and higher you can easily change main color visiting Admin -> Settings -> branding (no coding required):

How to automatically compile SCSS or change color by code

Zento is working on 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 zento.zip (this is the template only file) and remember where is the folder location.

2.- Install a SASS compiler, we recommend you to use Prepros 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 Zento folder (where you already unziped the project).

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

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

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

8.- Zip Zento Folder and reupload into your Ghost Installation.

IMPORTANT NOTE: if you don't see the success message, go to Prepros and navigate to "assets/scss/critical-css.scss" and click "process file". Same apply for main.scss

You can double check if all is working properly on the Logs tab.

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 Prepros 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 basic CSS we recommend to add your changes into Settings (cog icon) -> Code Injection -> site header:

And in the case of Javascript, use the Site Footer instead (so you will not affect too much the speed).

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 Settings -> code Injection -> Site Footer.

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

8. Fonts used

9. Credits.

Fonts Icons

By Remixicons

Images

Adoble Firefly (AI):

https://www.adobe.com/es/sensei/generative-ai/firefly.html

10. Support

If you have any pre-sale question, 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/