• No results found

Version 1.0 OFFICIAL THEME USER GUIDE. reva. HTML5 - Responsive One Page Parallax Theme

N/A
N/A
Protected

Academic year: 2021

Share "Version 1.0 OFFICIAL THEME USER GUIDE. reva. HTML5 - Responsive One Page Parallax Theme"

Copied!
33
0
0

Loading.... (view fulltext now)

Full text

(1)

OFFICIAL THEME USER GUIDE

reva

HTML5 - Responsive One Page Parallax Theme

Version

(2)

G R E E T I N G S F R O M D E S I G N O V A

Thank You For Purchasing Our Product.

Important - FAQ:

1)

What is this User Guide for ?

This user manual is under the scope of ordinary users in order to setup their static website

using this HTML5 theme. If you are looking for advanced customization please note that you

need to familiarize the relevant technologies used to build this theme.

2)

How to use this HTML5 theme?

This theme is purely HTML template used to create a static website. This theme is not

compatible with WordPress, Weebly or FrontPage systems. If you are looking for WordPress

themes please visit our themeforest portfolio and see themes with title as “WordPress”.

3)

“Stylesheet missing” error. Why?

As we have already mentioned on themeforest page, this is HTML5 template and not a

WordPress theme. But if you try to install this theme on any WordPress system then the above

stated error occurs. There is nothing can be done about this rather than purchasing a

WordPress version (if available) .

4)

How to get theme updates and future versions?

We regularly release updates and bug fixes on our themes and we use Twitter to announce it to

our customers. Please follow us

@designovastudio

(3)

5)

How to get support on this theme?

This user manual covers everything you need to setup the website. But if you find any bugs,

issues and limitations on this theme please contact our support team via email to:

info@designova.net

.

When you send a support request email you

must include

the

purchase

code

and

purchase date

of the product (received from Market Place website). Support request

emails without these information will not be answered.

6)

Support v/s Theme Customization?

When we offer free support, we are always here to help you when bugs and issues are reported

on our themes and we will not charge anything for this service as we are committed to give our

level best on our premium products.

But this free help does NOT mean to be any free customization or modification of our themes.

We are a small team and we are

not available for any free customization

services at the

moment. But if you like you can opt for premium theme customization services, kindly let us

know via email to:

info@designova.net

. If our developers are available we will get back to you

with a nice plan and schedule

(4)

Table of Contents

Chapter 01

- Theme Information

Chapter 02

- Files Included

a.

Directory Structure

Chapter 03

- Template Layout and UI Framework

a.

Bootstrap Setup

b.

Upgrading Bootstrap on future

Chapter 04

- Theme Styling and Skinning

Chapter 05

- Featured Modules and Markup

a.

Full Screen Slider on Home Page

b.

Testimonials Slider

c.

Milestones Slider

d.

Filterable Portfolio (ISOTOPE)

e.

Google Map Setup

f.

Contact Form Configuration

Chapter 06

- Fonts and Typography

Chapter 07

- Images, Icons and Graphics

Chapter 08

- Sources and Credits

Chapter 09

- Theme Updates and Bug Fixes

(5)

REVA - VERSION1.0 - THEME USER GUIDE

REVA – Premium Theme from Designova

Theme Information

eing a premium HTML5 template, Reva is a simple and easy to use creative parallax theme with with fully responsive layout built using Bootstrap framework version 2.2. This theme features Single Page Scroll-Down layout with parallax overlay layers and this theme is perfectly responsive responsive and cross-browser compatible. Reva comes with a completely editable layout with the power of Bootstrap framework. This can make it extremely easy for ordinary users to setup their own website. But it is also handy to extend the template to any level as your creative freedom. Template

includes w3 valid cross browser compatible HTML5 markup.

Main Features

Easy to use Parallax theme with a nice design - a creative theme best suitable for creative agency /

individual portfolios and for innovative business showcase.

Perfectly responsive across all devices including iOS mobile devices, android and windows phone

platforms.

Built with Bootstrap 2.3.0 – World’s best Responsive Front-end Framework. Most easy to use and

customize.

Parallax Layers + Overlay Content that produces a stunning scrollable panel visual effect.

