MusiX – Music Band Html Template

Visit Our Product Page

Last update: 23.01.2017
Version: V1.3
Created By: Codeboxr Team
Support: Contact us

Thank you for purchasing our Template. If you have any questions that are beyond the scope of this help file,
please feel free to email via our contact form HERE. Thanks so much!

Overview

Musix is a clean, modern and minimalistic responsive html Template. It’s especially designed for artists, music bands, musicians or anyone working in the music industry and more. This is built with modern technologies like HTML5, CSS3, jQuery, Bootstrap3.x, Font Awesome 4.x, LESS, Gulp, Modernizer, CSS3 Animation, Owl Slider and more. Musix have many sections: Header, Slider, Featured Albums, Upcoming Events, Featured Musics(With Music Player), Video(With Animated Popup), Band Members, Latest News, Twitter Feed & footer.
It have many Pages(Home page & 8 Inner Pages):

  • Home Page ( index.html )
  • Album Listing Page ( album-listing.html )
  • Single Album Page ( album-single.html )
  • Blog Listing Page ( blog-listing.html )
  • Single Blog Page ( blog-single.html )
  • Event Listig page ( event-listing.html )
  • Single Event Page ( event-single.html )
  • Single Member Page ( member-single.html )
  • Contact Page ( contact.html )

It is accepted that before you start modifying the HTML for your need at least you have basic knowledge in html and twitter Bootstrap3. If you need custom development as well as need to know any thing specific for this Template that doesn't cover in this documentation, you are always welcome to contact us.

How to Modify or Customize

This Template has Nine(9) html files named index.html album-listing.html album-single.html blog-listing.html blog-single.html event-listing.html event-single.html member-single.html contact.html For home page index.html file for contact page contact.html, for Blog listing page copy blog-listing.html, for Single Blog page copy blog-single.html,for Album Listing page copy album-listing.html, for Single Album page copy album-single.html, for event listing page copy event-listing.html, for Single Event page copy event-single.html, for Single Member page copy member-single.html file and edit.

General

Musix html template contains html, css, js and less files. Css files are compiled from less files. Final js and css files are all minified version added in html head tag but their non minified version is included for further development. The theme includes a gulp.js file which can compile the less file into one css file and compress, same thing for theme.js to minified theme.min.js.

Less: Less files are located in assets/less folder. If you are advance user and know how to compile less then change it as need and compile. gulp.less file in theme root has all instruction. If you don't know what it is then don't touch it and leave it as it is. You can change css file as need (in case you need customization in style)

Html: All html files are located in theme root folder. Total three html files index.html(Home), contact.html() and speaker.html(Single Speaker)

CSS: Css files are stored in assets/css. The default css file is style-default.css and it's minified version of file style-default.min.css. In the css folder, there are other css files for different color variation. We include 5 color variation, by default the default css is linked, but you can change as need. We recommend not to change the default css file style-default.min.css and see there is an extra css file custom.css in css folder and put any extra custom style in that file.

JS Files: Most js libraries are under assets/vendor folder. Theme main js file is under folder assets/js , file name theme.min.js which is minified version of file theme.js. If you change the theme.js then compile it via gulp. We recommend not to change this file and use custom.js for any custom js code.

Logo, Social Area & Menu

If you would like to edit branding name/logo : you would do the following: (Line No:112)

                                
                            

If you would like to edit Social Area : you would do the following:(Line No: 119 to 129 )

                                
                            

If you would like to edit Menu Content : you would do the following:(Line No: 136 to 235 )

                                   
                            

Slider Content

If you would like to edit branding slider content : you would do the following: (Line No: 254 to 328 )

For 1 Slider Item Like this type of code in index.html

                                   
                                    
Music-Banner

If you would like to edit Countdown content : you would do the following: (Line No: 266 to 270 )

Like this type of code in index.html, you can search with keyword "musiccountdown", check the value for data-startdate, date format is dd-mm-yyyy to set event start date

                                

Subscribe Section

This feature need to take care the php part most but if you still need to change for html see the code block like bellow or search with keyword "subscribe-form-action" The Code is like (in index.html):

                                 
                            

Subscribe is handled from js and php file. After subscribe form is validated request is send to php file located in php/subscribe.php.

To configure Subscribe options then open subscribe.php . The code near 13-14 is for Subscribe configuration.

