Thank you for purchasing our product. 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!
Music Template for Singer, band and dj website - A Bootstrap 4 based html template for music related website. This is a full featured Music Template including Music Player with playlist, contact, about band, about singer, concert, contact, blog and all other needed Pages.
MxTonz is Complete Template for music agency or single singer. It's responsive designed and WordPress ready. It is multi-device supported & cross browser compatible. Well documented.
This Documentation provide you a clear guideline for how to use and customize this template. If you facing any problem, please don't forget to ask any question or contact with us for support. Thank you for purchasing our product.
MxTonz has lot of features and functionality:
All the HTML codes and section are well seprated by linespace and comments so that you can modify easily. As example here below is the sample codes for Banner section:
<!-- Banner Slider -->
<div class="banner-slider owl-slider" id="banner-slider">
<div class="banner-item banner-item-1">
<div class="banner-content">
<div class="container">
<h3 class="banner-subtitle theme-color">New Music Album</h3>
<h1 class="banner-title">Get the new songs</h1>
<div class="button-group">
<a class="btn btn-border btn-lg btn-black" href="#">Purchase Now</a>
<a class="btn btn-simple btn-lg play-video" href="https://www.youtube.com/watch?v=5cY5PHE4x_g"><i class="fa fa-play"></i> Watch Trailer</a>
</div>
</div>
</div>
</div>
<div class="banner-item banner-item-2">
<div class="banner-content text-white">
<div class="container">
<h3 class="banner-subtitle">New Music Album</h3>
<h1 class="banner-title">Get the new songs</h1>
<div class="button-group">
<a class="btn btn-border btn-lg btn-white" href="#">Purchase Now</a>
<a class="btn btn-simple btn-lg btn-white play-video" href="https://www.youtube.com/watch?v=5cY5PHE4x_g"><i class="fa fa-play"></i> Watch Trailer</a>
</div>
</div>
</div>
</div>
<div class="banner-item banner-item-3">
<div class="banner-content">
<div class="container text-center">
<h3 class="banner-subtitle">New Music Album</h3>
<h1 class="banner-title">Get the new songs</h1>
<div class="button-group">
<a class="btn btn-border btn-lg btn-black" href="#">Purchase Now</a>
<a class="btn btn-simple btn-lg play-video" href="https://www.youtube.com/watch?v=5cY5PHE4x_g"><i class="fa fa-play"></i> Watch Trailer</a>
</div>
</div>
</div>
</div>
</div>
<!-- Banner Slider End -->
You just need to copy one of them, which one you needed for your site to build.
We have included a great design and well functional music player. It also have playlist beside player. On playlist you can add or replace your own music. Upload music to your site and add inside <div class="player-track-list-block"></div>
by copying a whole div with class amplitude-song-container and all child content inside it. And replace the new song value as your one like below:
<div class="song amplitude-song-container amplitude-play-pause" amplitude-song-index="0" data-song="yourSongLink.mp3" data-cover="songAlbumCoverLink.jpg">
<div class="song-meta-data">
<span class="song-title">Your Song Title</span>
<span class="song-artist">Artist Name Here</span>
</div>
<div class="play-now">
<a class="btn btn-sm btn-black"><span class="normal-state">Play Now</span><span class="play-state">Pause</span></a>
</div>
</div>
Replace all the thing to your one along with giving amplitude-song-index to a new value. Here the value is given 0
Our external styles files are seperated on css folders on the assets folder having all the external CSS plugins
And our template have 2 custom CSS files name style.css and responsive.css. . Which are on seperated CSS folder under root directory. They are compiled css file from scss files on the scss folder of root directory.
style.css files codelines are decorated on such level:
/* Table of content -------------------------------------------- General Button Header Banner Upcoming Album Upcoming Stage Artist About Singer Next Event Show Styles Gallery Products Latest Album Music Player Blog Blog Single Subscription Footer Page Header About Band About Artist Album Single Concert Page Contact Page FAQs 404 Styles ------------------------------------------*/
Our css rules are seperated beautifully for each section. So it's easy to customize. Such as, If you want to change the style of Banner section and you are not familiar with sass than simply go to Banner section and change the styles as your want:
/*--------------------------------
Banner
--------------------------------*/
.banner-item {
height: 768px;
background-size: cover;
background-position: center center;
position: relative;
}
.banner-item-1 {
background-image: url(../images/banner/1.jpg);
}
.banner-item-2 {
background-image: url(../images/banner/2.jpg);
}
.banner-item-3 {
background-image: url(../images/banner/3.jpg);
}
.banner-content {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
margin-top: 25px;
}
.banner-subtitle {
font-size: 2.2rem;
text-transform: uppercase;
line-height: 1;
margin-top: 0;
margin-bottom: 5px;
}
.banner-title {
text-transform: uppercase;
margin-top: 0;
margin-bottom: 30px;
line-height: 1;
}
.banner-slider .owl-prev,
.banner-slider .owl-next {
position: absolute;
top: 50%;
margin-top: 25px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 30px;
height: 120px;
background-color: #111111;
opacity: 0;
visibility: hidden;
color: #ffffff;
font-size: 2rem;
line-height: 120px;
text-align: center;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.banner-slider .owl-prev:hover,
.banner-slider .owl-next:hover {
background-color: #fc427f;
opacity: 1;
}
.banner-slider .owl-prev {
left: 0;
}
.banner-slider .owl-next {
right: 0;
}
.banner-slider:hover .owl-prev,
.banner-slider:hover .owl-next {
opacity: 0.6;
visibility: visible;
}
This template has following javascript plugins:
all these files are located on assets/js folder, And our custom js and map js is on separated js folder on root directory.
Like CSS and HTML our JavaScript codes on our custom.js file are also well organized and well commented.
For example if you want to change the functionality of Gallery Isotope just find the following block of codes and change it according to your need:
/*-----------------------------------------------------
Gallery Isotope
------------------------------------------------------*/
// init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.grid-item',
masonry: {
columnWidth: '.grid-sizer'
}
});
// layout Isotope after each image loads
$grid.imagesLoaded().progress(function () {
$grid.isotope('layout');
});
We followed the standard technique and latest PHP coding structure.
PHP File included:
In sendmail.php 1st step is to change our mail address with your own email address so that you can get mail from contact form. Find the line and give your email address:
// Email will be send $to = appscred@gmail.com// Change with your email
Replace the appscred@gmail.comto your receiver email address.
/*======================================================================= * Template Name: MxTonz - A Fresh Music, Band & Dj Template * Template URI: http://appscred.com/html/music * Author: appscred * Author URI: http://appscred.com/ * Description: A Bootstrap 3 Full and Final HTML Template for music band, dj, music agency or any kind of website related to music industry * Version: 1.0 * License: GPL v2 or later * License URI: http://www.gnu.org/licenses/old-licenses/gpl-2.0.html * Tags: html, template, music, marketing, appscred ======================================================================= */
We are thankful to...
Once again, thank you so much for purchasing this product. As we said at the beginning, We'd be glad to help you if you have any questions relating to this product. No guarantees, but we'll do our best to assist. If you have a more general question relating to this product on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
appscred Team