ISOTOPE (Premium Plugin Worth USD 15) Powered Filterable Portfolio / Gallery with Lightbox.

Project Info + Images Slider inside Lightbox via AJAX – the best way to showcase your project

information and images at the same time.

Full Screen Image + HTML slider on home page powered by MaxImage plugin.

Chapter

1

(6)

REVA - VERSION1.0 - THEME USER GUIDE

REVA – Premium Theme from Designova

Milestones Carousel Slider – a very usable carouFredSel carousel implementation that supports any

HTML5 content.

Testominal Slider, Pricing Tables etc.

Also includes all UI patterns from Bootstrap.

 Precisely hand-coded HTML5 template with w3 valid cross-browser compatible markup.

Working contact form with validations and PHP Email sender

(7)

REVA - VERSION1.0 - THEME USER GUIDE

REVA – Premium Theme from Designova

Files Included

Reva includes a clean and clearly defined file structure so that our users can easily understand the hierarchy of theme assets. This will make it easy to edit the theme and customize it (for experienced users).

Kindly find the directory structure explained with screenshot given below:

Directory Structure

Chapter

2

(8)

REVA – Premium Theme from Designova

FOLDER / FILE NAME

DESCRIPTION

WHAT TO DO

assets

Contains files for Bootstrap

framework along with some

re-usable extensions

Just replace the inner files if

you need to manually

upgrade to a newer version of

Bootstrap

images

Contains all image resources

used in this theme

Please replace placeholder

images with your own images,

don’t forget to keep exact

dimensions and format as

original placeholders

javascripts

Contains all JS / jQuery library

files used in this theme

Edit / Replace only if you are

familiar with JS / jQuery codes

mail

Contains resources for PHP

email sender

Please DO NOT modify unless

you know exactly what you are

doing

stylesheets

Contains all CSS files used

within this theme. This

includes CSS files specific to

plugins and modules used in

this theme

Modify only STYLE.CSS for

changing the look and feel of

theme. If you are unsure

about other CSS files please

keep them unchanged.

Error404.html

File for “Page Not Found”

cases – Error Page

Keep this file exactly on same

location as it is. You can

change the name if it is

required by your web hosting

provider.

Index.html

Main web page / home page

Keep this file exactly on same

location as it is. DO NOT

change the name.

Mail.php

Mail sending PHP module

Keep it on place. DO NOT

modify

(9)

REVA – Premium Theme from Designova

Sendcontact.php

Email sender configuration

PHP script

You have to change some

values in this file; this will be

explained on following section

within this guide.

Project-ajax.html

Web page to show a single

project (shown inside lightbox

via AJAX only).

Use this as a template to

display separate project

information. Clone this and

build as many pages as your

projects are. You have to

manually rename and link

them from portfolio module.

This will be explained on

following section within this

guide.

Thanks.html

Web page displayed as a

response after sending the

contact form message via

home page.

Feel free to edit the contents.

DO NOT change the name of

this file.

(10)

REVA – Premium Theme from Designova

Template Layout and UI

Framework

Reva is a single page website with scroll-down sections which stands for ‘pages’ inside this theme. So you have different

sections on a one-page, you can easily add/remove sections as needed. Kindly follow the guidelines given below:

1. Template Layout Setup:

Setting Up Navigation:

As a one page template, Reva has navigation which is a collection of “click to scroll” links. We use jQuery to scroll down to various sections (pages) inside the same file (index.html). Please see the markup corresponding to Main Navigation, given below (refer Index.html – Line 121):

Chapter

(11)

REVA – Premium Theme from Designova

Here the ANCHOR tag (<a>) holds an HREF attribute which contains the target (ID) of the section. When user clicks on this anchor tag, the page will be scrolled down to that section.

<a id="about-linker" href="#about">about</a>

When clicked on this link, page will be scrolled down to:

<section id="about" class="page clearfix">

Template Sections Overlay:

There are various sections (similar to pages) in this template, as given below:

Section / Page Name Identifier on markup Modules / Plugins used

Intro / Home <div id="index"> Full Screen Slideshow

About <section id="about"