Default Subscribe configuration:

                        $save_in_csv    = false;
                        $send_email     = true;
                        $api_key        = ''; //put mailchimp api key here
                        $list_id        = ''; //put mailchimp id here
                    

Subscribe form validation and ajax js code is located in file assets/js/custom.js near line 121-180

                       /********************************************
     *** Email Subscription Validation And Ajax Submission
     *********************************************/

    var isEmail = function (email) {
        var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        return regex.test(email);
    }

    $('form.subscribe-form-action').on( 'submit', function (evnt) {
        evnt.preventDefault();

        $form = $(this);

        //var emailInput = $( 'form.subscribe-form' ).find( 'input#subscribe' );
        var emailInput = $form.find( 'input#subscribe' );

        if (isEmail( emailInput.val() )) {
            //console.log('ok');
            $.ajax({
                url: cbx_path + '/php/subscribe.php',
                type: 'post',
                data: { action: 'lz_subscription', 'email': emailInput.val().toLowerCase()},
                beforeSubmit: function (argument) {
                    // body...
                },
                success: function (ajaxResponse) {
                    try {
                        var ajaxResponse = $.parseJSON(ajaxResponse);
                        if ( !ajaxResponse.error ) {
                            emailInput.css('color', '#0f0');
                        } else {
                            emailInput.removeAttr( 'style' ); //css('color', '#f00');
                            throw ajaxResponse.message;
                        }
                        alert( ajaxResponse.message );
                    } catch (e) {
                        //e.message;
                        alert(e.message );
                    }
                },
                error: function (argument) {
                    // body...
                }
            });
            $form[0].reset();
        } else {
            emailInput.css('color', '#f00');
            return false;
        }
    });

    $('form.subscribe-form-action input#subscribe').on('keyup', function (evnt) {
        var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        this.style.color = (isEmail( $(this).val() )) ? '#f5832b': '#f00';
    });

    /********************************************
     *** End Email Subscription Validation And Ajax Submission
     *********************************************/
                        

Featured Albums Section

If you would like to edit Featured Albums content : you would do the following: (Line No: 373 to 450 )

For Single Album, the Code is like (in index.html):

                                    
                            

Events Section

If you would like to edit: you would do the following: (Line No: 453 to 589 )

For Single Event, the Code is like (in index.html):

                                   
event

13 January

The Palace at Auburn Hills

Philadelphia, PA

Music Section

If you would like to edit: you would do the following: (Line No: 614 to 623 )

The Code is like (in index.html):

                                   

Default in Template root/assets/albums is the all album's root dir, you can create the folder for single album as you need, as example we have created a folder name album1 and put mp3 files in it, for any single mp3 file if you want to load the album cover photo/thumbnail then put it in the album folder, by default any single album will use the default cover photo from dir Template root/assets/albums/cover-default.png. In the above html code inside the div "cbxmusicplayer" there is a tag audio which is the main play list holder, check the audio tag has multiple source tag which is the single music file.

                                
                            

The above code shows how a single audio file can be setup. first attribute src is the mp3 file location, data-cover is the thumbnail for this song. if you don't have different then use default cover, then data-download-url which is the download url for this song, if you don't need it then don't put that tag, then title attribute, then type="audio/mpeg" as default for any mp3

Video Popup

If you would like to edit: you would do the following: (Line No: 633 to 663 )

The Code is like (in index.html):

                                   

BAND MEMBERS

If you would like to edit: you would do the following: (Line No: 668 to 833 )

For Single Member, the Code is like (in index.html):

                                   
member

Leonardo Doe Caprio

Pop Musician

Latest News

If you would like to edit: you would do the following: (Line No: 837 to 905 )

For Single News, the Code is like (in index.html):

                                   
23 February
news

A faucibus velit adipiscing est vitae scelerisque tristique eu adipiscing porta suspendisse aliquet duis class phasellus euismod ...

Twitter Feed

The Code is like (in index.html): search for keyword "tweetiefeed"

                                

Twitter feed uses a js script owl carousel which default added in every html and php folder in Template root/tweetie. To create twitter app please follow this guideline. Here we need to collect 4 keys. The follow that guideline it will help you to collect Consumer key(api key) and consumer secret(api secret). If you go to your twitter app config page and click tab "Keys and Access Token" check the section titled "Your Access Token", There you will get Access Token and Access Secret. So, total we will have 4 keys. Now go to Template root/tweetie/api/config.php you will see code like bellow

                                 // Consumer Key
    define('CONSUMER_KEY', 'copy paste here');
    define('CONSUMER_SECRET', 'copy paste here');

    // User Access Token
    define('ACCESS_TOKEN', 'copy paste here');
    define('ACCESS_SECRET', 'copy paste here');

                            

