• Submit Ticket
  • My Tickets
Themeix Support Portal
  • Submit Ticket
  • My Tickets

Docs: Etube Ghost Theme

/Ghost Themes / Etube Ghost Theme /
  • How to run gulp on the computer?
  • Etube Changelog
  • How to add video post in etube?
  • How to override the setting in etube ghost theme?
  • How to add sidebar ad?
  • How to add wide banner ads?
  • How to set up Flyout Drop Down menu in Etube ghost theme?
  • How to set up mega menu in Etube Ghost video blog theme?
  • Ghost Theme Installation
  • Ghost Contact Page
  • Create Authors Page
  • Create Tags Page
  • Disqus Comments
  • Featured Post in ghost
  • Set up the Navigation menu in ghost

How to run gulp on the computer?

Have you install Gulp on NPM?. If not, do the following.

Install the gulp command line utility

npm install --global gulp-cli


Verify your gulp versions

gulp --version

Install NPM Packages

npm install

Now run Gulp command

gulp

If you see any error for node-sass or gulp-sass please install it, by using the following command npm install node-sass , npm install gulp-sass


Open in New Tab

Etube Changelog

Here is the details changelog of the Etube Ghost Theme. If you don’t have the latest version please download it from your account.

v5.1.0 (21 February, 2021)
-- Ghost Latest version support
-- Dropped Youtube API
v5.0.0 (20 June, 2020)
 -- Bootstrap Version Updated
 -- Ghost Content API support for v3.0.0
 v4.1.0 (09 Oct, 2019)
 -- Mega Menu Support
 -- 3 New Custom Homepage Added
 -- Visual Design Improved
 -- Developer Friendly SCSS Added
 -- Gulp File System Added ( Use command gulp, gulp production )
 -- Search Option added in Menu
 -- Few confusing options removed from config.hbs
 -- Footer.hbs changed and call to action marged with that
 -- Video post image/ thumbnail logic improved
 -- All scripts / css minified
 -- Jquery, bootstrap and few other plugins updated.
 -- Custom Error Page Added
 v4.0.0 (Private Release)
 -- Improved Theme
 v3.0.0 
 -- Ghost 2.0.x, Ghost 2.x.x ready
 -- Changed Video Embed System ( Add @@[email protected]@ ) in expert to show the video
 v2.1.0 
 -- Menu Bug fixing
 -- Tag Page Dyanamic Image Issue Fix 
 -- Responsive Fix
 -- Single Video Page Responsive Issue Fix
 v2.0.0 
 -- Bootstrap 4 Supported
 v1.1.0 
 -- Speed Optimization
 -- Security Bug Fix
 v1.0.0 (16 Sept, 2017)
 -- Initial Release

Open in New Tab

How to add video post in etube?

Here following the details process to add video post in etube ghost theme.

1 (Add Title) At first add the video title for you video blog post.

2 (Add Content) Now write the content for your post. You can use any markdown, html or ghost editor blocks there.

3 (Add Tags) Add some tags for that video post. First tag will consider as primary tag and it will be display at the top of the post under title.

4 (Add Authors) Select the author who created that post.

5 (Add Video ID) Now add youtube video ID in the following format in Excerpt area. @@YOUTUBE_VIDEO_ID@@@ it will generate thubnails for the post.

6 (Add Featured Image – Optional) If you want to show your custom featured image then upload it there.


Open in New Tab

How to override the setting in etube ghost theme?

Open your ghost admin dashboard and find the code injection area. Now paste the following code what you want to override,

<script>
    // Slider Options
    var slider_post_limit = 3;

    // Single Carousel 
    var carousel_slider_tag = "trending";
    var carousel_slider_title = "Trending Videos";
    var carousel_slider_limit = "all";


    // Post Category One
    var cateogry_one_title = "Appetizers Recipe";
    var cateogry_one_tag_name = "recipe ";
    var cateogry_one_post_limit = 8;


    //Product And Review Section
    var cateogry_two_title = "Animal Plannet";
    var cateogry_two_tag_name = "animals ";
    var cateogry_two_post_limit = 8;
  


    // news_posts Section Option
    var cateogry_three_title = "Wild And Nature";
    var cateogry_three_tag_name = "nature";
    var cateogry_three_post_limit = 8;

    // Recent News Widget
    var recent_posts_title = "Recent Posts";
    var recent_posts_limit = 5;
     
</script>


Open in New Tab

How to add sidebar ad?

To add sidebar ad use the following code,

<div class="sidebar-widget">
    <div class="sidebar-adds">
        <a href="http://themeix.com"><img alt="banner" src="IMAGE_LINK_HERE"></a>
    </div>
</div>

Open in New Tab

How to add wide banner ads?

To add a wide banner ad use the following code under any section where you want to show the ads.

<div class="big-banner-area themeix-ptb-2 bg-themeix">
   <div class="container">
      <div class="row">
         <div class="col-md-12">
            <div class="big-banner">
               <a href="https://themeix.com/get-ghost-hosting/"><img src="{{asset "images/banners/1.png"}}" alt="banner"></a>  
            </div>
         </div>
      </div>
   </div>
</div>


In that code use your own image link and the targeted url.


Open in New Tab

How to set up Flyout Drop Down menu in Etube ghost theme?

Use the following code in your menu HTML,

<li><a href="#">Home</a><span class="arrow"></span>
    <ul class="dm-align-2 mega-list">
        <li><a href="/">Home One</a></li>
        <li><a href="/home-v2/">Home Two</a></li>
        <li><a href="/home-v3">Home Three</a></li>
        <li><a href="/home-v4">Home Four</a></li>
    </ul>
