documentation ace vision
DESCRIPTION
Ace vision theme installation documentTRANSCRIPT
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='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>
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.
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
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=”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
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
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')
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”
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.
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=”contactus”
Validation required/type fields
folder: “js” file: “scripts.js” line 133
Content
contact header contact form with following fields:
full name email address company name phone describe your project timeline budget additional comments
Love Your Job
Folder Structure and Naming
file: index.html, id=”getjob”
Content header and text inviting to send CV
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
reply form, fields: full name (required) email 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 btnprimary
success: btn btnsuccess
info: btn btninfo
warning: btn btnwarning
danger: btn btndanger
link: btn btnlink
Credits
Graphics InnkyScripts VisionroomSlippry Slider http://slippry.com/Owl Carousel http://owlgraphic.com/Masonry plugin http://masonry.desandro.com/