Now need to work bit js code, check the index.html near footer line no 1008-1034

                                 //adding twitter feed, dependency js location siteroot/tweetie/tweetie.js
        $('#tweetiefeed').twittie(
            {
                'username': 'codeboxr',
                'hideReplies': true,
                'count' : 10,
                'apiPath' : 'tweetie/api/tweet.php',
                'dateFormat': '%b-%d-%Y',
                'template': '{{tweet}}-{{date}}'
            }, function () {
                    //using owl carousel
                    $("#tweetiefeed ul").owlCarousel({
                        navigation : false, // Show next and prev buttons
                        slideSpeed : 900,
                        rewindSpeed : 1000,
                        paginationSpeed : 400,
                        navigationText : ['',''],
                        pagination : false,
                        autoPlay : true,
                        stopOnHover : false,
                        singleItem:true,
                        addClassActive:true
                    });
                    //tweet sliding using owl carousel ends
                }
        );
        //twitter feed done.
                            

Here the only thing you need to change is 'username': 'codeboxr', , put your twitter handle/username where it says codeboxr

Google Map

This is a javascript based plugin. So, for any type customization or modification need to open site custom javascript file which you find from js floder as custom.js

HTML code of goole map starting from as

                                   

Confgigure Google map: To change from the above section latitude, see it has example like data-lat="xxxx", longitude (example data-lng="xxxx"), tile (data-title="xxxxx") and description for location marker (data-content="xxxx"), , the rest thing will be loaded automatically and you don't need to care about this.

If you would like to edit: you would do the following: (Line No: 931 to 945 )

                                   
                            

The Code is like:

                                   
                                    

Album Our Featured Albums

Contact Page: ( contact.html)

Contact page is a separate page contact.html and the mail related configuration is shown below:

To configure email options then open contact.php file which you find from php directory from Template root Template root/php/contact.php. There we try to describe everything by comments.

Default Email configuration:

                        $admin_email_to         = 'admin@yourdomain.com'; // admin email who will get the contact email alert
                        $admin_email_to_name    = "Company Name"; // Admin Name/Company name who will get the email alert
                        $admin_email_from       = 'noreply@yourdomain.com';  // admin email from which email address email will be sent
                        $admin_email_from_name  = 'System'; //admin name from which email will be sent
                        $admin_send_subject     = 'Contact form alert'; //email subject what the admin will get as contact email alert
                        $user_send_subject      = 'Thanks for contact, your copy'; //email subject what the user will get if the user agreed or select "copy me"
                    

Single Album Page: ( album.html)

Single Album page is a separate page album-single.html

If you would like to edit: you would do the following:

                        

Classical Music Title

  • Vocal : Adele Adkins
  • Writer : Adele Adkins, Greg Kurstin & Max Martin
  • Producer : Greg Kurstin & Max Martin
  • No of Songs : 12

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse eum possimus tenetur ullam! Adipisci asperiores atque autem, culpa dicta dignissimos error in molestiae nisi pariatur quam sapiente similique sint ut?

Buy Album

Album Track List

Classical Music Track List

Track Title Writer Producer
'Hello' Adele Adkins, Greg Kurstin Kurstin
Send My Love (To Your New Lover) Max Martin Kurstin
"I Miss You" Adele Adkins, Max Martin Ariel Rechtshaid
When We Were Young Adele Adkins, Max Martin Ariel Rechtshaid
Remedy Adele Adkins, Max Martin Ariel Rechtshaid
Water Under the Bridge Adele Adkins, Max Martin Ariel Rechtshaid
River Lea Adele Adkins, Max Martin Ariel Rechtshaid
"Love in the Dark" Adele Adkins, Max Martin Ariel Rechtshaid
Million Years Ago Adele Adkins, Max Martin Ariel Rechtshaid
All I Ask Adele Adkins, Max Martin Ariel Rechtshaid
"Sweetest Devotion" Adele Adkins, Max Martin Ariel Rechtshaid

Soundcloud List

Single Blog Page: ( blog.html)

Single Blog page is a separate page blog-single.html

If you would like to edit: you would do the following:

                        
23 February

