A responsive HTML5 template powered by Twitter Bootstrap. Kalypso features a fully responsive design, feature-rich home page and much more. For support issues that cannot be found in this documentation, please contact me via the ThemeForest author page.
Updated: 10/27/12
Author: Refaktor
Email: refaktor.co@gmail.com
Docs powered by: TOC
To install simply upload the entire contents of the template folder into the directory of choice on your web server.
Kalypso uses several stylesheets, each with their own purpose. The Bootstrap files are located in the bootstrap/css folder but should not be modified directly. The main stylesheet is located inside the css folder and contains all the main content and structure styles. Colors are handled in the css/colors folder. Kalypso has 10 pre-defined color schemes. Each color scheme is located inside the css/colors folder. To change the color scheme, copy and paste the contents of that color.css file into the default.css file. The default.css file is called in every template file, so this method makes changing the color scheme much simpler. There are also three slider specific stylesheets found in the css/sliders folder.
Kalypso utilizes many Javascript libraries which can be found in the js and bootstrap/js folders. In addition to this, each template contains some markup needed for those specific pages. That markup can be found at the top of each file between the head tags. Note: If adding your own Javascript file calls to a template, make sure that the jQuery file is always caused first to avoid conflicts.
The Kalypso header area allows you to convey a lot of important information to your site's visitors. It has two separate areas: the slide out panel and the main header. In the main header you can easily use own custom logo, or simply display your site's title and description. In the slide out panel uou can add a contact phone number or email address, and display any of the following social icons and your social links: Facebook, Twitter, YouTube, Google +, LinkedIn, Vimeo, Pinterest and an RSS feed.
Kalypso's menu utilizes the jMenu JavaScript plugin and has support for dropdowns. Refer to the menu markup in the default templates to customize to your liking. If you change the default menu UL class name, make sure to change the script call accordingly:
$("#jMenu").jMenu();
Kalypso includes support for four different feature sliders: Elastic Image Slider, NivoSlider, Bootstrap Carousel and a CSS3 Paralax Slider. There is an example template for each slider (Elastic Image Slider is the default found in index.html) which contains all of the same markup found on the standard index.html. All the sliders used in this template are fully responsive and look great on mobile devices.
This is Kalypso's default image slider allows you to use an image, text caption, slide thumbnail and a link for each slide. Your images should ideally be 1200 pixels wide and all be the same height for optimal display. The following script initializes the slider:
$('#ei-slider').eislideshow({
animation : 'center',
autoplay : true,
slideshow_interval : 3000,
titlesFactor : 0
});
For more detailed information about the slider, you can visit the plugin page here.
NivoSlider is a popular image slider plugin that is now fully responsive. It has many different options and styles that can be used to customize the look and feel. The basic initialization for a NivoSlider is as follows:
$('#slider').nivoSlider();
NivoSlider has full documentation which can be read here.
The Bootstrap Carousel is fully supported by Kalypso and does not even require any Javascript initialization to use. You can see examples of it in use in the bootstra-carousel.html, blog.html and blog-full.html. Documentation for the Bootstrap Carousel can be found here.
This CSS3-only slider uses no jQuery, but does not function properly on older browsers that do not support CSS3 (IE8 and below). See the css3-paralax.html for the slider markup and css/sliders/paralax.css for all the styles.
Thank you very much for purchasing the Kalypso responsive HTML template. Once again if you have any issues or feedback please connect via the ThemeForest author page. Enjoy using Kalypso!
© 2012 Refaktor.