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
Follow the steps below to get started with theme:
TheZaykaFolder and Open solution file.
- Start Debug and Complete installation Process.
- You will need to Upload these files to your Web Server using FTP in order to use it on your Website.
- Make sure you upload the required files/folders listed below:
The other files can be used according to your preferences.
- You’re now good to go..! Start adding your Content and show off your Brand New Beautiful Website in style.
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 .
In Site settings change your logo, layouts , change color of overall theme ,attractive loader visibility, meta data, favicon etc.
Change Phone, Email, Fax, Location etc.
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.
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.
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.
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>
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.
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
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
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
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
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:
||which means apply black color overlay with 0.10 overlay||
||which means apply black color overlay with 0.20 overlay|
||which means apply black color overlay with 0.30 overlay||
||which means apply black color overlay with 0.40 overlay|
||which means apply black color overlay with 0.50 overlay||
||which means apply black color overlay with 0.60 overlay|
||which means apply black color overlay with 0.70 overlay||
||which means apply black color overlay with 0.80 overlay|
||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.
You can add this helper class to any element in your HTML code to set text-align
||which means text-align: left;|
||which means text-align: right;|
||which means text-align: center;|
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] ...
You can add this helper class to any element in your HTML code to make a label. Simply add
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.
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) email@example.com - 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:
For more information about retina documentation and to download retina.js Click here.
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 🙂
– Initial Release
Source & Credits
- Revolution Slider
- Mega Menu
- Angular Js
- Owl Carousel 2
- Magnific Popup
- Jquery appear
- Menu Book
- Bootstrap Datepicker
- Background Video