Start

Thanks for purchasing Volar Template. If you have any question you can ask through comments. Also you can find a lot of useful information right there. Thank you so much!

Quick Tip: when you open a file press Ctrl + F to find what's need to be found!

Installing The Template

Setting the base color scheme

  1. Locate css/theme folder, you have all the colors in there.
  2. Choose your color.
  3. Open the html files.
  4. Go to Line 45 and replace the color name with your chosen color.
<link href="css/theme/scuba-blue.css" rel="stylesheet" data-color="" id="theme">

Page Load Transitions

Yo can specify the Page Load Transition:

  1. Open the html file.
  2. Find 
    <div id="page" class="animsition .." .. data-animsition-in="zoom-in" data-animsition-out="fade-out-up-sm" ..  >
  3. Go here: http://goo.gl/wEF4R1 see the demos and choose your own style! Now:
  4. To set the page loading transition when you enter, change the value of 
    .. data-animsition-in=".." ..
    , and to set the page loading transition when you exit, change the value of 
    .. data-animsition-out=".." ..

Page Loaders

Yo can specify the Page Loaders text and loader type, to do so:

  1. Open the html file.
  2. Find 
    <div id="page" class="animsition .." .. data-loader-type="loader2" data-page-loader-text="Volar" ..  >
  3. To change Loader type set 
    .. data-loader-type=".." ..
    to loader1, loader2 or loader3.
  4. To change Loader text simply change Volar in 
    .. data-loader-text="Volar" ..
    into whatever you want!

Retina supprot optional

Retina support includes imgs and background-images.

If you want to support retina devices you have to:

  1. Open the html file.
  2. Find 
    <div id="page" class="animsition .." .. >
  3. Add retina-support class to it.
  4. For imgs; place another image with the same name plus @2x at the end of the name inthe same directory, it must be 2x larger
  5. For background-images; you need to specify 4 differet background images
    1. your-image-name.jpg with dimansions of: 1280px *1280px for regular mobile devices.
    2. your-image-name@2x.jpg with dimansions of: 2560px *2560px for retina mobile devices.
    3. your-image-name@@lg.jpg with dimansions of: 1440px *900px for regular desktop devices.
    4. your-image-name@@lg2x.jpg with dimansions of: 2880px *1800px for retina desktop devices.

Setting the Scroll Progress Bar optional

The default state has the progress bar but if you want to remove it:

  1. Open the html file.
  2. Find 
    <nav id="nav" class="navbar .." .. >
  3. The first child of the element above is this: 
    <div id="scroll-progressbar" class="scroll-progressbar">
  4. Delet it and the 4 lines below it.

Setting the Navbar type

There are 4 types of Navbars, you have to choose one of them:

  1. Fixed at top with Transparent background at the begining
  2. Sticky, visible and transparent background at the begining
  3. Sticky, not visible at the begining

To do this:

  1. Open the html file.
  2. Find this line: 
    <div id="nav-wrapper" class="..">
  3. This: 
    <nav id="nav" class="navbar .." .. >
    is its first child of the element above.
  4. For Fixed at top with Transparent Navbar: Remove any classes from: 
    <div id="nav-wrapper" class="..">
    and add add transp-nav class to it, Then add navbar-transparent navbar-fixed-top classes to: 
    <nav id="nav" class="navbar ..".. >
    .
  5. For Sticky, visible and transparent Navbar: Remove any classes from: 
    <div id="nav-wrapper" class="">
    and add add transp-nav sticky-navbar sticky-visible classes to it, Then remove navbar-fixed-top class from: 
    <nav id="nav" class="navbar .." .. >
    if it has it and add navbar-transparent class to it.
  6. For Sticky, not visible at the begining navbar: Remove any classes from: 
    <div id="nav-wrapper" class="..">
    and add add sticky-navbar class to it, Then remove any of navbar-transparent, navbar-fixed-top from: 
    <nav id="nav" class="navbar .." .. >
    if it has them, yor're done.
  7. important: for both types of sticky navbars you need to do this step as well: head over to styles.css go to lline: 1277, The difference between padding-top and padding-bottom of .sticky-nav-here element and marging-top of .sticky-visible-here must be the height of the .navbar in normal state -not transarent-.

