1. Welcome
  2. Template Overview
  3. Installing Theme
  4. HTML Structure
  5. CSS Structure
  6. Java Script Setting
  7. Google Map
  8. Contact Form
  9. Shortcodes System
  10. Icons
  11. Header & Sliders
  12. Template Features
  13. Template Pages
  14. Credit
  15. Good Bye

Rozana

Multi Purpose Responsive HTML5 Template.


Hello, firstly I would like to thank you for purchasing "Rozana - Multi Purpose Responsive HTML5 Template.".
If you have any questions that are beyond the scope of this help file, please feel free to email us.
Contact: http://themeforest.net/user/creative-wp

TEMPLATE OVERVIEW

ABOUT ROZANA

01. Rozana is a unique responsive template working perfect on (desktop, tablet & mobile devices).

02. This template is very simple, clean, white & creative theme.

03. Rozana comes with unique pages, awesome slideshows, unique color variations & light/dark themes. Easy to customize & fully featured design.

04. This theme suitable for companies, business, cooprate, personal use, blogs, photographer, portfolio &more...

05. Rozana is create outstanding website,blog or portfolio in minutes!

Installing Theme

01. After unzip theme files, you will found HTML Files and this files you will upload to server all files or you choose one of:/p>

- Multipurpose Index_(01:12): you have to choose template from index_01 to index_12, then rename file to (index) to be main page.

- One Page Template: you have to choose one of them like fixed_one_page, slide_one_page & video_one_page then rename file to (index) to be main page.

- Landing Page Template: you have to choose one of them like fixed_landing_page, slide_landing_page & video_landing_page then rename file to (index) to be main page.

You can view this theme in any modern web browser from you desktop computer or local server. Because the files are written in HTML5, you do not need an internet connection in order to display or edit the theme but Google fonts & Contact forms will not display, you have not to worry because google font will display after you upload files to server and contact form which functions based on PHP coding will work on server to send you a message.

Start your FTP Client (ex: Filzilla is free) and login your server info, you will need your server name (Domain Name), username & password that you setup with the hosting company.

Locate the domain folder you wish to upload your Theme files to one your server. you are going to want to click and drag every files that you have labeled .html, .css, .js, .php into your FTP client.

One the files are done uploading, rename the file you want to be home page as (index.html).

HTML Structure

The theme has a responsive layout with a variation of column layouts depending on the page. This theme uses Bootstrap 3 system (12 column) which help streamline any customization you wish to make. if want to knew about bootstrap more please go to visit: Bootstrap Girds System

Example :

 


you can view more example, please go to file name (gird_system.html).

Structure included files in HTML:

 

Color Skin Option :

You can change your color skin theme by change name in HTML file at:

Just change file name as (carrot.css) or you can choose color skin from folder css/color/

Theme Style Option :

You can change your Theme Style by change name in HTML file at:

Just change file name as (dark.css) for convert to dark style.

Font Option :

You can change your google font web by change name in HTML file at:

Please visit google font web Link and choose your font collection then go to font.css from CSS folder then put the @import link from google fonts then change the name of font family as font-family: NewFont;

CSS STRUCTURE

I'm using one main css file name (style.css) in this theme which you are free to modify depending on the customization you require. There are also one additional style sheet name font.css as i explained you at HTML Strcuture.

There folder name color is for changing the color skins , also theme folder for changing the theme style

There are also some additional styles that i dont recommend changing. those style sheet are :

Color Skin Files

You can change color skin from css/color (contain 20 style sheet files) and you can change more colors by changing color code as #f54325 to #YourNewCode

Theme Style Files

You can change theme style from css/theme (contain 2 style sheet files)

JAVA SCRIPT SETTING

here you can modify any settings for ( Sliders, Flickr Widget, Ticker, Scroll, countdown and more..).

Very Important : There some js code in HTML itself like under construction and sliders because those script code is not using for full theme, you can find them at bottom of page with comment name (< !-- Font this page Only -- >)

Google Map

you can change your lat and lang from js/scripts.js:

Take care you will find lang and lat numbers two times you have to change them with your code of lat and lang

And

Contact Form

Contact form is PHP Script for sending messages to your email to be connected with your visitors or clients, You should edit email default to your email to start recieve messages, Now go to process.php and edit the email:

Shortcodes System

You can add your shortcodes system on your HTML Pages and we add shortcodes system in HTML Files are:

Examples

Accordion

Progress Bar

Icons

for change icon from fontawesome fonts you should visit to icons.html file and choose your icon font and edit:

To:

Note the first name (fa) is required, you have not to delete or change

for change icon from icomoon fonts you should visit to Link then choose your icon font and edit:

To:

Header & Sliders

Template have multi of sliders and full screen backgrounds and and template included :

FULL WIDTH REVOLUTION SLIDER

Demo 1

Demo 1

The Additional Files for this page are:

Also:

FULL screen REVOLUTION SLIDER

Demo 2

Demo 2

The Additional Files for this page are:

Also:

FULL WIDTH fade SLIDER

Demo 3

Demo 3

The Additional Files for this page are:

Also:

FULL screen background

Demo 4

Demo 4

The Additional Files for this page are:

FULL screen fade SLIDER

Demo 5

Demo 5

The Additional Files for this page are:

Also:

FULL screen ZOOMING SLIDER

Demo 6

Demo 6

The Additional Files for this page are:

Also:

FULL screen SUPERSIZED SLIDER

Demo 7

Demo 7

The Additional Files for this page are:

Also:

FULL screen YOUTUBE

Demo 8

Demo 8

The Additional Files for this page are:

Also:

FULL SCREEN HTML5 VIDEO

Demo 9

Demo 9

The Additional Files for this page are:

FULL screen PORTFOLIO

Demo 10

Demo 10

The Additional Files for this page are:

Also:

FULL SCREEN LIGHT PATTERN

Demo 11

Demo 11

The Additional Files for this page are:

FULL SCREEN DARK PATTERN

Demo 12

Demo 12

The Additional Files for this page are:

FULL SCREEN BACKGROUND

Demo 1

Demo 1

The Additional Files for this page are:

FULL screen REVOLUTION SLIDER

Demo 2

Demo 2

The Additional Files for this page are:

Also:

FULL SCREEN HTML5 VIDEO

Demo 3

Demo 3

The Additional Files for this page are:

FULL width Normal

Demo 1

Demo 1

The Additional Files for this page are:

FULL screen Fade SLIDER

Demo 2

Demo 2

The Additional Files for this page are:

Also:

FULL SCREEN HTML5 VIDEO

Demo 3

Demo 3

The Additional Files for this page are:

Template Features

Page Sitemap

Credit

Images used in the Demo

All images and videos used in the demo are not distributed with the theme. They are all licensed under Creative Commons and credited to their respective creator/owner.

Photos used in the demo site from :
Wallpaper
Photodune
sagmeisterwalsh
novecentino
Subtle Patterns
Behance
Isabelarodrigues
Unsplash

Good Bye


Good Bye Dear, thank you for purchasing our template.