Bravia

Responsive Landing Page Site template that built with Bootstrap.

Created: 06/02/2012
Updated: 04/02/2013
By: xWisnux
xwisnux@worksofwisnu.com

Thank you for purchasing my item. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Bravia is a HTML template so there's no really "installation" required just unzip the main file you've downloaded from themeforest and after unziping you have your all template ready to be used.

All of the information within the main content area is nested within a div with an id of "primaryContent". Here is the general structure.

<body>
<div class="primaryContent">
  <div class="header-wrapper">	
  ...
  ..
  .
  </div>
  
  <div class="banner-wrapper">	
  ...
  ..
  .
  </div>
  
  <div id="main">	
  ...
  ..
  .
  </div>
  
  <div class="grey-wrap">	
  ...
  ..
  .
  </div>
  
  <div class="bottomContent">	
  ...
  ..
  .
  </div>
  
  <div class="footer-wrap">	
  ...
  ..
  .
  </div>
</div>

There are some CSS Files used in this theme. And here are the short explanations about them :

  • bootstrap.css - The Twitter Bootstrap Framework, do not edit this file.
  • bootstrap-responsive.css - The Twitter Bootstrap Framework for Responsive layout, do not edit this file.
  • style.css - This is the main CSS file that controls almost everything on the site EXCEPT some attributs on Diapo slider, VideoJS and Prettyphoto
  • style-responsive.css - The custom CSS of the template for responsive layout
  • diapo.css - Default Style for Diapo Slider
  • prettyPhoto.css - Style for Pretty Photo
  • video-js.min.css - Compressed style for Video JS

The third file contains all of the specific stylings for the page. The file is separated into sections using:

/**********************************************************************************

	Project Name: Bravia Landing Page
	Project Description: Bravia Landing Page Template by Works of Wisnu
	Author: xWisnux
	Author URI: http://worksofwisnu.com
	Version: 2.0.x
	
**********************************************************************************/

section, footer, #primaryContent, anchor, paragraph, headings, list, .rounded

/***************************
======= HEADER =============
***************************/

#header-wrapper, header, h1.logo


/***************************
======= BANNER WRAP =============
***************************/

#banner-wrap, .featuredf, .featured, .featuredImage, .featuredInfo

/***************************
======= MAIN =========
***************************/

#quote, #cta, #specialty

/**** THE SIGN UP FORM ****/

#signup, #signup input, #signup button

/*****************************
======= GREY CONTENT =========
*****************************/

#grey-wrap, .leftSection, .recentWork

/*************************************
========= BOTTOM CONTENT =============
*************************************/

.bottomContent, #testimonial, .testimonialQuote, .testimonialName, #client, #subscribtion, #subscribe, #subscribe input, #subscribe button

/***************************
======= FOOTER =============
***************************/

#footer-wrap, #headSocial, h2.footerLogo, #footerText, #leftFooter, #rightFooter, #to-top

This template used Diapo Slider for the slider area/featured area. To get the best view, you need to put image with resolution of 550px x 310px

    <div class="pix_diapo">
    
	<div class="featuredf span12">
	  <div class="featuredImage span6">
	  	<img src="Your Image Here">
	  </div>
	  <div class="featuredInfo span6">
	  	<h3>Should be the subtitle</h3>
	  	<p>Should be the short description or promotion words</p>
	  </div>
	</div>

	<div class="featuredf span12">
	  <div class="featuredImage span6">
	  	<video id="Video" class="video-js>
	  		<source src="Your Video Here" type="video/mp4">
	  		<source src="Your Video Here" type="video/ogg">
	  		<source src="Your Video Here" type="video/webm">
	  	</video>
	  </div>
	  <div class="featuredInfo span6">
	  	<h3>Should be the subtitle</h3>
	  	<p>Should be the short description or promotion words</p>
	  </div>
	</div>
	
    </div>

Put the source of your pictures into the image source and you will get the slider work.

All the pages link the neccessary js files inside the "head" tag of the document. If you need to modify the behavior from a certain jquery element open the "js/custom.js" file. where you can alter the parameters of some of the js elements.

This theme uses several scripts many of which are documented within the theme's code. If you're a developer, you will find this particularly useful.

  1. jQuery - a Javascript library that greatly reduces the amount of code that you must write. For more information, please visit http://www.jquery.com/
  2. Diapo Slider - a jQuery slideshow with many effects, transitions, easy to customize, using canvas and mobile ready, based on jQuery 1.4+. In this theme, Diapo Slider used on Featured item. Refer to the author's documentation for additional notes on how to use it.
  3. Prettyphoto - a jQuery plugin to enhance the image/photos/gallery. In this theme, Prettyphoto used on the Recent Work/portfolio. Refer to the author's documentation for additional notes on how to use it.
  4. Testimonial Cycle - a jQuery plugin to animate/cycle the testimonial. You can also visit http://www.jquery.com/ for more info about jQuery Cycle.
  5. Video JS - a jQuery plugin to make a self hosted video using HTML5 Semantics. You can also visit http://www.videojs.com/ for more info about Video JS.

This template has two php files, they are registration.php for Registration/Sign Up Form and mailchimp-subscriber.php for Mailchimp Subscribtion Form. All files must be updated before use. Here is how it works:

  1. If user hit the "Sign Me Up Now" button, then the form submitted to registration.php which will send you and the user a notification mail
  2. If user hit the "Get Notified" button, then the form submitted to mailchimp-subscriber.php. Of course you have to registered to mailchimp and have an API key. If you have some question you can also check the reference here

I've included one psd with this theme. The PSD file is well documented on the groups and layered

I've used the following images, icons or other files as listed.