Setting the Navbar logo

  1. you can choose a logo with any height, the Navbar won't breake. but you better not using a logo with a height more than 40px. 30px is even better. NOW:
  2. Open styles.css
  3. Go to line: 1571 and change line-height it must be same as the height of your logo. so if your logo dimansions are say: 200px*100px; the line-height has to be 100px, line-height: 100px.

Setting the Navbar color scheme

There are 2 overall color scheme for Navbars, you have to choose one of them:

  1. Default Navbar - which is white!
  2. Dark Navbar

To do this:

  1. Open the html file.
  2. Find 
    <nav id="nav" class="navbar .." .. >
  3. For Default Navbar remove navbar-dark class and add navbar-default class to it.
  4. For Dark Navbar remove navbar-default class and add navbar-dark class to it.

Setting the Background Overlay scheme

There are 2 major overlay color scheme for sections with image background, you have to choose one of them:

  1. Default State with no Class - which is Dark!
  2. Light Overlay

To do this:

  1. Open the html file.
  2. Find 
    <div id="page" class=".." .. >
  3. For Default State remove light class from it.
  4. For Light Overlay add light class to it.

There is another class that you can add to the element; it is:

  1. equal class. By default Home Section Overlay is more transparent in compare with other sections this class makes Home Section Overlay like other Sections.

Setting the Team Section layout

We have 2 possible styles fo Team Section layout:

  1. Three members visible
  2. Two members visible

here is what you need to do to acivate each one of them:

  1. Open the html file.
  2. Find this: 
    <div id=" .. " class="team-carousel owl-carousel carousel dots-under">
  3. to have Three members visible set the id to team-carousel-3
  4. to have Two members visible set the id to team-carousel

Setting the Portfolio Section

We have two major layout styles for this Section and 3 set of two-state options for the layout of each one of them an 2 color options for each

The step to be followed are boring and complicated, you can find all possible options in the demo pages, so I just point you there, so tha you van get what you want.

  1. masonery
    • full-width: index02.html
    • real-gapped: index01.html
    • gapped: index04.html
  2. fixed dimension
    • full-width: index08.html
    • real-gapped: index05.html
    • gapped: index0.html

There are to options fo the hover state color:

  1. white mask
  2. colored mask

White mask is the default state, if you want the colored mask style:

  1. Open the html file.
  2. Find: 
    <div id="portfolio-container" class="portfolio-container .. "></div>
  3. add colored-mask class to it

Google Maps

to set the address:

  1. Open the html file.
  2. Find: 
    <div id="map-canvas" data-address=" .. "></div>
  3. Type your Address inside 
    .. data-address=".." ..
    , use Google Maps to find your address.

Footer Style

There are two option:

  1. Default Footer - which is dark
  2. Light Footer

Steps:

  1. Open the html file.
  2. Find: 
    <footer class="footer-section section no-padding-bottom">
  3. Default Footer: let it be like above.
  4. Light Footer: add light-footer class to it.

Getting the Template Online

  1. It's important to understand that you must either have your own server space or use someone elses. The server space can be purchased at many different places around the internet. You need somewhere to put the files that you purchased so others can find them online.
  2. The template folder will have several files with the extension labeled .html. This is where all your content will. It's very important to keep the css and js-plugin folders with the HTML or the HTML will not look how the design is meant to look. Along with the HTML files, you will also have four additional folders to upload: css, js, fonts, and images.
  3. Start your FTP client (I persoanlly use Filezila which is free) and login. Login to your server. You will need your server name (often times this will be your domain name), username, and password that you setup with the hosting company.

Home section

We figured that some versions of Home Section may need a little more explanation

fss - Flat Surface Shader:

We created two home page versions based on this cool library, they are index02.hrml and index05.html

The index02.hrml is actually transparent with a red background but index05.html is colored. to change its color:

  1. Open fssinit.solid.js
  2. Go to line: 32 and change diffuse value into your desired color

You can change other options too, if you want to be more professional go here and use it as your guide.

Particles: particles.js and Particleground

  1. Particleground demo is index03.html, you can find its settings in js/scripts.js file at line: 137
  2. We have particles.js in index04.html , you can find its settings in js/scripts.js file at line: 970 to be a pro go here!

Animate Slider

We have AnimateSlider as Home Section slider in index10.html and index11.html .

We have three option:

  1. Show indicators [dots] like a regular slider
  2. Indicators that are progress bar meanwhile!

