Minimalist and Elegant theme for Ghost

  • By Kiko Beats
  • Last update: Dec 26, 2022
  • Comments: 15

Uno Zen for Ghost

Last version Build Status Ghost version Node version Donate

Minimalist and Elegant theme for Ghost.

NOTE: Commercial version is available as Uno Urban.


Introduction

Uno Zen is a theme for Ghost inspired in Uno but providing a set of missing features in the original theme that are aligned with minimalist design style.

Whats is new in 2.x

  • Totally rewritten using HTML5 and CSS3.
  • Improved development workflow with gulp + browersync.
  • Improved responsive and mobile experience.
  • Improved SEO Content with meta tags.

Things that already existed:

  • A good 404 page error.
  • Search support.
  • Multiaccount support.
  • Loading progress state for each page.
  • Estimation about the time of reading.

You can see a demo in my own blog. Also you can check the styleguide to view how it looks.

Installation

Please ensure that git and curl is installed on your machine.

Enter the theme folder (content/themes) of your Ghost installation and paste the following command:

$ curl -sSL http://git.io/vcIHr | sh

Alternative installation (to enable deployment to remote server):

Run the above command inside a temporary folder.

Delete the .git folder inside the uno-zen folder.

Copy and paste the uno-zen folder into the theme folder (content/themes).

This will add a static copy of the theme to your blog's git repository and allow changes to be tracked by git.

Setup

This theme needs a DOM selector library. The library is not provided by the theme. Instead, you need to paste one into the Blog Footer in the Code injection of your Ghost installation:

">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js">script>

You can use jQuery, but we recommend use Zepto, a lightweight jQuery alternative compatible with jQuery Plugins:

">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js">script>
<script>jQuery = Zeptoscript>

It should look like this:

Update

One objective of this project is to adopt an effective policy to have the latest version of the theme all the time. We have divided this process into two steps:

Update your current version

Make sure you're in the uno-zen directory. Then run:

$ sh scripts/update.sh

That's all!

Receive a mail notification when a new version is available

Stay tuned for new releases with this IFTTT recipe:



Development and Customization

See in Documentation.

Showcase



.. and many, many more. See all!.

Related

  • Uno Urban – Commercial version of Uno Zen.
  • Bloggy – Brand theme for Ghost.

License

MIT © Kiko Beats

Github

https://github.com/Kikobeats/uno-zen

