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!
Table of Contents
1. Theme Version
Version number: 1.0
Date of release: 19/01/2017
2.1: Unzip the main file you've downloaded from codester.com
2.2: Install Theme
Zip folder Raifa and upload to your hosted control panel.
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.
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.
- 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.
/* TABLE OF CONTENT 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
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.
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.
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.
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.
- 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!