The Zayka Introduction

This documentation will give you an understanding of how The Zayka theme is structured and guide you in performing common functions.

NOTE: We will not respond to any support questions on Item comment section or through e-mail. If this document doesn’t answer your questions feel free to open up a private ticket in our support forum

If you want to customize, please contact us here: our support forum

Author: Potenza Global Solutions

Installation

Follow the steps below to get started with theme:

  1. Extract TheZayka Folder and Open solution file.
  2. Start Debug and Complete installation Process.
  3. You will need to Upload these files to your Web Server using FTP in order to use it on your Website.
  4. Make sure you upload the required files/folders listed below:
    • assets
    • bin
    • Content
    • css
    • DBScript
    • fonts
    • html
    • images
    • js
    • JsController
    • revolution
    • Scripts
    • Views

    The other files can be used according to your preferences.

  5. You’re now good to go..! Start adding your Content and show off your Brand New Beautiful Website in style.

Application Architecture

The Zayka comes with user friendly settings which help user to make changes in site without any hesitation. The theme settings are divided in following parts.

  • Site Setting – To change between 5 layouts, change overall color of theme, loader visibility ,site logo, site icon, add meta data etc.
  • Contact Setting – To change contact detail like phone, email, fax, location.
  • SMTP Setting – To set mail notification.
  • Paypal API Configuration – Simple way to set paypal payment integration .
  • Set Master Layout – Create comman master layout.
  • Create Dynamic Pages – Simple way to set paypal payment integration .

Site Setting

In Site settings change your logo, layouts , change color of overall theme ,attractive loader visibility, meta data, favicon etc.

Contact Setting

Change Phone, Email, Fax, Location etc.

SMTP Setting

Simple Mail Transfer Protocol – Set mail notification to get notified.

Paypal Payment Setting

Set Username , Password, PayPal API Signature , Environment (Sandbox/Live) and make it active to start payment gateway.

 

Create Master Layout

Add Master layout name and add HTML, for Sub pages add @RenderBody() fucntion.

Create Dynamic Page

Add Page name ,Select Master layout from dropdown , Browser Title, Meta Keyword, Meta Description, Page sort order in navigation.

How To Add Partial View

Click on Add Partial link. In popup window select your desired partial and it will be added in the view.

Helper Classes

We have created some really useful helper classes for you. These classes help you to quick position elements without writing new CSS rules. These classes are generic helper classes predefined in the CSS pages, here is quick view what they can do

Page section padding

You can add this helper class to set section padding top 80px and padding bottom 80px.
Add page-section-ptb class in section tag. See example below:

<section class="... page-section-ptb">
   [YOUR CONTENT]
</section>

Note Use this helper class to maintain all page section spacing. You can also use page-section-pt for only padding top and page-section-pb for only padding bottom.

Section title

You can use this code for your page section title to maintain title style.

<div class="section-title text-center">
  <div class="title-separator">
    <i class="glyph-icon flaticon-food-27"></i>
  </div>
  <h2> <span class="text-orange">The Zayka </span>Pricing</h2>
  <p>Choose your perfect pricing plan</p>
</div>

Text color

You can use color in the Text. simply add .text-orange ( or any color you want) class where you want to use. See example below:

<div class="text-orange">
  [YOUR TEXT CONTENT]
</div>

Note We include 5 color helper class in our template .text-orange .text-white .text-black .text-gray and .text-light-gray. you can add unlimited color class according to your needs.

Background color

You can use color in the background. simply add .orange-bg (or any color you want) class where you want to use. See example below:

<div class="orange-bg">
  [YOUR CONTENT]
</div>

Note We include 4 background color helper class in our template .orange-bg .white-bg .black-bg and .gray-bg. You can add unlimited background color class according to your needs

Background Images and pattern

Background

You can use an image in the background with parallax effect with simply add InlineStyle in div tag and by use of this you can create your own bg. See example below:

<div style="background-image:url(Path); ">    
  [YOUR CONTENT]
</div>

