“Anima: Multipurpose Ghost Theme. ” Documentation by “Julian Ćwirko (pxThemes)


“Anima: Multipurpose Ghost Theme.”

Created: 23/11/2014
Last update: 27/03/2021
Actual theme version is: 3.0.0
By: Julian Ćwirko (pxThemes)
Email: [email protected]

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email me via my user page contact form here Thanks so much!


Let's see what we've got here:

  1. Ghost theme instalation
  2. Anima theme file structure
  3. Zurb Foundation and Sass
  4. Working without Sass
  5. Features without configuration needed

So, how can I do this:

  1. How can I add Youtube or Vimeo videos to my posts?
  2. How can I use Zurb Foundation html elements?
  3. How can I use the Font Awesome font icons?
  4. How can I use a gallery carousel and image popup?
  5. How can I configure the Disqus comments?
  6. How can I add some static pages and a menu block?
  7. How can I feature a post?
  8. How can I use the code highlighter?

All 3rd party materials used:

  1. List and Credits

Troubleshooting:

  1. Error 502 after theme upload

Important notes:

You can find last code changes here: Last version changes (27.03.2021)


Let's see what we've got here:

A) Ghost theme instalation - top

Just copy 'anima' folder to your installed Ghost 'themes' folder and then restart your application. Log into admin area and go to the 'Settings' page, then Themes. Choose 'anima' from 'Theme' selector. That's it!


B) Anima theme file structure. - top

I use a standard folder structure.

There is a partials folder with some files. Here you can configure your Disqus comments, headers, and also menu links.

There are .scss and .css files in the assets/css folder (you can use the scss files with your favorite Sass workflow. I use the standard Sass command-line utility 'node-sass -w css -o css' in asset folder)

There are 'vendor' folders with all third-party plugins in the assets/css and the assets/js folders.


C) Zurb Foundation and Sass - top

You can use Sass compiling. Use assets/css/post.scss and assets/css/style.scss files. They compile to style.css and post.css

You can also use Zurb Foundation (all is configured, Anima theme is based on Zurb Foundation framework) Grid and other Foundation elements, but you must write HTML in your Ghost markdown editor. All rich documentation of the Zurb Foundation framework is here: http://foundation.zurb.com/docs/

In Ghost markdown editor, it’s a good idea to write all your HTML code on one line without any spaces or breaklines.


D) Working without Sass - top

If you don't want to work with Sass just edit css files in assets/css.


E) Features without configuration needed - top

We have some features here which are working without any configuration

If you have any questions that are beyond the scope of this help file, please feel free to email me via my user page contact form here


How can I do this...


A) How can I add a Youtube or Vimeo videos in my posts? - top

Simply embed code in your Ghost markdown editor. See: http://anima.pxt.be/video-soundcloud-etc/


B) How can I use Zurb Foundation html elements? - top

You can use a couple of Zurb Foundation HTML elements to write in the Ghost markdown editor. Here are some links to Zurb Foundation docs. Remember to remove all white spaces and breaklines from your html blocks when you’re writing in Ghost markdown editor.

Check Zurb Foundation documentation: http://foundation.zurb.com/docs/

Also see this example: http://anima.pxt.be/zurb-foundation-5/


C) How can I use the Font Awesome font icons? - top

Anima theme uses Font Awesome: http://fontawesome.io/ The docs are really clear so you can use them without any configuration. Example is here: http://anima.pxt.be/font-icons/


Anima theme uses Owl Carousel : https://owlcarousel2.github.io/OwlCarousel2/

General usage in Anima theme:

<div class="anima-carousel">
 <div class="item">
  <a href="/content/images/2014/Jan/1.jpg" class="anima-image-popup">
   <img src="/content/images/2014/Jan/1.jpg" alt="">
  </a>
 </div>
 ...
</div>
example: http://anima.pxt.be/image-carousel-with-popups/

If you want Lightbox on image click, simply add 'anima-image-popup' in your <a href=""> link like it is shown.

Anima uses Magnific Popup here: http://dimsemenov.com/plugins/magnific-popup/

You can use Magnific Popup anywhere you want, but remember that in Ghost you still must write html in markdown editor. Therefore, if you want to place Magnific Popup in (for example) any link you can write this html code:
<a href="path/to/image.jpg" class="anima-image-popup">Some link to image popup</a>

In Ghost markdown editor, it is a good idea to write all your html code on one line without any spaces or breaklines.


E) How can I configure the Disqus comments? - top

Anima theme can be fast and simply integrated with the Disqus comments engine.

If you have an account at : http://disqus.com/ create a forum for your Ghost blog open assets/js/anima.js file and replace Anima theme variable with yours and that’s it. Search for 'disqus_shortname' variable.

If you don't want to use Disqus at all, simply open partials/details-view.hbs and remove the {{> disqus }} part.


F) How can I add some static pages and a menu block? - top

You can do this by selecting Pages in Ghost admin panel.

After that, you can go to your 'Navigation' panel in 'Settings' section. There you can enter links to previously created static pages or any other proper links.

You don’t need to use the menu. If you’d like, just remove all navigation links. More about navigation feature you will find in official Ghost documentation and here: https://blog.ghost.org/navigation/


This is simple. Click on the star icon for the selected post on the post list view.

Featured posts are marked with a star on the bottom right corner of a single post block. (index view)


H) How can I use the code highlighter? - top

Summer theme uses https://highlightjs.org/ I think it is the best code higlighter now. It has many themes and supports multiple languages. If you want to change theme just rename css file in default.hbs. There is a link to the git hlightjs repo with themes styles. So use the same names with .min.css extension.

If you want to use better looking code highlighting, just place your code behind markdown markers like:

```
(..your code here..)
```

See demos here: http://anima.pxt.be/code-highlighter/


All 3rd party materials used

A) List and Credits - top


Troubleshooting

A) Error 502 after theme upload - top

This is usually due to owner errors with the files. After copying the theme you need to make sure you set it to be owned by the same user. This should be the same user you are running Ghost as.

For example: the command to do this could be
cd /var/www/
followed by
chown -R ghost:ghost ghost/*




Ending..

First of all, I’m glad that you like my work, and I'm glad that you like Envato Marketplace. It’s only through them that we can communicate.

You can modify all that you need. This is only html. Ghost isn't very big for now, so there is a lack of functionalities, but as soon as they manage (all that plugin stuff, cover images, shortcuts, etc.) I will be able to improve this theme.

If you have any questions please contact me and I will try to help you.





Julian Ćwirko

Go To Table of Contents