Comments(15)

  • 1

    Make more things work out of the box

    Made some more inline things configurable right from the Ghost admin panel, so that theme would be customized for specific Ghost blog out of the box, and edits are now required only for advanced customizations.

  • 2

    Mobile device - problem with scrolling

    I am not sure if this relates to the viewport.

    If I view my blog page via the mobile device, I will see the homepage, with the Menu of the left and the list of Posts on the right. I am unable to scroll down the list of posts on the right. (this problem is only resolved i.e able to scroll down the list of posts, if I hide the left Menu by clicking on the Menu button)

    In addition, if I have additional links (using Navigation), I am unable to scroll down view the bottom part of my links and the social links. I am only able to see my photo and the first few links.

    It seems like the whole page of the homepage with the Menu, is truncated if viewed via a mobile device. My mobile device is Android with 5 inch screen, using Chrome version 45.

  • 3

    function ReadingTime is called on the Posts page but doesn't exist

    Issue

    When loading a post, the text "read" is shown. On the backend, the function "readingTime" is called ; this function is a part of uno-urban and not a part of uno-zen

    Collateral Damage

    Any script depending on correct js execution stops (the updated GhostHunter Search for example)

    Suggested fix

    Remove the reference to the readingTime function, if it is to be a premium feature.

  • 4

    Navigation URLs being resolved only for root

    Hi !

    First of all, thanks a lot for the lovely template and the excellent work you've done with it.

    Coming to the gist, I'm very noobish when it comes to JS, so please correct me if I'm doing something wrong. The issue is as follows:

    Whatever URLs I add to the Navigation list, they're resolving to root URL

    Ex:

    (Assume root is example.com)

    Say I'm adding,

    About: example.com/about Google: google.com

    Now, on the home page, two buttons, About, Google are created. But both of them point only to example.com, not to their respective URLs.

    I tried using {{log url}} within the {{for each}} blog in links.hbs. The logged output looks good. (/about, google.com).

    So I'm wondering where it goes wrong.

    Live site: gln.me

  • 5

    Open localhost tab when clicking "blog" button

    Hi, I've just installed and followed all steps on README.md and on DOCUMENTATION.md. When I click the "blog" button, it also open "http://localhost:2368/#open" tab and loads the blog.

    This was observed on Google Chrome v46.0.2490.71; OS: Linux; (normal and incognito tabs) Also observed on Firefox 41.0.2; OS: Linux; and if you access directly a post on mobile version.

    This is not observed on mobile version, for Google Chrome for Android latest version, on the home page.

    Here's where this behavior is happening: on front page: http://jeanlucaslima.com/ and this post to reproduce on mobile: http://jeanlucaslima.com/welcome-to-ghost/

  • 6

    Not able to make it work on heroku

    I can see everything working perfect on local env. But when i push to heroku, its not working. Heroku removes everything in the uno-zen directory but casper is fine.

    Any idea?

  • 7

    Somethings wrong with Twitter share

    Twitter share doesn't seem to work properly: bildschirmfoto vom 2015-10-12 20-05-55

    Submitted URL is: https://twitter.com/intent/tweet?text=Welcome%20to%20Ghost%20%EF%BF%BD&url=&hashtags=Getting%20Started&original_referer=

  • 8

    About the code highlighting

    I want to add other languages support, but according to your instruction: 1) go to prismjs.com/download, 2) generate your custom highlight code 3) paste in the prism file 3) compile the assets. It still doesn't work.

  • 9

    2.6.0: Some Improvements

    Features

    • [x] Better post/tag view.
    • [x] Emojis style based on Twitter.
    • [x] Code Highlights based on Gist.
    • [x] Blockquotes style.

    To fix

    • [x] Improve mobile post view.

    Demo

    • http://kikobeats.com.
    • http://kikobeats.com/tag/craftsmanship.
    • http://kikobeats.com/styleguide.
  • 10

    No styling applied to footnotes

    There isn't any special styling done to Footnotes which can be done as per the docs here.

    Footnotes get placed in <sup> tags like this:

    <sup id="fnref:1"><a href="#fn:1" rel="footnote">1</a></sup>
    

    The only styling that Casper (as a base example) seems to do to them is align them a little higher:

    sup {
        top: -0.5em;
    }
    

    What this means it that it just looks like a normal link to the character 1.

    I don't know how Casper does it, but it also wraps the footnotes themselves into some funky markup (I added a bit of formatting to make it easier to read):

    <div class="footnotes">
      <ol>
        <li class="footnote" id="fn:1">
          <p>
            Some random footnote text. <a href="#fnref:1" title="return to article">↩</a>
          </p>
        </li>
      </ol>
    </div
    
  • 11

    500px Icon not appearing in sidebar - edit: resolved

    edit: mistake made on my part.

    ~~I'm not able to get the 500px icon to appear in my sidebar, there is a link that goes to my 500px account, but no icon. See attached image.~~

    ~~note: you can't see it in the screen shot, but I'm moused over where the 500px icon should be.~~ screen shot 2015-10-07 at 3 45 35 pm

  • 12

    Gulp command fails on fresh install

    Running gulp throws:

    Error: File not found with singular glob: /home/***/src/***/content/themes/***/assets/vendor/reading-time/build/readingTime.min.js (if this was purposeful, use allowEmpty option)

    The file exists there as readingtime.min.js (note the 't' instead of 'T')

  • 13

    hardcoded absolute paths in meta.hbs

    Hi, I put my blog at a directory below root of the website, so all the '/assets/img/....' links in meta were resulting in errors. Easy fix: I put

    {{asset "path to file"}} in place and removed all the ?v=.... parts as Ghost adds that sort of thing dynamically (so they shouldn't be there)

    No idea yet if there is are other relative paths that don't get corrected, so I also added a base HTML tag to deal with that.

  • 14

    Google search action needs update

    when pressing ENTER, browser jumps to https://www.google.co.id/search?q=site:http://www.example.com&cad=h, missing the keyword. I'm using the latest version.

  • 15

    Blog Open Button Node Removal Error

    When I click the "Blog" Button on the front page of the website, I get the following console error:

    Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
        at Object.e [as start] (http://example.com/assets/js/uno-zen.common.js?v=8c2cbc3105:8:12886)
        at b (http://example.com/assets/js/uno-zen.common.js?v=8c2cbc3105:8:12575)
        at HTMLBodyElement.g (http://example.com/assets/js/uno-zen.common.js?v=8c2cbc3105:8:10979)
    

    I have followed the documentation exactly in setting up this button. I am using Uno Zen 2.9.8 and Ghost 1.6.2. Any suggestions? Thanks!