If your background is small and you want to use repeated background then use styling property background-repeat and set the value repeat or no-repeat. See the example below:

<div style="background-image:url(Path); background-repeat:no-repeat;">
  [YOUR CONTENT]
</div>

If you want to use your background like cover or container so, you just add styling property background-size and set the value cover or container. see the example below:

<div style="background-image:url(Path); background-size:cover;">    
  [YOUR CONTENT]
</div>

Note If you want to repeat pattern kindly use background-repeat:repeat;

Background overlay

You can add this .bg-overlay-black-10 class to any element in your HTML code to apply overly color on any image or any section. See example below:

<div class="bg-overlay-black-10">
  [YOUR CONTENT]
</div>

Here are some predefined overlay classes you can use:

Class Description Class Description
.bg-overlay-black-10 which means apply black color overlay with 0.10 overlay .bg-overlay-black-20 which means apply black color overlay with 0.20 overlay
.bg-overlay-black-30 which means apply black color overlay with 0.30 overlay .bg-overlay-black-40 which means apply black color overlay with 0.40 overlay
.bg-overlay-black-50 which means apply black color overlay with 0.50 overlay .bg-overlay-black-60 which means apply black color overlay with 0.60 overlay
.bg-overlay-black-70 which means apply black color overlay with 0.70 overlay .bg-overlay-black-80 which means apply black color overlay with 0.80 overlay
.bg-overlay-black-90 which means apply black color overlay with 0.90 overlay

Note You can create your own helper classes by creating the class in the stylesheet as per your requirement. This helper class only support RGBA color values.

Text align

You can add this helper class to any element in your HTML code to set text-align

Class Description
.text-left which means text-align: left;
.text-right which means text-align: right;
.text-center which means text-align: center;

Separator

You can add this helper class to any element in your HTML code to add Separator line. Simply add hr tag where you want to add the line. See example below:

...
[SECTION 1 CONTENT]
...
</section> <!--Section 1 End-->
<hr/>
<section> <!--Section 2 Start-->
...
[SECTION 2 CONTENT]
...

 

Label

You can add this helper class to any element in your HTML code to make a label. Simply add label and label-danger (or any given below) class where you want to add a label. See example below:

<span class="label label-danger">Label name</span>

Here are some default labels you can use or you can make your own label as per your requirement.

Class Description Result
.label-default Default label Default
.label-primary Primary label Primary
.label-success Success label Success
.label-info Info label Info
.label-warning Warning label Warning
.label-danger Danger label Danger

Retina Display

The basic concept of a Retina image is that an image twice the size of a standard web image will be displayed on the screen. On a non-retina device an image will be 100px X 100px whereas a Retina device will display the same image but at 200px X 200px. Most of the devices use this branded concept for Retina devices like having approximately twice the pixel density of a non-retina device.

If you want to get perfect looking images on Retina screens, for example you build a website where you upload regular images into content, you must always upload 2 images in media.
Add new section which looks like below:

 

my_image.png - this is the name for standard image (e.g. 100px X 100px)
my_image@2x.png - this is the example name for retina image and file must be always 2x larger than regular image (e.g. 200px X 200px)

Note To make your website completely retina ready, you have to download ratina.js and include retina.js in your HTML head section. See example below:

 

<!-- retina --> 
<script type="text/javascript" src="js/retina.js"></script>

For more information about retina documentation and to download retina.js Click here.

Browser Support

The Zayka supports all major Browsers like Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer 9 and above.

How to rate this item

If you like our template and support, please do not forget to rate it with 5 stars in your ‘downloads’ section and write a review in comments as it will add more value to our services!

Just click http://themeforest.net/downloads and you will see this template there. Hit 5 Stars to make us happy and we will make more awesome templates for you 🙂

 

Change Log

Version 1.0

– Initial Release

Source & Credits

All images and videos are for preview purposes only and are not included in the download files. Images are of copyrights under Creative Commons CC0.

Images

Scripts

CSS & Fonts

Suggest Edit