Skip to content
Make Your Ghost Blog Beautiful & Make It Fast & Accessible With the New Ghost Theme: Nubia 😍 πŸŽ‰

Midan - Ghost


Current Version: 1.1.8 - 31 August 2018



Theme Installation

  • Log into the admin section of your Ghost blog yourblog.com/ghost.
  • Select Design from the left-hand side of your admin area and go to the Themes section.
  • Click on the Upload a Theme green button.
  • An upload box will open, then choose the theme (midan.zip) within the downloaded package.
  • Once uploaded. Click on Activate now button to activate the theme immediately or Close if you want to activate it later.

Static Pages

To create a static page, you can start creating a new story. While you are on the story editor page, there is a cog wheel icon () at the top right. Click on that icon, and check the Turn this post into a page box. This will convert your story to a static page.

static page


You can add, edit, delete and reorder menu links on your Ghost blog from the navigation in the admin area located at ghost/#/settings/design.

navigation menu

To include a static page on your navigation menu. First, type the name of the page as you’d like it to appear on your menu in the label field.

label field

Next, click on the URL field of the menu item and we can find that the blog URL is already auto-populate for us. We will need to add the page slug after the final /. Once satisfied with our page configurations. Clicking the blue Save button will add the page to the navigation menu.


Disqus Comments

The Theme comes with Disqus comments enabled.

Open partials/disqus.hbs file. Change the aspirethemes-demos value for the disqus_shortname variable to match your Disqus account shortname.

var disqus_shortname = 'aspirethemes-demos';

So, if your Disqus shortname is exampleone, the final code above should be:

var disqus_shortname = 'exampleone';

That’s all you need to setup Disqus from the theme side. If you get any issue that comments are unable to load. First, make sure you have registered your website with Disqus (Step 1)

And also check Disqus troubleshooting guide if you still have issues.


Posts Per Page

With Ghost 1.0, the Posts per page setting is now part of the theme. The config purpose is to control how many posts to show per page from the package.json file like this:

"config": {
  "posts_per_page": 9
}

Midan theme default value is set to 9 posts per page.


Google Analytics

To integrate Google Analytics, I would recommend reading Google Analytics integration steps by Ghost.


Social media links are placed in:

  • partials/footer.hbs

Ghost 0.8.0 supports adding Facebook and Twitter profile urls from the admin panel, go to Settings > General and add your URLs, and this will update the Facebook and Twitter URLs in the location mentioned above, other social media URLs you can add it from the file.

The theme is using Evil Icons, which contains very simple and clean icons. Here you can find a list of the social media icons to use:

Facebook

<span data-icon='ei-sc-facebook' data-size='s'></span>

GitHub

<span data-icon='ei-sc-github' data-size='s'></span>

Google Plus

<span data-icon='ei-sc-google-plus' data-size='s'></span>

Instagram

<span data-icon='ei-sc-instagram' data-size='s'></span>

LinkedIn

<span data-icon='ei-sc-linkedin' data-size='s'></span>

Odnoklassniki

<span data-icon='ei-sc-odnoklassniki' data-size='s'></span>

Pinterest

<span data-icon='ei-sc-pinterest' data-size='s'></span>

Skype

<span data-icon='ei-sc-skype' data-size='s'></span>

SoundCloud

<span data-icon='ei-sc-soundcloud' data-size='s'></span>

Telegram

<span data-icon='ei-sc-telegram' data-size='s'></span>

Tumblr

<span data-icon='ei-sc-tumblr' data-size='s'></span>

Twitter

<span data-icon='ei-sc-twitter' data-size='s'></span>

Vimeo

<span data-icon='ei-sc-vimeo' data-size='s'></span>

VK

<span data-icon='ei-sc-vk' data-size='s'></span>

Youtube

<span data-icon='ei-sc-youtube' data-size='s'></span>

Update favicon

You can change the favicon in Ghost 1.0 from the Blog settings from the Publication icon section.

Update favicon


Theme Development

If you are a developer and need to do heavy customization work. The theme is using Gulp to compile Sass and JavaScript. This improves the development flow and making it much faster.

First, make sure you have Node.js, npm, and Bower installed. Run the following command in the theme root directory to install npm and bower dependencies.

npm install

To start Gulp, run:

gulp

This will compile Sass and JavaScript files, and start watching changes as you edit files.


Changelog

--- VERSION - 1.1.7: Release on 23 Sept 2017

[+] Added theme version for Ghost pre-1.0 versions
--- VERSION - 1.1.6: Release on 11 Sept 2017

[+] Added responsive video support for TED videos
[+] Fixed pages content width on medium screens
[+] Typography improvements
--- VERSION - 1.1.5: Release on 13 August 2017

[+] NEW: Added support to Ghost 1.0 πŸŽ‰
--- VERSION - 1.1.4: Release on 6 March 2017

[+] NEW: Updated social media icons which included the new Instagram icon design
[+] NEW: Added inline CSS for performance
--- VERSION - 1.1.3: Release on 3 October 2016

[+] Added support for Accelerated Mobile Pages (AMP)
--- VERSION - 1.1.2: Release on 7 August 2016

[+] Add support for social media profiles for the author
--- VERSION - 1.1.1: Release on 1 August 2016

[+] Fix Safari (iPad) postcard list layout issue
--- VERSION - 1.1.0: Release on 14 July 2016

[+] Fixed off-canvas menu toggle issue by removing the duplicated script.js file
[+] Updated to jQuery 3.0.0
--- VERSION - 1.0.0: Release on 13 June 2016
[+] Initial release

πŸ‘‹ Support

Have any questions? Ahmad is always here to help 😊

Contact Ahmad