class="container-fluid section page">

Portfolio <section id="portfolio"

class="container-fluid section page">

Isotope Filterable Portfolio + Colorbox Lightbox with AJAX content + FlexSlider integrated.

Services <section id="services"

class="container-fluid section page">

Milestones <section id="milestones"

class="container-fluid section page">

Responsive content carousel via carouFredSel

Contact <section id="contact"

class="container-fluid section page">

(12)

REVA – Premium Theme from Designova

Setting up a section / page:

A section / page are a markup region contained within an HTML5 SECTION tag, example as given below:

We use the above region to wrap up each section and inside this region we build other elements using Bootstrap framework’s native arrangements via HTML5 markup. So, you have to understand how to create elements using Bootstrap, please read on.

2. Bootstrap Framework Setup:

Reva is completely built with Bootstrap 2.3.0 responsive framework which is the best front-end

development framework available at present. It is very easy to edit the layout as well as for making any advanced customization. Kindly note, you have to familiarize Bootstrap’s native arrangements (it is easy) and short codes before you proceed.

Bootstrap’s grid system

The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features

enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.

(13)

REVA – Premium Theme from Designova

Setting up the grid – HTML

For a simple two column layout, create a .row and add the appropriate number of .span* columns. As this is a 12-column grid, each .span* spans a number of those 12 12-columns, and should always add up to 12 for each row (or the number of columns in the parent). Please see the markup:

1. <div class="row">

2. <div class="span4">...</div>

3. <div class="span8">...</div>

4. </div>

Offsetting columns

Move columns to the right using .offset* classes. Each class increases the left margin of a column by a whole column. For example, .offset4 moves .span4 over four columns.

1. <div class="row">

2. <div class="span4">...</div>

3. <div class="span3 offset2">...</div>

(14)

REVA – Premium Theme from Designova

We are having page limitation to explain everything about Bootstrap here. So for more information we refer to original documentation for Bootstrap, found here:

http://twitter.github.com/bootstrap/scaffolding.html

Upgrading Bootstrap on Future:

As Web is always changing day by day, we would like to keep our themes expandable and adaptable to innovations. We have kept all assets and files related to Bootstrap framework on a separate folder called ASSETS found on the following location:

[THEME’S ROOT FOLDER]/assets

Please replace the following files contained in this ‘ASSETS’ folder with your new files coming from Bootstrap’s download ZIP pack. You can see exactly the same folders there. Replace the inner files exactly as it is.

[THEME’S ROOT FOLDER]/assets/img [THEME’S ROOT FOLDER]/assets/css [THEME’S ROOT FOLDER]/assets/js [THEME’S ROOT FOLDER]/assets/ico

(15)

REVA – Premium Theme from Designova

Theme Styling and

Skinning

Reva is completely styled majorly with a single CSS file that contains all the style rules for this theme. Please see the following file:

[THEME’S ROOT FOLDER]/stylesheets/style.css

Feel free to modify / change the rules stated in this CSS file. You better have a basic understanding of CSS.

Building a new skin variant (optional):

Just clone the entire ROOT FOLDER and go the STYLE.CSS. Now you can see the color specific values (Hex Value) related to each component on the template. For example, in the case of main heading and promo text found in each section (page) such as:

Here the components are:

Chapter

(16)

REVA – Premium Theme from Designova

<div class="row">

<article class="span12 text-center main-title"> <h1>About</h1>

<img title="designova" alt="reva" src="images/legends/star-red.png"/>

</article> </div>

<div class="row">

<article class="span12 text-center promo-text">

<p>A modern creative theme featuring parallax layers and minimalistic design at it's best. The layout is perfectly responsive across all devices, built with latest Bootstrap 2.3.0</p>

</article> </div>

And the style rules are:

Style.css: Line 175

.main-title

{

color:#000;

margin-top:60px;

}

.main-title > h1

{

font-family:Ostrich_Sans_Black;

font-size:96px;

margin-bottom:20px;

}

.promo-text

{

margin-top:20px;

}

.promo-text > p

{

color:#aaa;

font-family:Open_Sans_R;

font-size:24px;

font-weight:400;

(17)

REVA – Premium Theme from Designova

line-height:32px;

}

