Raifa - Responsive masonry ghost theme Documentation

This documentation contains tutorials that will make you easier to configure the theme as you want.

Thank you very much for purchasing my item.

If you have any issue or question that this document does not cover, you can contact us via profile page here. Thanks so much!

× Well Done! If you like my work, please rate it. If you rate it with less than 5 stars, please let me know the reason first and I will do my best to improve the item.

Table of Contents

1. Theme Version

Version number: 1.0
Date of release: 19/01/2017

2. Install

2.1: Unzip the main file you've downloaded from codester.com

2.2: Install Theme

Hosted Ghost

Zip folder Raifa and upload to your hosted control panel.

Other Host

Upload raifa folder to content/themes/ on ghost hosting folder.

Restart the service of ghost.

2.3 Login to your Ghost admin, click on the settings options. Select your Theme name in the 'Theme' options dropdown, save it and you are set up with the theme now.


3. Getting to know the Theme

Once downloaded, unzip the compressed folder to see the structure of Theme. You'll see something like this:

3.1 Main Theme Structure

This theme has a fixed layout with a variety of column layouts depending on the page. This theme uses the 1200 grid system (12 columns) which will help streamline any customization you wish to make. If you're unfamiliar with the 1200 grid system, be sure to read about it here.

3.2 CSS

All css file place in assets/css folder, contains:

  • bootstrap.min.css - The main stylesheet that required for a basic theme styling like form, input, div, list element and etc.
  • font-awesome.min.css- The stylesheet for font awesome.
  • normalize.css- The stylesheet for provides better cross-browser consistency in the default styling of HTML elements. It’s a modern, HTML5-ready, alternative to the traditional CSS reset.
  • screen.css - The main stylesheet for default color style.
  • screen-blue.css - The main stylesheet for blue color style.
  • screen-green.css - The main stylesheet for green color style.
  • screen-lightgren.css - The main stylesheet for lightgren color style.
  • screen-magenta.css - The main stylesheet for magenta color style.
  • screen-pink.css - The main stylesheet for pink color style.
  • responsive.css - The plain stylesheet for responsive layout.

The main CSS file (screen.css) contains all of the specific styling for the page. The file is separated into sections using:


								1. Base CSS
								2. Header CSS
								3. Footer CSS
								4. Title Section CSS
								5. Pagination CSS
								6. Post List CSS
								7. Author Header CSS
								8. Single Post Page CSS
								9. Pre-loader CSS

If you would like to edit a specific section of the site, simply find the appropriate label in the css file, and then scroll down until you find the appropriate style that needs to be edited.

3.3 Javascript

All javascript file place in assets/js folder, contains:

  • bootstrap.min.js - The Bootstrap Framework Javascript.
  • jqBootstrapValidation.js- The jQuery Form Validation plugin.
  • jquery.easing.1.3.js - The jQuery effect plugin.
  • jquery.fitvids.js - The jQuery Plugin auto fix width for videos.
  • masonry.pkgd.min.js - The jQuery Masonry Plugin.
  • main.js - The main javascript for Raifa.

The main javascript (main.js) contains all of scripts for Raifa. The file is separated into sections using:

								1. Initialing 
								2. Common Function

4. Setting Up The Theme

4.1 Change Theme color

If you would like to change the color for Theme, open file partials/color-change.hbs:

Just copy code from here and replace and paste there partials/color-change.hbs.
Here is example, you want to use muted-teal color:

Default Color for Theme:


Lightgren Color for Theme:


Blue Color for Theme:


Magenta Color for Theme:


Pink Color for Theme:


Green Color for Theme:


4.2 Change Social Network Icons

In this section you can change Social Network Icons on the Left Sidebar

File: partials/social-bookmarks.hbs


How to find social icon? Template using the Font Awesome for social icon, check out this link http://fortawesome.github.io/Font-Awesome/icons/#brand for more info.

4.3 Comment System Config

Disqis Comment (Default config in your download)

By Default, this theme supports comments supplied by Disqus (http://disqus.com). For assistance in setting up your own Disqus account and customizing it for your needs, please see the Disqus QuickStart Guide: http://help.disqus.com/customer/portal/articles/466182-quick-start-guide

Change the DISQUS SHORTNAME of Disqis Comment from below file.

File: partials/comment-id.hbs


5. Writing Posts

5.1 Basic writing post

There are some notes when you write posts:

+ Put image (![alt](http://)) in the top of post and upload image for image thumbnail post type

+ Put soundcloud embed code in the top of post for audio post type. Example:

							<iframe height="166" src="https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/104708200"></iframe>

+ Put youtube embed code in the top of post for youtube video post type. Example:

							<iframe width="560" height="315" src="//www.youtube.com/embed/aeLTx-ZhlFQ"></iframe>

+ Put vimeo embed code in the top of post for vimeo video post type. Example:

							<iframe src="//player.vimeo.com/video/77270043" width="500" height="281"></iframe>

* Working on Thumbnail Image Ratio for Gallery Style Version

  • + Put image (![alt ratio-1x2](http://)) for thumbnail image with ratio 1x2 (1 col and 2 rows)
  • + Put image (![alt ratio-2x2](http://)) for thumbnail image with ratio 1x2 (2 cols and 2 rows)
  • + Put image (![alt ratio-2x1](http://)) for thumbnail image with ratio 1x2 (2 cols and 1 rows)
  • + Put image (![alt ratio-3x1](http://)) for thumbnail image with ratio 1x2 (3 cols and 1 rows)
  • + You can apply these case for other ratio

5.2 Feature writing post

5.2.1 Feature Image

Please Follow this image.

5.2.2 Feature Post

Please Follow this image.

5.2.3 Feature iframe youtube/vimeo/soundcloud embed.

For iframe youtube/vimeo/soundcloud embed just use featured class. Here is a example to understand easier.


6. Credits

6.1 Javascript

Raifa uses several scripts many of which are documented within the theme's code. If you're a developer, you will find this particularly useful.

6.2 Images

Images showed on preview files are from unsplash.com. Being designed with multipurpose attitude in mind, we showed some images on our preview files so you can have an idea what can be accomplished. Not a single image file is included with the download, they were just for demo purposes due to copyright.

6.3 Fonts

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. Please contact me via email or social media. I'll do my best to assist!