Raifa - Responsive masonry ghost theme Documentation

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

2.2: Install Theme

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.

Enjoy!

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:

							/*================================================================*/
							/*  TABLE OF CONTENT

								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:

							/*  TABLE OF CONTENT
								1. Initialing 
								2. Common Function
							*/
						

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

								YOUR_DISQUS_SHORTNAME
							

5.1 Basic writing post

There are some notes when you write posts:

+ Put image () 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 () for thumbnail image with ratio 1x2 (1 col and 2 rows)
• + Put image () for thumbnail image with ratio 1x2 (2 cols and 2 rows)
• + Put image () for thumbnail image with ratio 1x2 (2 cols and 1 rows)
• + Put image () for thumbnail image with ratio 1x2 (3 cols and 1 rows)
• + You can apply these case for other ratio

5.2 Feature writing post

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.

• Bootstrap Framework
• jQuery Masonry
• FitVids

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

• Google Fonts - http://www.google.com/webfonts
• Font Awesome - http://fortawesome.github.com/Font-Awesome/

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!