documentation ace vision

20
Welcome Thank you for purchasing this HTML template. If you have any questions that are beyond the 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 FTP client. We recommend using FileZilla FTP client. To upload your template you will need the following: Domain FTP Username FTP Password Once connected make sure to upload ALL files and folders within the HTML folder of your download. In this Documentation Homepage Slider About Us Our Team Recent Works Blog Contact Us Get Job Layout & Content Styling Post page Portfolio Page Credits

Upload: akash-rajput

Post on 12-Jan-2016

220 views

Category:

Documents


0 download

DESCRIPTION

Ace vision theme installation document

TRANSCRIPT

Page 1: 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

Page 2: Documentation Ace Vision

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:

Page 3: Documentation Ace Vision

<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>

Page 4: Documentation Ace Vision

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.

Page 5: Documentation Ace Vision

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

Page 6: Documentation Ace Vision

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

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

Page 7: Documentation Ace Vision

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

Page 8: Documentation Ace Vision

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

Page 9: Documentation Ace Vision

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')

Page 10: Documentation Ace Vision

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”

Page 11: Documentation Ace Vision

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.

Page 12: Documentation Ace Vision

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

Page 13: Documentation Ace Vision

Contact Us

Folder Structure and Naming

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

Validation ­ required/type fields

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

Page 14: Documentation Ace Vision

Content

contact header contact form with following fields:

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

Page 15: Documentation Ace Vision

Love Your Job

Folder Structure and Naming

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

Content header and text inviting to send CV

Page 16: Documentation Ace Vision

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

Page 17: Documentation Ace Vision

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

Page 18: Documentation Ace Vision

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

Page 19: Documentation Ace Vision

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