Here is what you need to do in order to activate each one of these options:

  1. Open the html file.
  2. Find: 
    <div id="animate-slider" class="animate-slider .." .. >
  3. Regular indicators: remove alltogether-loadbars class if it has it then add show-indicators class.
  4. The 2nd option - the cool one: remove show-indicators class if it has it then add alltogether-loadbars class.

If you do not want the navigation, find:

<div class="as-nav-arrows">
and delete or comment it!!

Be aware that you have to specify the location of slide background images if you want each slide to have its own background image. to do so set the url of your images in this element: 

<div id="animate-slider" class="animate-slider .." data-background-0=".." data-background-1=".." data-background-2=".." .. >

you have to make sure that there are as many 

data-background-
s as slides.

Now lets get down to animations: inside each slide yo can set indivisual initation animation for each element. follow the steps below:

  1. Open the html file.
  2. Find these elements: 
    <div class="slide ..">
    inside them there are elements like: 
    <div data-effect-in=".." data-effect-out="..">
    change data-effect-in=".." and data-effect-out=".." to whatever you like
  3. We are using Animate.css and magic, use them to choose your desired in and out animation for each element.

Video Background

You can find this in index04.html, index07.html, index08.html and index12.html.

To change the video:

  1. You must create 3 formats for your video: video.mp4, video.webm and video.ogv
    You also have to put a image beside the videos with the same name. it should be one of these formats: .jpg, .png or .gif then:
  2. Open the html file.
  3. Find: 
    < div class="video-background .." data-vide-bg="mp4: video/seagull, webm: video/seagull, ogv: video/seagull, poster: video/seagull" data-vide-options="position: 50% 50%" > .. </div>
  4. Here the name of video is seagull ! change it into the name of your video

Youtube background video

You can find this in index16.html

To change the video:

  1. Open the html file.
  2. Find: 
    <a id="video" class="player" data-property="{videoURL:'B-h6egUzFEg', ..">
  3. Change videoURL:'..'
  4. Example: this is a Youtube video url: www.youtube.com/watch?v=j_ZBnqssTWc we only nee the part that is after v= which is j_ZBnqssTWc.

Animated Headlines

You can find this in index16.html. open it. choose your favorite one. copy the code. paste it where you want!

To choose your deired aniamted headline:

HTML Structure

This theme is a responsive layout based on Bootstrap 3.

Grid System

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts. Examples:

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-3
.col-md-3
.col-md-3
.col-md-3
Shortcodes! Feel free to use the custom elements in shortcodes, or use the general Bootstrap elements.
Icons! You have lots of Font Icons, there is Font Awesome and a set of custom icons that you can find in fonts folder. You can uses with Icons, buttons, .. Just copy icon name and paste.

CSS Structure

We're using two main CSS files ( style.css and theme.css css file ) we do not recommend making changes to style.css. There is also theme.less file that you can use to create your own theme color css file.


Finished color scheme template in the /css/themes/ directory:

  1. black-white.css
  2. dark-blue.css
  3. gold.css
  4. light-green.css
  5. light-purple.css
  6. olive.css
  7. orange.css
  8. purple.css
  9. red.css
  10. scuba-blue.css

Probable Issues

IF you came across an issue like unwanted gap or collapsing between filter buttons in Firefox THEN add ONE OF these styles to the end of style.css one of them should work for you. Otherwise you don' ned to do anything.

  1. Open the styles.css file.
  2. Go to end of it
  3. Copy ONE of styles below and paste it there

This:

@media screen and (min-width: 768px) {
    .portfolio-filters .btn::before,
    .portfolio-filters .btn::after {
        height: 49%;
    }
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .portfolio-filters .btn::before,
    .portfolio-filters .btn::after {
        height: 50%;
    }
}

Or this:

.portfolio-filters .btn::before,
.portfolio-filters .btn::after {
    height: 49%;
}

@media screen and (min-width: 768px) {
    .portfolio-filters .btn::before,
    .portfolio-filters .btn::after {
        height: 50%;
    }
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .portfolio-filters .btn::before,
    .portfolio-filters .btn::after {
        height: 50%;
    }
}

Setup Contact Form

  1. Open the mailer.php file.
  2. Go to Line 24, and replace with your E-mail.
$recipient = "mail@domain.com";

Credits

I would like to thank all the ausome people who created these cool stuffs:



Copyright © Summit Themes 2015