You can also change many other styling parameters such as font style, font size, spacing and alignment etc.

(18)

REVA – Premium Theme from Designova

Featured Modules and

Markup

1) Full Screen Slider on Home Page

We have arranged a full screen slider which showcases various images along with content which you may have to display on your website. In order to make things pretty nice we have kept this inside the home page itself.

This nice module is powered by jQuery MaxImage plugin.

Each slider block is created via DIV elements where the Heading, Image and Paragraphs are contained inside. Please see the source code screenshot given below:

Chapter

(19)

REVA – Premium Theme from Designova

<img title="designova" alt="reva" src="images/bg/bg1.jpg" /> holds each image shown on the slider

CLASS=”in-slide-content” stands for each content block.

CLASS=”PROJECT-LINK” holds the HREF value as target address of the page displayed when user clicks on this project block. In the demo we have kept all project blocks linked to “single_project.html”. You can clone this page and rename it as you like, then link to relevant project block.

The slider engine behind this module is jQuery MaxImage. This module is very simple script and we have kept this within a common JS file:

[ROOT FOLDER]/javascripts/scripts.js

(20)

REVA – Premium Theme from Designova

MaxImage plugin is extremely powerful carousel plugin which has a wide variety of options. You can refer original documentation of the plugin to see more possibilities:

http://www.aaronvanderzwan.com/maximage/2.0/

2) Testimonials Slider

We have a simple but useful testimonials slider. Even if we call it as testimonials slider you can use it to display any HTML5 elements including images and content.

(21)

REVA – Premium Theme from Designova

jQuery Caroufredsel is used to build this module. This module is very easy to use and we have kept this within a common JS file:

[ROOT FOLDER]/javascripts/script.js

A script for initialization of this plugin is shown below:

Caroufredsel plugin has more advanced options. You can refer original documentation of the plugin to see more possibilities:

http://caroufredsel.frebsite.nl

3) Milestones Slider

We have easy to use content slider on Inner Pages such as Milestones Page. This slider is alos powered by Caroufredsel plugin and it supports captions via HTML5 content.

(22)

REVA – Premium Theme from Designova

The plugin which demonstrated in previous section - jQuery Caroufredsel - is used to build this module also. This module is very easy to use and we have kept this within a common JS file:

[ROOT FOLDER]/javascripts/script.js

A script for initialization of this plugin is shown below:

Caroufredsel plugin has more advanced options. You can refer original documentation of the plugin to see more possibilities:

http://caroufredsel.frebsite.nl

(23)

REVA – Premium Theme from Designova

We have a stunning and premium portfolio module within this theme which is powered by an amazing jQuery plugin known as ISOTOPE. This is a premium plugin worth USD 15.

This filterable portfolio / gallery section includes a stunning filterable animated gallery built with grid based blocks. Each of these block are linked with separate categories and these categories can be triggered via categories filters.

FILTERS:

Filters are organized as <li> items in the first list as shown below:

Note that each filter item is having the following markup: <a href="#" data-filter=".category1">Design</a>

Here the DATA-FILTER holds the value which is the CLASS NAME FOR A PARTICULAR CATEGORY block inside the gallery. When user clicks on this filter item, the gallery item blocks having only that class name will be show via an animation.

GALLERY / PORTFOLIO ITEM BLOCKS:

And on the second list, each <li> holds portfolio item which can be triggered via categories assigned as

CLASS values as shown above. Just replace these values as you like, please keep the exact value combinations on HREF attribute of filter items also.

(24)

REVA – Premium Theme from Designova

For more information please refer the original preview along with demonstrations shown on plugin’s source page

http://isotope.metafizzy.co/

The plugin in invoked inside:

[ROOT FOLDER]/javascripts/script.js

All the images contained in this module are located inside: [ROOT FOLDER]/images/portfolio

GALLERY / PORTFOLIO ITEM LIGHTBOX:

Each portfolio item when clicked, displays lightbox containing a larger image or project information which can also include an image slider within the lightbox. This lightbox is implemented with ColorBox plugin. The location of files to be opened in this lightbox is given via:

