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
#content { position: absolute; margin-left: auto; margin-right: auto; left: 1%; right:1%; }
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/
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>
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.
<!--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
Modal Box
You can style your modal box in style.css > 05. MODAL BOX
Countdown
Add your date to > js >script.js > COUNTDOWN - ADD YOUR DATE HERE
$(document).ready(function () { var austDay = new Date("January 1, 2015"); $('#launch_date').countdown( ...
Subscription Form
Add your email address into > mail.php.
Replace, 'yourname@yourdomain.com' with your own.
If you would like to change the notification message you can do so at the foot of the html page.
// Message Sent - Show the 'Thank You' message and hide the form
CSS3 Animations:
Animate.css is used for the animation effects. -