Uno Zen for Ghost
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
Related
License
MIT © Kiko Beats
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.
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.
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.
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
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/
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?
Somethings wrong with Twitter share
Twitter share doesn't seem to work properly:
Submitted URL is: https://twitter.com/intent/tweet?text=Welcome%20to%20Ghost%20%EF%BF%BD&url=&hashtags=Getting%20Started&original_referer=
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.
2.6.0: Some Improvements
Features
To fix
Demo
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:The only styling that Casper (as a base example) seems to do to them is align them a little higher:
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):
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.~~
Gulp command fails on fresh install
Running
gulp
throws:The file exists there as readingtime.min.js (note the 't' instead of 'T')
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.
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.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:
I have followed the documentation exactly in setting up this button. I am using Uno Zen
2.9.8
and Ghost1.6.2
. Any suggestions? Thanks!