Cody

Responsive Bootstrap Coming Soon Template


Many thanks for purchasing Cody.

If you have any questions that are beyond the scope of this help file, please feel free to contact me through my profile on ThemeForest and I will try my best to help!

Please note: Due to illegal downloads, emails will not be answered if any template related questions are sent to spiralpixel.com. Please use my ThemeForest contact form, thank you.
Don't forget to give it a star rating over at Theme Forest if you have enjoyed customizing the template and lastly.. have fun!

Jo Phillips

Template Updates

Version 1.2
Version 1.1
#content {
position: absolute;
margin-left: auto;
margin-right: auto;
left: 1%;
right:1%;
}
Version 1.0

General

Framework: Cody uses Twitter Bootstrap3, you can read more about it here: http://getbootstrap.com/

Font: The font used is Raleway.
You can add your own fonts quite easily by visiting: http://www.google.com/webfonts.
Select your chosen font and add the code to the head section of the index.html file, and then make the font changes to your css.

Icons: Icons used are by FontAwesome giving you scalable vector icons that can instantly be customized - size, color, drop shadow, and anything that can be done with the power of CSS.
http://fortawesome.github.io/Font-Awesome/

Place Font Awesome icons just about anywhere with the <i> tag.

<i class="fa fa-camera-retro"></i> fa-camera-retro

Retina Ready: Cody is Retina Ready and includes retina.js.
How it works
retina.js checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image. The script assumes you use Apple's prescribed high-resolution modifier (@2x) to denote high-resolution image variants on your server. For example, if you have an image on your page that looks like this: 

<img src="/images/my_image.png" />
The script will check your server to see if an alternative image exists at this path:
"/images/my_image@2x.png"

Tips For Creating Retina Display Graphics
www.photoshopquicktips.com/tutorials/creating-retina-display-graphics/

Slideshow & Single Image

Slide Images - Add your images to > style.css > 04. SLIDESHOW > SLIDESHOW - ADD IMAGES HERE 

.cb-slideshow li:nth-child(1) span { 
    background-image: url(../images/slider1.jpg) ;
}
.cb-slideshow li:nth-child(2) span { 
    background-image: url(../images/slider2.jpg);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}
........

For the single image page add your background to:
style.css > 04. SLIDESHOW 

.cb-slideshow li span { 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
	background-image: url(../images/bg.jpg) ;
    background-repeat: repeat;
    opacity: 1;
    z-index: 0;
	-webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 36s linear infinite 0s;
    -moz-animation: imageAnimation 36s linear infinite 0s;
    -o-animation: imageAnimation 36s linear infinite 0s;
    -ms-animation: imageAnimation 36s linear infinite 0s;
    animation: imageAnimation 36s linear infinite 0s; 
}

Revolving Slide Text - Add your text to index.html

<!--SLIDESHOW-->
<ul class="cb-slideshow">
	<li><span>Image 01</span><div><h3>cre-ate</h3></div></li>
	<li><span>Image 02</span><div><h3>des-ign</h3></div></li>
	<li><span>Image 03</span><div><h3>code</h3></div></li>
	<li><span>Image 04</span><div><h3>pho-to</h3></div></li>
	<li><span>Image 05</span><div><h3>web</h3></div></li>
	<li><span>Image 06</span><div><h3>ori-gin-al</h3></div></li>
 </ul>

Video

This section uses YTPlayer and will display YouTube Movies. It is replaced on smaller screens by a full screen image which you add to the css.
Note: This player doesn't work as abackground for devices due to the restriction policy adopted by all on managing multimedia files via javascript.

To add your video simply place the url into: 
<!--ADD YOUR YOU TUBE VIDEO LINK HERE-->
<a id="BigVideo" class="player" data-property=" {videoURL:'http://youtu.be/l6QR3NVUQuI', 
containment:'body', autoPlay:true, mute:true, startAt:0, opacity:1, showControls : false}">#</a>
You can add start and end times to your video e.g, startAt, 20, endAt:2.00

CSS3 Animations

CSS3 Animations:
Animate.css is used for the animation effects. - http://daneden.github.io/animate.css/
I have included the animations used in style.css, you can easily choose your own and add them to the stylesheet.
The animations are initialised using wow.js. - http://mynameismatthieu.com/WOW/
Simply the CSS class .wow to a HTML element. e.g

<div class="soon wow slideInLeft" data-wow-delay="7s">SEE YOU SOON</div>

Options:
data-wow-duration: Change the animation duration
data-wow-delay: Delay before the animation starts
data-wow-offset: Distance to start the animation (related to the browser bottom)
data-wow-iteration: Number of times the animation is repeated

Sources & Credits

Sources


Images Used In Template


Once again, thank you so much for purchasing this template. As I said at the beginning, I'll be glad to help you if you have any questions relating to this template. No guarantees, but will do my 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.

Jo