documentation ace vision

WelcomeThank you for purchasing this HTML template. If you have any questions that are beyondthe scope of this documentation, please visit our FAQ. Thank you!

Getting Started

To install this HTML template you will need to upload all files and folders using an FTPclient. We recommend using FileZilla FTP client. To upload your template you will need thefollowing:

Domain FTP Username FTP Password

Once connected make sure to upload ALL files and folders within the HTML folder of yourdownload.

In this Documentation

Homepage Slider About Us Our Team Recent Works Blog Contact Us Get Job Layout & Content Styling Post page Portfolio Page Credits

Homepage Slider ­ SlipprySlider, Jquery Plugin

Folder Structure and Naming

file: index.html, id=”slider”

Initializing the Slider

folder “js” file “scripts.js” , please find: var slippry

var slippry = $("#slippry").slippry(pager: false,auto: false

);

Slider Image Sizes

Minimal size of the image is 1920px x 1416px. The ratio of width to heigh is 1.8 : 1.

Adding a Slide

This is the way how to add a slide. You need to insert new HTML tag inside ul list:

<li><div>

your_img_objectyour_content

</div></li>

Our example:

<li><div>

<img src="./images/slider/home1.jpg" alt=""><div class='lg­headers lg­headers­dark

slider­text text­center­sm'><div class="container">

<span>WE ARE THE BEST</span><strong>INTERACTIVE

AGENCY</strong><small>Lorem ipsum dolor sit amet enim. Etiamullamcorper.<br />

Suspendisse a pellentesque dui,non felis.</small>

<a href='javascript:void(0)'class='btn margin­right scroll­to­button'data­scrolltarget="about­us">Read why</a><spanclass="or">or</span><a class='btn margin­left'id="watch­video" href='javascript:void(0)'>Watch video</a>

</div></div><div class="opacity50"></div>

</div></li>

Caption Positions and Types

Caption Positions

In our example following css class are responsible for the caption position:

lg­headers, lg­headers­dark, slider­text, text­center, text­left,text­right and others bootstrap3 selectors to text positioning

Caption Types

If you want your caption to have different font or background you can do it by adding this tothe <li> element additional class <your_class>, whereby you will define look of the file withstyles.

Media Inside Slide ­ Video

In the HTML iframe we need to define the width and height original video

<li><div>

<iframe id="watch­wideo­iframe" class="movie"src="//player.vimeo.com/video/81413290?title=0&amp;byline=0&amp;portrait=0&amp;api=1&amp;player_id=watch­wideo­iframe" width="500"height="281" frameborder="0" webkitallowfullscreen mozallowfullscreenallowfullscreen></iframe>

</div></li>

‘watch­video­iframe’ ID ­ this ID is responsible for displaying the movie

‘movie’ CLASS ­ this class is responsible for movie resize for custom dimensions

‘scroll­to­button’ class and ‘data­scrolltarget’ are responsible for scrolling page to thechosen section after selecting the proper button

Slider ­ boxed size

If you do not want slider on full width of the page, but on the width on main content, you need

to find put <ul id="slippry"> list inside <div class="container"> containerFor more, please see doc:

Documentation is located on the pagehttp://slippry.com/

About Us

Folder Structure and Naming

file: index.html, id=”about­us”

Content

In the file “about­us” there are informations about:

first header and description awards

icons size, near: width: 64px height: 64px

our mission second header and description logos testimonal

Our Team

Folder Structure and Naming

file: index.html, id=”team”

Content

big, full­width picture with text width: 1980px height: 400px

our team description our team slide members

Add new member inside slide

If you want to add new member of the team inside the slide insert into layer with“id=team­members­carousel” following structure:

<li><div class="theme­background">

<img class="grayscale" src="src_to_member_pic" alt=""/></div> <strong class="bold­font member­name">member_name</strong> <span class="member­position">member_position</span> <p hidden class="member­description visible­xs">

about_member</p>

</li>

Member picture

preferred size of the member image is: width: 250px height: 250px

it should not have the background it has to be colored

Slider Init ­ bxSlider ­ Responsive jQuery Carousel Plugin folder: “js” file: “scripts.js”, please find “var carousel”

var carousel = $('#team­members­carousel')

Recent Works ­ Masonry jQuery grid layout library

Folder Structure and Naming

file: index.html, id=”recent­works”

Init: file: scripts.js, line near 150 folder: “js”

How to add another work

This is an example, inside “recent­works­listr” identyficator:

<div class="recent­work pull­left width33"><img src="src_to_work_bg" alt="" /><div class="mega­hover text­center" >

<div class="mega­hovertitle"><div

class="mega­hovermaintitle"><ahref="./recent­work.html">Bamf</a></div>

<divclass="mega­hoversubtitle">Print Design</div>

<p class="mega­hoverdeschidden­xs">Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Suspendisse a pellentesque dui, non felis.</p>

<br /><a href="./recent­work.html"

class="btn btn­lg active">Details</a></div>

</div></div>

Preffered max dimmensions of the block: width: 600px height:600px

How to add loaded work

folder: “ajax” file: “recent­works.html”

You can add here additional works, which will be loaded AJAX on the main page.

Blog

Folder Structure and Naming

file: index.html, id=”blog”

Content ­ Owl Slider, Jquery Plugin

blog headers posts from our blog inside slider:

desktop, tablet ­ 4 posts in the slide mobile ­ 1 post in the slide

Contact Us

Folder Structure and Naming

file: index.html, id=”contact­us”

Validation ­ required/type fields

folder: “js” file: “scripts.js” line 133

Content

contact header contact form with following fields:

full name e­mail address company name phone describe your project timeline budget additional comments

Love Your Job

Folder Structure and Naming

file: index.html, id=”get­job”

Content header and text inviting to send CV

Portfolio Page

Folder Structure and Naming

folder “/” file “recent­work.html”

Content

portfolio preview image, line 47, id = “full­screen­portfolio­image” description, line 66 clients comments, line 71 technology, line 123 recent works, line 193 ­ carousel same as carousel in home page ( members team )

Post Page

Folder Structure and Naming

folder “/” file “post.html”

Content

big post image, preffered size: width: 1920px height: 500px

post container: header post details:

post date post author post comments sum up

post content post comments

multilevel comments display

reply form, fields: full name (required) e­mail address (required) your comment

Layout & Content Styling

Styles are based on popular framework Bootstrap3. Whole site is in 100% responsive andperfectly adapts to display on the tablets and on mobile devices.

Folder Structure and Naming

folder “css” file “style.css, bootstrap.css”

Grid system: http://getbootstrap.com/css/#grid

Buttons classes:

default: btn

primary: btn btn­primary

success: btn btn­success

info: btn btn­info

warning: btn btn­warning

danger: btn btn­danger

link: btn btn­link

Credits

Graphics ­ InnkyScripts ­ VisionroomSlippry Slider ­ http://slippry.com/Owl Carousel ­ http://owlgraphic.com/Masonry plugin ­ http://masonry.desandro.com/