A faucibus velit adipiscing est vitae scelerisque tristique eu adipiscing porta suspendisse aliquet duis class phasellus euismod ...

Cras porttitor convallis ligula, at elementum erat mattis quis. In vitae vulputate tellus, sed laoreet est. Nam eget dolor non eros rutrum facilisis ut vel sapien. Aenean sed vehicula massa. Morbi imperdiet egestas ullamcorperet. Expo neque, congue nec nibh in, pellentesque fringilla risus. Suspendisse hendrerit et sapien ut pretium. Aenean nulla ipsum, facilisis eu porta non, rutrum sit amet nibh. Quisque id diam feugiat, pharetra arcu eget, bibendum tortor. Vivamus aliquam lacus id leo tristique sagittis. Pellentesque mattis diam metus, id commodo ex placerat vitae. Curabitur lobortis justo ante, in varius leo congue id. Etiam a libero elementum, posuere est at, sodales justo. Proin nec venenatis metus.

Cras porttitor convallis ligula, at elementum erat mattis quis. In vitae vulputate tellus, sed laoreet est. Nam eget dolor non eros rutrum facilisis ut vel sapien. Aenean sed vehicula massa. Morbi imperdiet egestas ullamcorperet. Expo neque, congue nec nibh in, pellentesque fringilla risus. Suspendisse hendrerit et sapien ut pretium. Aenean nulla ipsum, facilisis eu porta non, rutrum sit amet nibh. Quisque id diam feugiat, pharetra arcu eget, bibendum tortor. Vivamus aliquam lacus id leo tristique sagittis. Pellentesque mattis diam metus, id commodo ex placerat vitae. Curabitur lobortis justo ante, in varius leo congue id. Etiam a libero elementum, posuere est at, sodales justo. Proin nec venenatis metus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. vitae vulputate tellus, sed laoreet est. Nam eget dolor non eros rutrum facilisis ut vel sapien. Aenean sed vehicula massa. Morbi imperdiet egestas ullamcorperet. Expo neque, congue nec nibh in, pellentesque fringilla risus. Suspendisse hendrerit et sapien ut pretium. Aenean nulla ipsum, facilisis eu porta non, rutrum sit amet nibh. Quisque id diam feugiat, pharetra arcu eget, bibendum tortor.

Someone famous in Source Title

Unordered List Style

  • Reget nec nunc. Etiam posuere iaculis quam.
  • Faucibus viverra eget nec nunc. Etiam posuere iaculis quam.
  • Etiam nec urna in odio faucibus viverra eget nec nunc. Etiam posuere iaculis quam.
  • Lectus Morbi tempus, odio suscipit efficitur vestibulum
  • Ut in ante et quam malesuada gravida. Morbi tempus, odio suscipit efficitur vestibulum
  • nteger ac nunc sed lectus vehicula mollis. Ut in ante et quam malesuada gravida. Morbi tempus, odio suscipit efficitur vestibulum
  • Reget nec nunc. Etiam posuere iaculis quam.
  • Faucibus viverra eget nec nunc. Etiam posuere iaculis quam.
  • Etiam nec urna in odio faucibus viverra eget nec nunc. Etiam posuere iaculis quam.
  • Lectus Morbi tempus, odio suscipit efficitur vestibulum
  • Ut in ante et quam malesuada gravida. Morbi tempus, odio suscipit efficitur vestibulum
  • nteger ac nunc sed lectus vehicula mollis. Ut in ante et quam malesuada gravida. Morbi tempus, odio suscipit efficitur vestibulum

Ordered List Style

  1. Reget nec nunc. Etiam posuere iaculis quam.
  2. Faucibus viverra eget nec nunc. Etiam posuere iaculis quam.
  3. Etiam nec urna in odio faucibus viverra eget nec nunc. Etiam posuere iaculis quam.
  4. Lectus Morbi tempus, odio suscipit efficitur vestibulum
  5. Ut in ante et quam malesuada gravida. Morbi tempus, odio suscipit efficitur vestibulum
  6. nteger ac nunc sed lectus vehicula mollis. Ut in ante et quam malesuada gravida. Morbi tempus, odio suscipit efficitur vestibulum
  7. Reget nec nunc. Etiam posuere iaculis quam.
  8. Faucibus viverra eget nec nunc. Etiam posuere iaculis quam.
  9. Etiam nec urna in odio faucibus viverra eget nec nunc. Etiam posuere iaculis quam.
  10. Lectus Morbi tempus, odio suscipit efficitur vestibulum
  11. Ut in ante et quam malesuada gravida. Morbi tempus, odio suscipit efficitur vestibulum
  12. nteger ac nunc sed lectus vehicula mollis. Ut in ante et quam malesuada gravida. Morbi tempus, odio suscipit.

