This theme was built with the help of Twitter Bootstrap.
Open the TEMPLATE folder and your will find all HTML, CSS, JS and PHP files that you'll need to customize and add your content.


HTML Files

File Name Description
index.html Home Page to dispaly latest albums, events news and blogs
index2.html Another Layout for Home
index3.html Another Layout for Home
album-detail.html List songs of your album and brif description
album.html All of your albums
artist-detail.html Let the world know about your artist
artist.html List of Artists
blog.html Blog posts
contact.html Contact form and google map
event-detail.html Detail of a event
events.html List All of the events
gallery.html Picture gallery
news.html Latest news of your band
video-detail.html Page to embed Video
videos.html List of videos

Stylesheets Files

assets/css folder


File Name Description
main.css Main CSS file of the template.
bootstrap.min.css
bootstrap-responsive.min.css
Twitter Bootstrap framework.
flexslider.css CSS file for sliders, used in "OUR PROJECTS" and "TESTIMONIALS".
font-awesome.css CSS file for custom icons.
prettyphotto.css CSS file for popup plugin.



Javascript Files

assets/js folder

File Name Description
main.js Main JS file to call and init all javascript used in the template.
bootstrap.min.js Twitter Bootstrap framework.
jquery-1.10.1.min.js
jquery.easing-1.3.pack.js
jQuery library.
modernizr-2.6.2.min.js Modernizr library.
jquery.flexslider-min.js Flexslider script, used for sliders in the template : OUR PROJECTS and PORTFOLIO
carouselFredsel.js Jquery carousel.
jquery.easing-1.3.pack.js Easign plugin that produces easign feature
isotope.js Filtring and sorting plugin, used for sorting of portfolio
tweetable.js Latest Tweets
flicker feed.js Flicker Feed

Images Files

assets/img folder

All imges files are placed inside img folder, and img folder has sub folders. Imges Used in the demo has been replaced with dummy images

Fonts Files

assets/font folder

File Name Description
Fonts awesome Fonts awesome

CSS Structure

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

/*	Table OF Contents
==========================
1-General Styles
2-Navigation
3-Audio Player
4-Social Fonts
5-Albums
6-Breadcrumb
7-Home-Slider
8-Latest News,events,videos
9-Artist
10-photo gallery
11-blog
12-Upcomming Events
13-Sidebar
14-Contact
15-Footer
16-Responsive
					

Gallery

   var $containerfolio = $('.showcase');
    if($containerfolio.length) {
        $containerfolio.isotope({
            layoutMode: 'fitRows',
            filter: '*',
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
        });
    }
    $('.filter-out li a').click(function () {
        $('.filter-out li').removeClass("active");
        $(this).parent().addClass("active");
        var selector = $(this).attr('data-filter');
        $containerfolio.isotope({
            filter: selector,
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
        });
        return false;
    });
For sorting and filtration of projects isotpe.js plugin is used. For API detail Visit
Projects are being loaded from external html pages. Get familiar with jquery API to undetstand the code Visit here.

How to use flexslider

	$('#container').flexslider({
        animation: "slide",
        directionNav: false,
        controlNav: false,
        pauseOnHover: true,
        slideshowSpeed: 6000,
        direction: "horizontal" //Direction of slides
    });
More options and documentation, please check here.

CarouselFredsel Slider

 $('.selector').carouFredSel({
            width: "100%",
            circular: false,
			infinite: false,
            auto: false,
            scroll: {
                items: 1,
                easing: "linear"

            },
            prev: {
                button: "#selector-prev",
                key: "left"
            },
            next: {
                button: "#selector-next",
                key: "right"
            },
        });		
More options and documentation, please check here.

Tweets

open sourse plugin

How to get Access Key/API Key For Tweet configurations,

Follow the following steps and then update config file for tweet plugin (assets/php/tweet_api/config.php)

Login to twiiter and visit https://apps.twitter.com/ and please follow steps to create an app for twitter feed.
/*===================
 Tweets
===================*/
    $('.latest-tweet').twittie({
		 username:'envato',
		dateFormat: '%b. %d, %Y',
		template: '{{tweet}} ',
		count: 2,
		apiPath:"assets/php/tweet_api/tweet.php",
	});
 /*============================
	6-Flicker
	============================*/
	 
	
	 $('#flicker-feed').jflickrfeed({
        limit: 6,
        qstrings: {
            id: '52617155@N08'
        },
        itemTemplate: '
  • {{title}}
  • ' }, function () { $("a[data-rel^='prettyPhoto']").prettyPhoto(); });
    More options and documentation, please check API:
    Tweets. FlickerFeeds.

    Google Maps

    We rock provides easy way to use google maps, User only have to write addres, map skin, zoom level into html like:
    
     <div id="google-map" 
     	class="contact-map"
        data-theme="pink" 
        data-address="kansas city" 
        data-zoomlvl="13" 
        data-maptype="HYBRID"></div>
    
    
    Map Theme Options:
    • data-theme="pink"
    • data-theme="red"
    • data-theme="blue"
    • data-theme="yellow"
    • data-theme="green"
     //This is how google map function call is:
     contactemaps(selector_map, mapAddress, mapType, zoomLvl,map_theme);
    
    More options and documentation, please check here.

    Jplayer

    Visit Jpalyer API Page to understand how to use jplayer