<a class="group1" href="project-ajax.html" title="Project Title Goes

Here"><img title="designova" alt="reva" src="images/portfolio/4_thumb.jpg" />

when clicking on this link to trigger lightbox for this item. Here we have href="project-ajax.html" attribute which is the name of project page to be loaded into the lightbox when clilcked. This loading is performed via AJAX via jQuery.

IMPORTANT:

In order to showcase more projects please do the following:

1) Clone the file project-ajax.html 2) Rename it to something else

3) Now link this new file to any portfolio block (explained above) and on clicking this portfolio item the AJAX is loading the content from this newly linked file.

4) Repeat the same procedure for all project blocks / project pages.

Fore more settings on this lightbox please visit http://jacklmoore.com/colorbox

(25)

REVA – Premium Theme from Designova

We have a nice image slider inside the Lightbox which act as project image slider. You can see these images in the following location:

[ROOT FOLDER]/images/projects/project1/01.jpg

These images are declared inside each and evey project page (AJAX feed), as shown below:

[ROOT FOLDER]/ project-ajax.html

This plugin is FLEX Slider which has more options which can be found here.

http://www.woothemes.com/flexslider/

5) Google Map Setup

We have integrated google map inside this theme.

How to setup your own location on the map?

Whenever you want to show a map with your own location showed up, please do the following: 1) Open the file: [ROOT FOLDER]/javascripts/script.js

2) Go to Line 180:

var latlng = new google.maps.LatLng(41.517832,-8.493118); Also go to Line 212:

var companyPos = new google.maps.LatLng(41.517832,-8.493118); 3) Now change these values to your own (L,L) combination.

If you are unsure about the (L,L) values please visit this:

http://universimmedia.pagesperso-orange.fr/geo/loc.htm

(26)

REVA – Premium Theme from Designova

The template is featuring a fully working contact form with PHP mail sending ready. We have kept

everything ready, you have to only provide your own email id instead of the predefined demo email id. This can be done by simply modifying the email id, as shown in the SENDCONTACT.PHP file, located in root directory.

[ROOT FOLDER]/sendcontact.php

Setting Up Email Credentials

Open this file via a code editor / text editor and now go to the code segment: Line 4 to 6. Please see the screenshot:

The value “john@example.com” should be replaced with your own email so that the emails will be sending

to this email id. The value inside ‘subject’ should be changed to something meaningful since this will be displayed as the subject of the email message send via the contact form. That’s all for basic setup.

All PHP mail sending library files and server scripts are stored in MAIL folder in the root. For advanced users who need in-depth customizations, the PHP script can be modified appropriately. The PHP file is

(27)

REVA – Premium Theme from Designova

Fonts and Typography

Fonts Directory and Declaration

We have used CSS3 Font-Face technology to render fonts in this template. We have defined all font rules via the following CSS file:

[ROOT FOLDER]/assets/css/typography.css

And we have included all font resource files inside the following folder: [ROOT FOLDER]/assets/css/fonts

Setting Up Font-Face Rules

An example usage of Font-Face is defined as follows: @font-face {

font-family: 'MyFontFamily';

src: url('fonts/mywebfont.eot'); /* IE9 Compat Modes */

src: url('fonts/mywebfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('fonts/mywebfont.woff') format('woff'), /* Modern Browsers */

url('fonts/mywebfont.ttf') format('truetype'), /* Safari, Android, iOS */

url('fonts/mywebfont.svg#svgFontName') format('svg'); /* Legacy iOS */

}

Now apply the font to any element via CSS rule targeting that element, for example if the element is #something, then we can apply the above declared font as:

Chapter

(28)

REVA – Premium Theme from Designova

#something {

font-family: 'MyFontFamily', Fallback, sans-serif;

}

Typography Arrangements:

We have used H1 tag for Main Heading and H3 tag for Sub Headings. We have kept separate style rules for all typographical elements via a single stylesheet:

(29)

REVA – Premium Theme from Designova

Images, Icons &

Graphics

Reva features many images and graphical elements. We have kept such image resources in a single folder:

[ROOT FOLDER]/ images/

