Thank you for purchasing Beat Template! You will find all the help you need within the documentation below, for any further assistance feel free to contact us through our Theme Forest profile. We'll be happy to answer your questions.
Beat it's a unique one-page HTML5 Template, especially designed & developed for bands, music events and any kind of performers linked to the music and dance industry like DJ's, singers, musicians and dance groups.This template offers a lot of useful features that will help your work stand out from the crowd. With Beat Template you will find a Social Feed Grid that show the latest tweets, Instagram photos and news; Events location map (integrated with google maps); Event Countdown; audio player; video and image gallery; unique product slider to sell your merchandise products; news/blog page; contact form and much more!
Beat has a fully Responsive structure built with Bootstrap and it's retina ready, so it can adapt perfectly to all types of screens and devices, allowing your fans to follow your work, news and events anywhere at anytime! It comes in 2 versions (dark & Light) and it's highly customizable to help you turn Beat template into your own awesome website.
The main file includes:1 HTML5 page, Javascript, CSS3 files, php, Bootstrap, AwsomeFont, 3 layered and well organized PSD files (One-page site, About us page and news page) and help documentation.
Note that all images are not included in the main file and were used for preview purpose only.
This template has 3 PSD files included. The PSDs were built with vector layer shapes and smart objects to make it easy for you to edit and update all of the components according to your needs. They are all layered and well organized (images not included):
Note that all the images used in the Beat Template are not included and were used for preview purpose only.
To preview the PSD files correctly you need to install the “Lato” font from Google web fonts (Lato,10 Styles by Lukasz Dziedzic) and “Lovelo” font from Font fabric (remake of the original Lovelo Inline – designed by Renzler Design, Vienna, Austria.).
This template is based on bootstrap grid system. The grid is composed by 12 columns named "col-sm-1", "col-sm-2", "col-sm-3", ... , "col-sm-12".
Here is the general structure:
<body> <header id="header"> <section class="nav-section"> <div class="container"> <div class="row"> <div class="col-sm-12"> <a href="#home" class="nav-logo"><img src="img/logo_small.png" alt="" /></a> <nav id="nav"> <ul> <li><a href="<!-- Section ID anchor link -->"><!-- Section Name --></a></li> ... </ul> </nav> <ul class="sn-icons"> <!-- List of Social Icons--> </ul> </div> </div> </div> </section> </header> <section id="<!-- Section ID. Must match anchor link in navigation menu -->"> <div class="container"> <div class="row"> <div class="col-sm-12"> <h1 class="section-title"><!-- Section Title --></h1> <p class="section-desc"><!-- Section Description --></p> </div> </div> <div class="row"> <div class="col-sm-8"> ... </div> <div class="col-sm-4"> ... </div> </div> </div> </section> <!-- Exemple of an Overlay Page Structure --> <div class="page-overlay" id="<!-- Overlay Page ID. Must match the attribute data-overlay-id of the button that call this page -->"> <i class="icon-remove-circle close-overlay"></i> <div class="container"> <div class="row"> <div class="col-sm-12"> <h1 class="center"><!-- Overlay Page Title --></h1> <p><!-- Overlay Page Content --></p> </div> </div> </div> </div> <footer id="footer" class="bg-color2"><!-- Footer Content Here --></footer> </body>
We are using four CSS files on this template.
- style.css - Contains all of the specific stylings for the page
- bootstrap.min.css - Bootstrap grid styles
- font-awesome.min.css - Iconic font designed for Bootstrap
- lovelo.css - Font-face for Lovelo Font
Style.less structure:
/* Table of Content ================================================== #Imports #Typography #General #Header #Navigation #Home #Page Overlay #The Band #Concerts #Gallery #Store #Contacts #Footer #PrettyPhoto #Media Queries*/
If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.
This theme imports 23 Javascript files. Most of them are grouped in the plugins.js file to improve the page speed load.
- jquery-1.9.1.min.js
- jquery.easing.min.js
- modernizr-2.6.2.min.js
- bootstrap.min.js
- jquery.scrollTo-1.4.2-min.js
- jquery.placeholder.min.js
- waypoints.min.js
- waypoints-sticky.min.js
- retina.js
- jquery.imagesloaded.js
- jquery.wookmark.min.js
- jquery.flexslider-min.js
- supersized.js
- jquery.prettyPhoto.js
- jquery.nicescroll.js
- jquery.nicescroll.plus.js
- jquery.jplayer.js
- ttw-music-player-min.js
- richmarker.js
- jquery.ccountdown.js
- jquery.knob.js
- jquery.tweet.min.js
- scripts.js
Changing Theme:
There are two themes available(dark and light). To change to light theme just add the line below after all stylesheets on 'head' section.
<link href='css/lightversion.css' rel='stylesheet' type='text/css' id='lightversion' />
Changing colors:
The page colors can be changed in css/style.css. Open the file in an editor with Search and Replace feature (like notepad++). Search for #3f9f97 (color used in the template) and replace with your own color.
Changing font:
Beat Template uses an embed font from google webfonts. Go to http://www.google.com/webfonts choose a font and use the generated code to replace de folowing tag around line 31 on index.html:
<link href='http://fonts.googleapis.com/css?family=Lato:400,300,700' rel='stylesheet' type='text/css'>
In style.css search for font-family property and replace width the name of your choosen font.
Changing Logo:
Edit img/logo.png or replace on index.html the image source in the folowing line:
<a href="#home" id="logo" class="nav-logo"><img src="img/logo.png" alt="" width="379" height="205" /></a>
You also have to replace the short version of the logo around line 50 of index.html. This logo will show when the navigation bar becomes sticky.
<a href="#home" class="nav-logo"><img src="img/logo_small.png" alt="" height="51" /></a>
Retina Images:
This template is prepared for retina displays. So, for images to look great on this type of screens, 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="img/my_image.png" />
The script will check your server to see if an alternative image exists at this path:
<img src="img/my_image@2x.png" />
Note that the high-resolution image should have twice the size of the low-resolution image. For example, if the low-resolution image has 1920x400, the high-resolution image must have 3840x800.
Changing Icons:
We are using Font Awesome for the icons. Please check http://fortawesome.github.io/Font-Awesome/icons for the full list of icons you can use. To change the icon, you just have to change the class name with the one you have chosen.
For example, to change the icon of the first service into a book go to the line where you have:
<i class="icon-desktop"></i>
and change it to:
<i class="icon-book"></i>
Changing Social Stream Items:
Here is the structure of a Last News item:
The "data-news-details" attribute is JSON formatted and will populate the news overlay page. Note that the Youtube embed link should not have question mark. To check if the attribute "data-news-details" is well formatted use the tool http://jsonlint.com/
To add an Instagram Item to your Social Stream Grid use the following structure:
The div with class "instagram" will be automatically popuplated with a single photo from your Instagram feed once you have your Instagram account set up (Go to Features to know how to properly set up your account).
To add a Twitter Item to your Social Stream Grid use the following structure:
The div with class "tweet" will be automatically popuplated with a single tweet from your Twitter account once you have your Twitter account set up (Go to Features to know how to properly set up your account).
To add a Video Link to your Social Stream Grid use the following structure:
To make a video open on a lightbox simply add data-gal="prettyPhoto" to your anchor link. You can add the embed link from Youtube or Vimeo to the href of the achor.
Adding the class "featured" to the
To add the Music Player to your Social Stream Grid use the following structure:
The div with id "music-player" will be populated with the music player. (Go to Features to know how to add musics to your player)
Changing Gallery scrollbar color:
Open js/scripts.js, go to line 649(or 624 in version 1.0.0), and on the following code replace the value of the attribute 'cursorcolor':
$(".gallery-scroller").niceScroll({ cursorcolor:'#3f9f97', cursorwidth:'20px', background:'#1F2326', cursorborder:'0px solid #1F2326', zindex:'999', autohidemode:false, enablemousewheel:false });
Changing Countdown circles color:
Find the class "counter" in your index.html, and replace the value of the attribute "data-fgColor" of the nested input.
<div class="counter"><input class="knob days" data-readOnly="true" data-width="118" data-height="118" data-displayPrevious=true data-fgColor="#3f9f97" data-skin="beat" data-thickness=".15" data-min="0" data-max="365" value="75" /><span>DAYS</span></div> <div class="counter"><input class="knob hour" data-readOnly="true" data-width="118" data-height="118" data-min="0" data-max="24" data-displayPrevious=true data-fgColor="#3f9f97" data-skin="beat" data-thickness=".15" value="75" /><span>HOURS</span></div> <div class="counter"><input class="knob minute" data-readOnly="true" data-width="118" data-height="118" data-min="0" data-max="60" data-displayPrevious=true data-fgColor="#3f9f97" data-skin="beat" data-thickness=".15" value="75" /><span>MIN.</span></div>
Fullscreen background Slideshow:
To change the fullscreen background images open js/slideshow/slideshow.js and on slides array change the value for the keys "image". You can create as much as you want.
slides : [ // Slideshow Images {image : 'img/background_img.jpg'}, {image : 'img/background_img2.jpg'}, {image : 'img/background_img3.jpg'} ]
Contact Form:
Open contact.php and change the email address with your own.
$to = youremail@yourdomain.com; // Replace with your email address
Google maps:
The Google map is integrated with the Google Maps API v3. To change the information(location,date,etc) of your concerts/events open js/google_maps_marker/myconcerts.js and create your own locations. The structure of the myConcerts object should look like this:
var myConcerts = [ { year:2014, month:01, day:20, latitude:51.509597, longitude:0.015965, location:'The O2 - Peninsula Square, London, UK', infoWindow:'The great concert in Lorem Ipsum
Ticket price: $80
Buy tickets here' }, { year:2013, month:11, day:02, latitude:34.043788, longitude:-118.267028, location:'STAPLES Center - 1111 S Figueroa St, Los Angeles, CA, US', infoWindow:'The great concert in Dolor sit amet
Ticket price: $90
Buy tickets here' } ];
To change the map color open js/scripts.js, go to line 402 and replace the value of the variable "color" with your own color.
Adding musics to the Music Player:
To add musics to the music player open music/myplaylist.js and create your own playlist. The structure of the myPlaylist object should look like this:
var myPlaylist = [ { mp3:'music/fight-no-more.mp3', oga:'music/fight-no-more.ogg', title:'Fight No More', artist:'soundroll', rating:4, duration:'2:42', cover:'music/abum-cover.jpg' }, { mp3:'music/driving-in-my-car.mp3', oga:'music/driving-in-my-car.ogg', title:'Driving In My Car', artist:'soundroll', rating:5, duration:'2:40', cover:'music/abum-cover.jpg' } ];
Configuring Twitter account:
To customize your twitter feed open js/scripts.js, go to line 647 and replace the value of the variable "username" with your own username. Next, change the value of bandName to your own Band/Group name or leave it blank. The bandName variable will show before the twitter username on the twitter feed item.
var username = 'Envato', //replace with your own Twitter username bandName = 'Beat Band'; //replace with your Band Name
Next, you need to have a twitter App for your usage in order to obtain OAuth credentials, see https://dev.twitter.com/apps for help.
After creating your app, configure twitter/index.php with your OAuth credentials (as shown on code below), and enable caching if you desire. Your cache directory of choice must be writable by PHP.
// Your Twitter App Consumer Key private $consumer_key = 'YOUR_CONSUMER_KEY'; // Your Twitter App Consumer Secret private $consumer_secret = 'YOUR_CONSUMER_SECRET'; // Your Twitter App Access Token private $user_token = 'YOUR_ACCESS_TOKEN'; // Your Twitter App Access Token Secret private $user_secret = 'YOUR_ACCESS_TOKEN_SECRET';
Configuring Instagram account:
To properly configure your Instagram account do the following steps:
- Log in into your Instagram account
- Register a client id at http://instagram.com/developer/clients/manage/ Fill in the website, phone number and reason fields and then proceed.
- Click on "Register a New Client"
- Fill in all the fields.
- Save your client id, client secret, and redirect uri
- open in your browser the following url: (Replace CLIENT-ID with your own client id and replace REDIRECT-URI with your own redirect uri)
https://instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=token- Authorize the app
299414445.4fba43e.79a5b952446d431684cafca09b0f51b9- Get your user id at http://jelled.com/instagram/lookup-user-id by entering your username
$user_id = '599245029'; $access_token = '299414445.4fba43e.79a5b952446d431684cafda09b0f51b9'; $number_photos = '18';- The variable "number_photos" defines the number of photos pulled from your Instagram account.
Style switcher
The Style switcher is just for preview purposes, and is not included in Beat template. If you wish to use it, please contact us through our ThemeForest profile.
The images* used in the preview template are from:
Fonts:
Scripts:
Once again, thank you so much for purchasing this template. As we said at the beginning, we will be glad to help you if you have any questions relating to this template.
WiselyThemes