</li>


Open in New Tab

How to set up mega menu in Etube Ghost video blog theme?

Use the following code inside your menu code,

<li class="mega-menu remove-border active"><a href="#">Mega Menu</a><span class="arrow"></span>
    <ul>
        <li><span class="subtitle">Home Pages</span> <span class="arrow"></span>
            <ul class="mega-list">
                <li><a href="/"><i class="fa fa-home"></i>Home One</a></li>
                <li><a href="/home-v2"><i class="fa fa-home"></i>Home Two</a></li>
                <li><a href="/home-v3"><i class="fa fa-home"></i>Home Three</a></li>
            </ul>
        </li>
        <li><span class="subtitle">Blog Pages</span> <span class="arrow"></span>
            <ul class="mega-list">
                <li><a href="#"><i class="fa fa-angle-right"></i>Blog Grid Style</a></li>
                <li><a href="#"><i class="fa fa-angle-right"></i>Blog Single Page</a></li>
                <li><a href="#"><i class="fa fa-angle-right"></i>Single Video</a></li>
                
            </ul>
        </li>
        <li><span class="subtitle">Video Pages</span><span class="arrow"></span>
            <ul class="mega-list">
                <li><a href="#"><i class="fa fa-angle-right"></i>All Videos</a></li>
                <li><a href="#"><i class="fa fa-angle-right"></i>Single Video V1</a></li>
                <li><a href="#"><i class="fa fa-angle-right"></i>Single Video V2</a></li>
            </ul>
        </li>
        <li><span class="subtitle">Extra Pages</span> <span class="arrow"></span>
            <ul class="mega-list">
                <li><a href="/themes"><i class="fa fa-angle-right"></i>Single Blog</a></li>
                <li><a href="/contact"><i class="fa fa-angle-right"></i>Contact</a></li>
                <li><a href="#"><i class="fa fa-angle-right"></i>Single Video</a></li>
            </ul>
        </li>
    </ul>
</li>

Open in New Tab

Ghost Theme Installation

Here following the easy steps for the ghost theme installation :

1. At first login to the admin panel of your Ghost blog. If you dont have the blog ready then complete the ghost installation first.  

Now login  to your blog. Example URL: yourwebsite.com/ghost

2. Select the Settings option from the left side of your ghost admin panel  and then navigate to the themes section.

Ghost Theme Installation
Select Themes Option from the Settings

3.  Click on the Upload a Theme button.

4. An upload option should appear. Now drag the theme ( theme_file_name.zip ) file in that area. You should get that zip file from our downloaded package.

5. Once completed the theme upload, click on Activate Now button and then activate the theme.

Ghost theme installation is really easy task. But if you are unable to do that. Please feel free contact us. We would happy to help you free for Ghost theme installation.


Open in New Tab

Ghost Contact Page

Please follow the steps bellow to create ghost contact page :

  • Create a new story called Contact for example.
  • Now add your desire content in that page by using the ghost editor.
  • If you want to add functional contact form then i would recommend you 3 best options.
  1. Google Form
  2. Jotform
  3. Formspree.io
  • Google form or Jotform can be easily embeded  in your page as iframe.
  • For the formspree.io you have to add the following code in your page :
<form action="https://formspree.io/[email protected]" method="POST">
 <input type="text" name="your-name" placeholder="Your Name">
 <input type="email" name="_replyto" placeholder="Email" class="float-right">
  <textarea name='message' placeholder="Message"></textarea>
 <button type="submit" class="btn-c buttonfx curtainup">Send Message</button>
  <input class='btn-c buttonfx curtainup' type="submit" value="Send">
 </form>

Open in New Tab

Create Authors Page

Open the ghost admin dashboard and then create a new Page as Named Authors.

Now if you can see the custom template option at the bottom right of that page then simply select *authors and then save that page.

It will automatically pull all the authors data in that page.


Open in New Tab

Create Tags Page

Open the ghost admin dashboard and then create a new Page as Named Tags.

Now if you can see the custom template option at the bottom right of that page then simply select *tags and then save that page.

It will automatically pull all the tags data in that page.


Open in New Tab

Disqus Comments

Disqus allows you to embed comment threads within Ghost posts and pages, including additional functionality like upvoting and adding Emoji reactions. The platform is widely adopted and relatively easy to set up, so you’ve probably come across it before.

This theme comes with Disqus comments enabled. You may change it to other comments platform /plugin too. To change the disqus settings please open the file partials/disqus_comments.hbs and then change the value

https://xxx-themeix-1.disqus.com/embed.js

to your own disqus url (make sure you have the disqus account already) .

Here is the quick start guide for disqus.

That’s all you need to setup Disqus from the theme side. If you get any issue feel free contact us.


Open in New Tab

Featured Post in ghost

You can trun your general post to a featured post in ghost easily.

To set a post as featured, check the box next to “Feature this post” in the post settings menu. When a post is featured, a class of feature will be added to the  {{post_class}} in the HTML code for the post.


Open in New Tab

Set up the Navigation menu in ghost

To set up the navigation menu in ghost, open your Dashboard first.

The url of admin dashboard will be like https://yoursite.com/ghost

Now click the setting icon fom the bottom left panel.

You will get a screen where you can change your primary navigation menu items. Just setup navigation from there for your blog.

If you need any help to create custom style navigation in ghost, feel free to contact us


Open in New Tab

©2016 - 2021 Themeix. All Rights Reserved.
Loading...

Insert/edit link

Enter the destination URL

Or link to existing content

    No search term specified. Showing recent items. Search or use up and down arrow keys to select an item.