Images featured on live preview are not included in the download pack since they are copyrighted properties of original photographers and authors. Instead we have included exact placeholder (dummy) images with same dimensions and format. Please replace them with your preferred images, don’t forget to keep exact dimensions as placeholder images.

Icon Fonts

We have not included any Icon Fonts for this theme. So this will be more easy for ordinary users to replace simple images rather than setting up a new Icon Font.

Image Credits

Images on live preview are exclusive properties of original authors. Please find the theme information page (from where you bought this theme) to see image sources and credits information. If you want to use any of such images on your site you have to either purchase the original stock images or contact their authors (we are not).

Graphics / Icons Credits

We have used some Icons and created some graphics based on some icons available free over web. The sources are as follows:

http://iconmonstr.com/

http://www.tenbytwenty.com/sosa.php

Chapter

(30)

REVA – Premium Theme from Designova

Sources & Credits

Included Libraries & Resources:

jquery-1.7.2.min.js http://jquery.com/ bootstrap.js http://twitter.github.com/bootstrap/ jquery.easing.1.3.js http://gsgd.co.uk/sandbox/jquery/easing/ jquery.colorbox.js http://jacklmoore.com/colorbox jquery.isotope.min.js http://isotope.metafizzy.co jquery.nivo.slider.js http://nivo.dev7studios.com waypoints.min.js https://github.com/imakewebthings/jquery-waypoints/ jquery.carouFredSel-6.1.0-packed.js http://caroufredsel.frebsite.nl

Chapter

8

(31)

REVA – Premium Theme from Designova

Theme Updates & Bug

Fixes

This user manual covers everything you need to setup the website. But if you find any bugs, issues and

limitations on this theme please contact our support team via email to:

info@designova.net

.

When you

send a support request email you

must include

the

purchase code

and

purchase date

of the product

(received from Market Place website). Support request emails without this information will not be

answered.

We regularly release updates and bug fixes on our themes and we use Twitter to

announce it to our customers.

Please follow us

@designovastudio

Chapter

(32)

REVA – Premium Theme from Designova

Vote of Thanks

Once again, Thank You for purchasing our product.

We hope you like our theme as well as this documentation. We have done our level best to make things

pretty clean and clear. Anyway if you have queries, support requests or something to know more from

us, kindly contact us via email to:

info@designova.net

.

Support Requests - Please note:

When you send a support request email you

must include

the

purchase code

and

purchase date

of the product (received from Market Place website). Support request

emails without this information will not be answered. This is needed to prevent pirated

users and spammers from our support system.

About Us:

We are Designova, a small team of young web designers and developers and we are good people to

work with  We are from Kerala – the God’s own country and we work on UTC +5.30, Monday to Friday

during 09.30 to 16.30.

We have more premium themes, please visit our portfolio:

http://themeforest.net/user/designova/portfolio

Designova Official Website:

http://designova.net/

Chapter

(33)

REVA – Premium Theme from Designova

reva

Version 1.0

Build: 07 March 2013

Designed with Love at Kerala

A premium theme from Designova

References

Related documents

(2004), the model is also extended to the international context. It is assumed that patent applications granted domestically do not hold in the foreign environment. Despite

Although the temperature used in the reactive deposition experiments of the bimetallic materials (200ºC) was generally lower than the temperatures employed in the

Offer activities and shows that allow us to monitor the maximum capacity of the area and make it easy to maintain a 2 meters distance from others.. The correct and constant

1 Improved window energy efficiency calculated in a computer simulation using RESFEN 5.0 default parameters for a 2,000-square-foot existing single-story home when comparing a

Parents and students will obtain the student’s individual class schedule at orientation and via FOCUS approximately one week prior to the start of school.. During orientation,

1) Repeated start–stop operation leads to a significant reduction of frictional losses that can be linked back to wearing-in of the bearing roughness and the contour.

“They hurt them, they push them back, they send their dogs at them. Similar to the quote above, this was expressed by many respondents, where the practices of the EU was put

I would not move forward with these steps unless you have zeroed in on a good topic—one with a little story (anecdote), a defining quality and a problem!. You can either write it