Table Style Here

# Column heading Column heading Column heading
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
4 Column content Column content Column content
5 Column content Column content Column content

Images Alignment

image Cras porttitor convallis ligula, at elementum erat mattis quis. In vitae vulputate tellus, sed laoreet est. Nam eget dolor non eros rutrum facilisis ut vel sapien. Aenean sed vehicula massa. Morbi imperdiet egestas ullamcorperet. Expo neque, congue nec nibh in, pellentesque fringilla risus. Suspendisse hendrerit et sapien ut pretium. Aenean nulla ipsum, facilisis eu porta non, rutrum sit amet nibh. Quisque id diam feugiat, pharetra arcu eget, bibendum tortor. Vivamus aliquam lacus id leo tristique sagittis. Pellentesque mattis diam metus, id commodo ex placerat vitae. Curabitur lobortis justo ante, in varius leo congue id. Etiam a libero elementum, posuere est at, sodales justo. Proin nec venenatis metus. Cras porttitor convallis ligula, at elementum erat mattis quis. In vitae vulputate tellus, sed laoreet est. Nam eget dolor non eros rutrum facilisis ut vel sapien. Aenean sed vehicula massa. Morbi imperdiet egestas ullamcorperet. Expo neque, congue nec nibh in, pellentesque fringilla risus. Suspendisse hendrerit et sapien ut pretium. Aenean nulla ipsum, facilisis eu porta non, rutrum sit amet nibh. Quisque id diam feugiat, pharetra arcu eget, bibendum tortor. Vivamus aliquam lacus id leo tristique sagittis. Pellentesque mattis diam metus, id commodo ex placerat vitae. Curabitur lobortis justo ante.

image Cras porttitor convallis ligula, at elementum erat mattis quis. In vitae vulputate tellus, sed laoreet est. Nam eget dolor non eros rutrum facilisis ut vel sapien. Aenean sed vehicula massa. Morbi imperdiet egestas ullamcorperet. Expo neque, congue nec nibh in, pellentesque fringilla risus. Suspendisse hendrerit et sapien ut pretium. Aenean nulla ipsum, facilisis eu porta non, rutrum sit amet nibh. Quisque id diam feugiat, pharetra arcu eget, bibendum tortor. Vivamus aliquam lacus id leo tristique sagittis. Pellentesque mattis diam metus, id commodo ex placerat vitae. Curabitur lobortis justo ante, in varius leo congue id. Etiam a libero elementum, posuere est at, sodales justo. Proin nec venenatis metus. Cras porttitor convallis ligula, at elementum erat mattis quis. In vitae vulputate tellus, sed laoreet est. Nam eget dolor non eros rutrum facilisis ut vel sapien. Aenean sed vehicula massa. Morbi imperdiet egestas ullamcorperet. Expo neque, congue nec nibh in, pellentesque fringilla risus. Suspendisse hendrerit et sapien ut pretium. Aenean nulla ipsum, facilisis eu porta non, rutrum sit amet nibh. Quisque id diam feugiat, pharetra arcu eget, bibendum tortor. Vivamus aliquam lacus id leo tristique sagittis. Pellentesque mattis diam metus, id commodo ex placerat vitae.

image

Cras porttitor convallis ligula, at elementum erat mattis quis. In vitae vulputate tellus, sed laoreet est. Nam eget dolor non eros rutrum facilisis ut vel sapien. Aenean sed vehicula massa. Morbi imperdiet egestas ullamcorperet. Expo neque, congue nec nibh in, pellentesque fringilla risus. Suspendisse hendrerit et sapien ut pretium. Aenean nulla ipsum, facilisis eu porta non, rutrum sit amet nibh. Quisque id diam feugiat, pharetra arcu eget, bibendum tortor. Vivamus aliquam lacus id leo tristique sagittis. Pellentesque mattis diam metus, id commodo ex placerat vitae. Curabitur lobortis justo ante, in varius leo congue id. Etiam a libero elementum, posuere est at, sodales justo. Proin nec venenatis metus.