documentation ace vision
DESCRIPTION
Ace vision theme installation documentTRANSCRIPT
![Page 1: Documentation Ace Vision](https://reader034.vdocuments.mx/reader034/viewer/2022051820/563dbb83550346aa9aadd071/html5/thumbnails/1.jpg)
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](https://reader034.vdocuments.mx/reader034/viewer/2022051820/563dbb83550346aa9aadd071/html5/thumbnails/2.jpg)
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](https://reader034.vdocuments.mx/reader034/viewer/2022051820/563dbb83550346aa9aadd071/html5/thumbnails/3.jpg)
<li><div>
your_img_objectyour_content
</div></li>
Our example:
<li><div>
<img src="./images/slider/home1.jpg" alt=""><div class='lgheaders lgheadersdark
slidertext textcentersm'><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 marginright scrolltobutton'datascrolltarget="aboutus">Read why</a><spanclass="or">or</span><a class='btn marginleft'id="watchvideo" href='javascript:void(0)'>Watch video</a>
</div></div><div class="opacity50"></div>
</div></li>
![Page 4: Documentation Ace Vision](https://reader034.vdocuments.mx/reader034/viewer/2022051820/563dbb83550346aa9aadd071/html5/thumbnails/4.jpg)
Caption Positions and Types
Caption Positions
In our example following css class are responsible for the caption position:
lgheaders, lgheadersdark, slidertext, textcenter, textleft,textright 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](https://reader034.vdocuments.mx/reader034/viewer/2022051820/563dbb83550346aa9aadd071/html5/thumbnails/5.jpg)
Media Inside Slide Video
In the HTML iframe we need to define the width and height original video
<li><div>
<iframe id="watchwideoiframe" class="movie"src="//player.vimeo.com/video/81413290?title=0&byline=0&portrait=0&api=1&player_id=watchwideoiframe" width="500"height="281" frameborder="0" webkitallowfullscreen mozallowfullscreenallowfullscreen></iframe>
</div></li>
‘watchvideoiframe’ ID this ID is responsible for displaying the movie
‘movie’ CLASS this class is responsible for movie resize for custom dimensions
‘scrolltobutton’ class and ‘datascrolltarget’ 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](https://reader034.vdocuments.mx/reader034/viewer/2022051820/563dbb83550346aa9aadd071/html5/thumbnails/6.jpg)
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](https://reader034.vdocuments.mx/reader034/viewer/2022051820/563dbb83550346aa9aadd071/html5/thumbnails/7.jpg)
About Us
Folder Structure and Naming
file: index.html, id=”aboutus”
Content
In the file “aboutus” 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](https://reader034.vdocuments.mx/reader034/viewer/2022051820/563dbb83550346aa9aadd071/html5/thumbnails/8.jpg)
Our Team
Folder Structure and Naming
file: index.html, id=”team”
Content
big, fullwidth picture with text width: 1980px height: 400px
our team description our team slide members
![Page 9: Documentation Ace Vision](https://reader034.vdocuments.mx/reader034/viewer/2022051820/563dbb83550346aa9aadd071/html5/thumbnails/9.jpg)
Add new member inside slide
If you want to add new member of the team inside the slide insert into layer with“id=teammemberscarousel” following structure:
<li><div class="themebackground">
<img class="grayscale" src="src_to_member_pic" alt=""/></div> <strong class="boldfont membername">member_name</strong> <span class="memberposition">member_position</span> <p hidden class="memberdescription visiblexs">
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 = $('#teammemberscarousel')
![Page 10: Documentation Ace Vision](https://reader034.vdocuments.mx/reader034/viewer/2022051820/563dbb83550346aa9aadd071/html5/thumbnails/10.jpg)
Recent Works Masonry jQuery grid layout library
Folder Structure and Naming
file: index.html, id=”recentworks”
Init: file: scripts.js, line near 150 folder: “js”
![Page 11: Documentation Ace Vision](https://reader034.vdocuments.mx/reader034/viewer/2022051820/563dbb83550346aa9aadd071/html5/thumbnails/11.jpg)
How to add another work
This is an example, inside “recentworkslistr” identyficator:
<div class="recentwork pullleft width33"><img src="src_to_work_bg" alt="" /><div class="megahover textcenter" >
<div class="megahovertitle"><div
class="megahovermaintitle"><ahref="./recentwork.html">Bamf</a></div>
<divclass="megahoversubtitle">Print Design</div>
<p class="megahoverdeschiddenxs">Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Suspendisse a pellentesque dui, non felis.</p>
<br /><a href="./recentwork.html"
class="btn btnlg active">Details</a></div>
</div></div>
Preffered max dimmensions of the block: width: 600px height:600px
How to add loaded work
folder: “ajax” file: “recentworks.html”
You can add here additional works, which will be loaded AJAX on the main page.
![Page 12: Documentation Ace Vision](https://reader034.vdocuments.mx/reader034/viewer/2022051820/563dbb83550346aa9aadd071/html5/thumbnails/12.jpg)
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](https://reader034.vdocuments.mx/reader034/viewer/2022051820/563dbb83550346aa9aadd071/html5/thumbnails/13.jpg)
Contact Us
Folder Structure and Naming
file: index.html, id=”contactus”
Validation required/type fields
folder: “js” file: “scripts.js” line 133
![Page 14: Documentation Ace Vision](https://reader034.vdocuments.mx/reader034/viewer/2022051820/563dbb83550346aa9aadd071/html5/thumbnails/14.jpg)
Content
contact header contact form with following fields:
full name email address company name phone describe your project timeline budget additional comments
![Page 15: Documentation Ace Vision](https://reader034.vdocuments.mx/reader034/viewer/2022051820/563dbb83550346aa9aadd071/html5/thumbnails/15.jpg)
Love Your Job
Folder Structure and Naming
file: index.html, id=”getjob”
Content header and text inviting to send CV
![Page 16: Documentation Ace Vision](https://reader034.vdocuments.mx/reader034/viewer/2022051820/563dbb83550346aa9aadd071/html5/thumbnails/16.jpg)
Portfolio Page
Folder Structure and Naming
folder “/” file “recentwork.html”
Content
portfolio preview image, line 47, id = “fullscreenportfolioimage” 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](https://reader034.vdocuments.mx/reader034/viewer/2022051820/563dbb83550346aa9aadd071/html5/thumbnails/17.jpg)
reply form, fields: full name (required) email address (required) your comment
![Page 18: Documentation Ace Vision](https://reader034.vdocuments.mx/reader034/viewer/2022051820/563dbb83550346aa9aadd071/html5/thumbnails/18.jpg)
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](https://reader034.vdocuments.mx/reader034/viewer/2022051820/563dbb83550346aa9aadd071/html5/thumbnails/19.jpg)
Buttons classes:
default: btn
primary: btn btnprimary
success: btn btnsuccess
info: btn btninfo
warning: btn btnwarning
danger: btn btndanger
link: btn btnlink
![Page 20: Documentation Ace Vision](https://reader034.vdocuments.mx/reader034/viewer/2022051820/563dbb83550346aa9aadd071/html5/thumbnails/20.jpg)
Credits
Graphics InnkyScripts VisionroomSlippry Slider http://slippry.com/Owl Carousel http://owlgraphic.com/Masonry plugin http://masonry.desandro.com/