Yet Another Documentation Crafted with ♥ by elemis
Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email us via our user page contact form or item discussions board.
Depending on your logo height, the header height may change and it will effect the scroll offsets. You need to edit style/js/scripts.js
. The default value of header height is 80px in the template. Please measure your header height and if it is different than the original value, then replace the value 80 on highlighted areas.
$(document).ready(function(){ /* ANCHOR SCROLL */ $('.scroll').localScroll({ offset: {top:-80, left:0} /* make sure the minus sign stays */ }); }); ... $(document).ready(function () { /* CONTENT SLIDER */ var speed=600; var speed2=500; var header_offset = 80;
In order to display a high resolution logo on devices with retina display, you need two versions of your logo. One with regular size and another with twice its size. The high resolution one should have the exact same name with @2x at the end.
File Name | Description |
---|---|
logo.png |
Default logo (e.g.: 100x100px) |
logo@2x.png |
High resolution logo (e.g.: 200x200px) |
The list of all available styled social icons to use in the footer or any other place.
<ul class="social"> <li><a href="#"><i class="icon-s-rss"></i></a></li> <li><a href="#"><i class="icon-s-twitter"></i></a></li> <li><a href="#"><i class="icon-s-facebook"></i></a></li> <li><a href="#"><i class="icon-s-dribbble"></i></a></li> <li><a href="#"><i class="icon-s-pinterest"></i></a></li> <li><a href="#"><i class="icon-s-flickr"></i></a></li> <li><a href="#"><i class="icon-s-vimeo"></i></a></li> <li><a href="#"><i class="icon-s-youtube"></i></a></li> <li><a href="#"><i class="icon-s-skype"></i></a></li> <li><a href="#"><i class="icon-s-tumblr"></i></a></li> <li><a href="#"><i class="icon-s-linkedin"></i></a></li> <li><a href="#"><i class="icon-s-behance"></i></a></li> <li><a href="#"><i class="icon-s-github"></i></a></li> <li><a href="#"><i class="icon-s-delicious"></i></a></li> <li><a href="#"><i class="icon-s-500px"></i></a></li> <li><a href="#"><i class="icon-s-grooveshark"></i></a></li> <li><a href="#"><i class="icon-s-forrst"></i></a></li> <li><a href="#"><i class="icon-s-digg"></i></a></li> <li><a href="#"><i class="icon-s-blogger"></i></a></li> <li><a href="#"><i class="icon-s-klout"></i></a></li> <li><a href="#"><i class="icon-s-dropbox"></i></a></li> <li><a href="#"><i class="icon-s-songkick"></i></a></li> <li><a href="#"><i class="icon-s-posterous"></i></a></li> <li><a href="#"><i class="icon-s-appnet"></i></a></li> <li><a href="#"><i class="icon-s-gplus"></i></a></li> <li><a href="#"><i class="icon-s-stumbleupon"></i></a></li> <li><a href="#"><i class="icon-s-lastfm"></i></a></li> <li><a href="#"><i class="icon-s-spotify"></i></a></li> <li><a href="#"><i class="icon-s-instagram"></i></a></li> <li><a href="#"><i class="icon-s-evernote"></i></a></li> <li><a href="#"><i class="icon-s-paypal"></i></a></li> <li><a href="#"><i class="icon-s-picasa"></i></a></li> <li><a href="#"><i class="icon-s-soundcloud"></i></a></li> </ul>
To receive the messages sent through the contact form, edit line 5 of contact/form-handler.php
$emailto = 'yourname@yourdomain.com';
For SMTP support edit line 4. Set to 1
if you want to use SMTP to send the email. Default is 0
, which uses the standard PHP mail function.
$use_smtp = '1';
If using SMTP you will also need to fill in the 4 SMTP variables - lines 64 - 67.
$SmtpServer = 'SMTP SERVER'; $SmtpPort = 'SMTP PORT'; $SmtpUser = 'SMTP USER'; $SmtpPass = 'SMTP PASSWORD';
Media queries are included in both style/css/bootstrap-responsive.css
and at the end of style.css
for responsive design. If you would like to disable the responsiveness you will have to remove the link of bootstrap-responsive.css from your HTML files and delete responsive css styles from style.css file.
There are 6 color options: blue
, gray
, green
, orange
, pink
, and yellow
, the default being yellow. To change the default color scheme you will have to edit the color css file name in each HTML page.
<link href="style/css/color/yellow.css" rel="stylesheet">
Copy the HTML code of your map from Google Maps website and paste it into your HTML page wrapped in
<div class="map">
<div class="map"> <iframe width="100%" height="500" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?source=embed&hl=en-US&ie=UTF8&ll=41.525287,-87.450485&spn=0.099472,0.263844&t=m&z=13&output=embed"></iframe> </div>
You can find the mboile device mockups that can be seen in slider in the sources
folder of the template package and apply your own images to them.
Basic structure of the portfolio gridview:
<div class="primary portfolio"> <div class="container box portfolio-wrapper"> <div class="light-wrapper"> <h1 class="page-title pull-left">Our Latest Works</h1> <div class="portfolio-filter btn-group pull-right"> <button class="btn inverse dropdown-toggle bm0" data-toggle="dropdown">Filter Portfolio</button> <!-- /.btn --> <ul class="dropdown-menu filter"> <li><a class="active" href="#" data-filter="*">All</a></li> <li><a href="#" data-filter=".branding">Branding</a></li> <li><a href="#" data-filter=".poster">Poster</a></li> <li><a href="#" data-filter=".illustration">Illustration</a></li> <li><a href="#" data-filter=".video">Video</a></li> <li><a href="#" data-filter=".audio">Audio</a></li> </ul> <!-- /.filter .dropdown-menu --> </div> <!-- /.portfolio-filter --> <div class="clearfix"></div> <div class="divide15"></div> <ul class="items"> <li class="item branding"> <a href="#" data-contenturl="portfolio-post.html" data-callback="callPortfolioScripts();" data-contentcontainer=".primary .container"> <div class="overlay"> <div class="info"> <h3>Headlight Media</h3> <span>Logo, Branding</span> </div> </div> <img src="style/images/art/p1.jpg" alt="" /></a> </li> <li class="item poster"> <a href="#" data-contenturl="portfolio-post2.html" data-callback="callPortfolioScripts();" data-contentcontainer=".primary .container"> <div class="overlay"> <div class="info"> <h3>Media Icons</h3> <span>Icons, Vector</span> </div> </div> <img src="style/images/art/p2.jpg" alt="" /></a> </li> </ul> <!--/.items--> </div> <!--/.light-wrapper--> </div> <!--/.container--> </div> <!--/.primary-->
There are 4 different layouts available for you to choose from. Of course, you can mix and/or alter these and create your own layouts.
File Name | Description |
---|---|
portfolio-post.html |
Portfolio post with slider |
portfolio-post2.html |
Portfolio post with static images |
portfolio-post3.html |
Portfolio post with videos |
portfolio-post4.html |
Portfolio post with Soundcloud |
Two surrounding DIVs are the basic holder for the slider:
<div class=".fullscreen-container"> <div class=".fullscreenbanner" >...</div> </div>
<div class="portfolio-bannercontainer"> <div id="portfolio-banner" >...</div> </div>
An unordered list inside holds the different slides as list elements
<ul> <!-- THE BOXSLIDE EFFECT EXAMPLES WITH LINK ON THE MAIN SLIDE EXAMPLE --> <li data-transition="boxslide" data-slotamount="7" data-link="http://www.google.de"> <img src="images/slides/image1.jpg"> <div class="caption sft huge" data-x="center" data-y="100" data-speed="700" data-start="1700" data-easing="easeOutBack">TEXT</div> <div class="caption sfb big" data-x="400" data-y="142" data-speed="500" data-start="1900" data-easing="easeOutBack">TEXT</div> <div class="caption lfr small" data-x="510" data-y="210" data-speed="300" data-start="2000">TEXT</div> </li> ... </ul>
Slider heights are 600px. To change the height, you need to edit both style.css
and style/js/scripts.js
files.
... $('.fullscreenbanner').revolution({ /* homepage slider */ delay: 9000, startheight: 550, ... $('.portfolio-banner').revolution({ /* portfolio post slider. Under PORTFOLIO SLIDER & CALL PORTFOLIO SCRIPTS */ delay: 9000, startheight: 550, ...
... .fullscreen-container { /* homepage slider */ width: 100% !important; position: relative; padding: 0; max-height: 550px !important; overflow: hidden; } ... .portfolio-bannercontainer { /* portfolio slider */ width: 100% !important; position: relative; padding: 0; max-height: 550px !important; overflow: hidden; } ...
Every list item represents a new banner/slider item.
Attributes | Options |
---|---|
data-transition |
boxslide boxfade slotzoom-horizontal slotslide-horizontal slotfade-horizontal slotzoom-vertical slotslide-vertical slotfade-vertical curtain-1 curtain-2 curtain-3 slideleft slideright slideup slidedown fade random slidehorizontal slidevertical papercut flyin turnoff cube 3dcurtain-vertical 3dcurtain-horizontal |
data-masterspeed |
Set the Speed of the Slide Transition. Default 300, min:100 max:2000. |
data-slotamount |
The number of slots or boxes the slide is divided into. If you use boxfade, over 7 slots can be juggy. |
data-link |
A link on the whole slide pic |
data-target |
A link target (like _self or _blank) |
data-linktoslide |
If data-link="slide" is set, you can define a slide where to jump in case the image has been clicked. |
data-delay |
A new Dealy value for the Slide. If no delay defined per slide, the dealy defined via Options will be used |
data-fstransition |
An Alternaive First Slide Transition (only in the first loop, than data-transition will be used) |
data-fsmasterspeed |
An Alternaive First Slide Transition Speed (only in the first loop, than data-masterspeed will be used) |
data-fsslotamount |
An Alternaive First Slide Slout Amoun (only in the first loop, than data-slotamoun will be used) |
Captions are containers which can be customized via CSS, classes for the start animation and some data options.
Classes and Attributes | Options |
---|---|
Class for color |
Example: huge , big , white (Check the style.css for details) |
Class for Incoming Animations |
sft - Short from Top sfb - Short from Bottom sfr - Short from Right sfl - Short from Left lft - Long from Top lfb - Long from Bottom lfr - Long from Right lfl - Long from Left fade - fading randomrotate- Fade in, Rotate from a Random position and Degree |
Class for Outgoing Animations only during the slide. |
stt - Short to Top stb - Short to Bottom str - Short to Right stl - Short to Left ltt - Long to Top ltb - Long to Bottom ltr - Long to Right ltl - Long to Left fadeout - fading randomrotateout- Fade in, Rotate from a Random position and Degree |
data-x |
The horizontal position in the standard (via startwidth option defined) screen size (other screen sizes will be calculated) |
data-y |
vertical position in the standard (via startheight option defined) screen size (other screen sizes will be calculated) |
data-speed |
duration of the animation in milliseconds |
data-start after |
how many milliseconds should this caption start to show |
data-easing |
special easing effect of the animation easeOutBack easeInQuad easeOutQuad easeInOutQuad easeInCubic easeOutCubic easeInOutCubic easeInQuart easeOutQuart easeInOutQuart easeInQuint easeOutQuint easeInOutQuint easeInSine easeOutSine easeInOutSine easeInExpo easeOutExpo easeInOutExpo easeInCirc easeOutCirc easeInOutCirc easeInElastic easeOutElastic easeInOutElastic easeInBack easeOutBack easeInOutBack easeInBounce easeOutBounce easeInOutBounce |
data-endspeed |
duration of the animation when caption leaves the stage in milliseconds |
data-end |
after how many milliseconds should this caption leave the stage (should be bigger than data-start+data-speed ! |
data-endeasing |
special easing effect of the animation. easeOutBack easeInQuad easeOutQuad easeInOutQuad easeInCubic easeOutCubic easeInOutCubic easeInQuart easeOutQuart easeInOutQuart easeInQuint easeOutQuint easeInOutQuint easeInSine easeOutSine easeInOutSine easeInExpo easeOutExpo easeInOutExpo easeInCirc easeOutCirc easeInOutCirc easeInElastic easeOutElastic easeInOutElastic easeInBack easeOutBack easeInOutBack easeInBounce easeOutBounce easeInOutBounce |
In order you wish to use a colored Background instead of some images as main Image in the Slider you can use the transparent image with a colored background style.
<img alt="" src="style/images/art/transparent.png" style="background-color:#ff0000">
You can embed videos via iframe of your favorite video site that allows this kind of embedding.
<li data-transition="slideup" data-slotamount="20"> <img src="images/slides/image20.jpg" > <div class="caption lfb boxshadow" data-x="70" data-y="120" data-speed="900" data-start="500" data-easing="easeOutBack"> <iframe src="http://player.vimeo.com/video/29298709?title=0&byline=0&portrait=0" width="460" height="259"></iframe> </div> </li>
In order to play FullWidth Videos, use the class "fade fullscreenvideo"
in the caption where you embeded the iframe. Use data-x="0"
and data-y="0"
and data-speed="500"
and data-start="10"
for best effect. The width and height of the iframe should be 100%!
In case you wish to use autoplay, just use the data-autplay="true"
parameter in the div where you embeded the iframe.
<li data-transition="slideup" data-slotamount="20"> <img src="images/slides/image20.jpg" > <div class="caption fade fullscreenvideo" data-x="0" data-y="0" data-speed="500" data-start="10" data-easing="easeOutBack"> <iframe src="http://player.vimeo.com/video/29298709?title=0&byline=0&portrait=0" width="100%" height="100%"></iframe> </div> </li>
Once again, thank you so much for purchasing this theme. As said at the beginning, we'd be glad to help you if you have any questions relating to this theme. No guarantees, but we'll do our best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.