Music Band Template - HotThemes

Search Form and Social Buttons

HotThemes Logo and Top Menu

Music Band Template

Compatibility View Demo Download Purchase Music Band $39 Get All Templates $49

This is responsive Joomla template for websites for music bands. It probably has all the features that every music band template should have. There's a large image carousel on the home page that can be used for the best shots of the band. This is followed by the blog section (powered by K2 component) which organizes news items in several tabs (powered by jQuery UI). Scroll down and you will find the band's tour events organized in tables that represents years (can be changed to months of whatever else). The table contains the most important information about each tour event. There's also ticket ordering form that you can integrate with PayPal to sell online tickets.

One more step lower, the visitor is served with samples of the band's music which can be streamed online (powered by HTML5 in all modern browsers). Each song has been connected with links for buying the band's songs online via iTunes or similar service.

There's no better way to promote a music band's events than showing some great pictures and video clips (served by YouTube or Vimeo). This is the next step in the long home page of Hot Music Band template. It's also divided in two tabs (Pics and Video) which are also divided in several sub-tabs. This allows the website owners to post much more images and video clips in the same place.

The bottom part of this template is reserved for interaction with music band's fans. Visitors of the band's website can send an email through the integrated contact form (powered by Rapid Contact module). Finally, for the communication with fans through social networks, there are several buttons designed and connected to the most important social networks for this industry (unavoidable Facebook and Twitter, and more...).

Template Screen Shots

  • Template Screen Shot 1
  • Template Screen Shot 2
  • Template Screen Shot 3
  • Template Screen Shot 4

Template Key Features

This is the list of the most significant functions of the responsive Music Band template:

  • Long page responsive template, one page flat design based on Sparky Framework.
  • 4 pre-defined styles with different colors. All colors are easily customizable in Sparky options (infinite color options).
  • Customization of the template's layout and adding/removing module positions is easy. It's powered by Sparky's drag'n'drop Layout Editor. Change layout and element's dimensions easily whenever you need.
  • Hot Full Carousel, Hot Film Tape, Hot Maps, Hot Carousel, and Hot Gallery modules and Hot Photo Gallery plugin are included with Hot Music Band template. Full support for K2 component is included. All commercial modules included in this template are free for you, if you buy template (you save $15 per module). All extensions are pre-installed and configured.
  • Smart organization of content in tabs and sub-tabs for better user experience on Events, Gallery and News sections.
  • HotStart (SQL dump) available with both single purchase or membership plan. It copies template with all extensions and demo pages easily.
  • 15 module positions are used in our demo. Unlimited number of module positions can be added easily within Layout Editor of Sparky Framework, if needed.
  • SEO friendly template code for better success of your site.
  • PSD source file and fonts are available.
  • Top menu system with presentation of sub-level in drop-down panes. It's converted to the button for smaller resolutions and better user experience on mobile devices.
  • Google Mobile-Friendly Test PASSED.
  • Tested with IE8+, Firefox, Chrome, Safari, Opera.
  • Support for RTL (right-to-left) languages.

 

How to use Hot Music Band template (after installation)

This page explains how to use Hot Music Band template after HotStart installation. What you probably need to do after setting this template up onto your server is to change our demo content with your real site content. So, we will explain specifics of this template here in sections from the top to the bottom of the template's home page.

The Big Carousel

You can change the images and text of this module in Extensions > Module Manager > Hot Full Carousel. This module has been published in the module position 'header1'. To learn more about this module, please visit responsive Joomla carousel module page.

Music Band News

This section is powered by K2 component. So, you should go to Components > K2 > Items and change text and images of the K2 items as usually. To learn more about K2 component please visit K2 documentation page.

The Band's Tour Events

The next section is actually a custom HTML module published in position 'advert2'. Before editing this module, it's recommended to disable WYSIWYG editor in global configuration of Joomla. You can edit it even with the editor enabled, but this could break the HTML and functionality of the tabs. To edit this module go to Extensions > Module Manager > The Band's Tour Events. Under Custom Output, you will see the HTML code that you are about to edit. You can edit it directly in Joomla but you can also copy it from here and paste into any code editor (such as Sublime Text, Coda, etc...) which will show the code in colors and make it easier to edit and then paste back to Joomla.

Months (tab buttons) are actually an unordered list UL, so you just change names (Sep, Oct, Nov, Dec) to whatever you like.

 
<ul>
   <li><a href="#month-1">Sep</a></li>
   <li><a href="#month-2">Oct</a></li>
   <li><a href="#month-3">Nov</a></li>
   <li><a href="#month-4">Dec</a></li>
</ul>
 

Each tab button has its DIV container and a TABLE inside it. This is the content for the first tab button. Obviously, in this HTML you would recognize the text that you should edit. You can put any content here, just make sure it's wrapped into DIV container that has ID value the same as the HREF value of the tab button.

 
<div id="month-1">
   <table class="tour_table">
      <tr>
         <th class="tour_cell">City/Country</th>
         <th class="tour_cell">Location</th>
         <th class="tour_cell">Date</th>
         <th class="tour_cell">Tickets</th>
      </tr>
      <tr>
         <td class="tour_cell">Lompoc, CA</td>
         <td class="tour_cell">Avenue Hall</td>
         <td class="tour_cell">9 / 16 / 2013</td>
         <td class="tour_cell"><del>Sold Out</del></td>
      </tr>
      <tr>
         <td class="tour_cell">Santa Maria, CA</td>
         <td class="tour_cell">City Hall</td>
         <td class="tour_cell">9 / 17 / 2013</td>
         <td class="tour_cell"><del>Sold Out</del></td>
      </tr>
      <tr>
         <td class="tour_cell">San Luis Obispo, CA</td>
         <td class="tour_cell">Sports Center</td>
         <td class="tour_cell">9 / 21 / 2013</td>
         <td class="tour_cell"><a href="#">Available Online</a></td>
      </tr>
      <tr>
         <td class="tour_cell">Monterey, CA</td>
         <td class="tour_cell">Crystal Palace</td>
         <td class="tour_cell">9 / 22 / 2013</td>
         <td class="tour_cell"><a href="#">Available Online</a></td>
      </tr>
   </table>
</div>
 

Our Music Live

First, you should prepare your own songs. It's recommended to have both MP3 and OGG format of each song that you want to stream online (to maximize browser support). This is another custom HTML module. You can access it in Extensions > Module Manager > Our Music Live. As for previous module, we recommend you to edit it with WYSIWYG editor disabled. You can change the album cover image if you make your own PNG image (size 170 x 170 px), name it as "album_cover.png" and upload it to "images" folder of Joomla.

Each song has its own HTML code marked with "song 1", "song 2", and so on. It looks like this:

 
<!-- song 1 -->
<div class="song_name">Lorem noise velit auctor</div>
<div class="buy_song">
   <a href="http://www.itunes.com">BUY</a>
</div>
<div class="audio_player">
   <audio controls>
      <source src="images/music/sample1.ogg" type="audio/ogg">
      <source src="images/music/sample1.mp3" type="audio/mpeg">
      Your browser does not support the audio element.
   </audio>
</div>
 

You can edit text for song name (in demo "Lorem noise velit auctor"), buy link (in demo "http://www.itunes.com") and the paths to the MP3 and OGG files (in demo "images/music/sample1.ogg" and "images/music/sample1.mp3"). The buy link can be deleted if you don't need it. You should delete entire DIV with class "buy_song".

Music Band's Gallery and Videos

This module can be accessed from Extensions > Module Manager > Music Band's Gallery and Videos (position 'advert4'). It has 2 tabs (Pic and Video) and each tab contains sub-tabs. When you edit the module, you will recognize tabs as unordered list UL:

 
<ul>
   <li><a href="#music-band-pics">Pic</a></li>
   <li><a href="#music-band-videos">Video</a></li>
</ul>
 

As in "The Band's Tour Events" module, each tab has its own DIV container with ID set as per HREF values ("music-band-pics" and "music-band-videos". The first container that shows pictures looks like this:

 
<div id="music-band-pics">
    <div id="gallery_nav">
        <ul>
            <li><a class="active" href="#" onClick="goto('#slide1', this); return false">Slide 1</a></li>
            <li><a href="#" onClick="goto('#slide2', this); return false">Slide 2</a></li>
            <li><a href="#" onClick="goto('#slide3', this); return false">Slide 3</a></li>
            <li><a href="#" onClick="goto('#slide4', this); return false">Slide 4</a></li>
            <li><a href="#" onClick="goto('#slide5', this); return false">Slide 5</a></li>
        </ul>
    </div>
    <div id="gallery_content">
        <div class="contentbox-wrapper">
            <div id="slide1" class="contentbox">            
            {*photogallery}images/pics/slide1{/photogallery}
            </div>
            <div id="slide2" class="contentbox">
            {*photogallery}images/pics/slide2{/photogallery}
            </div>
            <div id="slide3" class="contentbox">
            {*photogallery}images/pics/slide3{/photogallery}
            </div>
            <div id="slide4" class="contentbox">
            {*photogallery}images/pics/slide4{/photogallery}
            </div>
            <div id="slide5" class="contentbox">
            {*photogallery}images/pics/slide5{/photogallery}
            </div>
        </div>
    </div>
</div>
 

Here, you can see the subtabs (Slide 1, Slide 2...). Originally, there are 5 sub-tabs. To remove in example the Slide 5, you should delete the last LI element (the one with Slide 5 text) and also the last DIV element (the one with ID value "slide5"). To add one more tab, copy the LI element (the one with Slide 5 text, and change text to Slide 6) and change anchor from "#slide5" to "#slide6". Also, copy the DIV element (the one with ID value "slide5") and change the ID value from slide5 to slide6.

The content of the sub-tabs are managed by Photo Gallery plugin. You can recognize it by code snippets:

 
{*photogallery}images/pics/slide1{/photogallery}
 

This snippet should not have an asterisk in real site (*). When you are changing the demo pictures with your pictures (in example for sub-tab Slide 1, simply delete all content from folder images/pics/slide1 (including /thumbs subfolder) and upload your pictures in this folder.

The second tab (Video) of this module has this HTML code originally:

 
<div id="music-band-videos">
    <div id="video_nav">
        <ul>
            <li><a class="active" href="#" onClick="goto2('#video1', this); return false">Video 1</a></li>
            <li><a href="#" onClick="goto2('#video2', this); return false">Video 2</a></li>
            <li><a href="#" onClick="goto2('#video3', this); return false">Video 3</a></li>
            <li><a href="#" onClick="goto2('#video4', this); return false">Video 4</a></li>
            <li><a href="#" onClick="goto2('#video5', this); return false">Video 5</a></li>
        </ul>
    </div>
    <div id="video_content">
        <div class="contentbox-wrapper-video">
            <div id="video1" class="contentbox">
            <iframe width="640" height="360" src="//www.youtube.com/embed/PvwqSMRtoSI" allowfullscreen></iframe>
            </div>
            <div id="video2" class="contentbox">
            <iframe width="640" height="360" src="//www.youtube.com/embed/x6XBlkvTmv8" allowfullscreen></iframe>
            </div>
            <div id="video3" class="contentbox">
            <iframe width="640" height="360" src="//www.youtube.com/embed/tGc8jL4dzao" allowfullscreen></iframe>
            </div>
            <div id="video4" class="contentbox">
            <iframe width="640" height="360" src="//www.youtube.com/embed/RMBVzcjPiyo" allowfullscreen></iframe>
            </div>
            <div id="video5" class="contentbox">
            <iframe width="640" height="360" src="//www.youtube.com/embed/IPSYplu_3fA" allowfullscreen></iframe>
            </div>
        </div>
    </div>
</div>
 

It's very similar to the previous tab with pictures. Instead of word "slide", we used word "video" here. The content of the sub-tabs (the DIVs with ID values of video1, video2...) are IFRAME elements copied from YouTube (on the Video page click Share > Embed and copy/paste code). However, you can put any content you like here, in example from Vimeo or any other content you like.

Contact Us

This section is powered by Rapid Contact module (with modified style for this template) that you can access from Extensions > Module Manager > Contact Us. There you should change the dummy email address with your real email to start receiving emails.

Follow Music Band

This is a custom HTML module in position 'advert6'. You can access it by going to Extensions > Module Manager > Follow Music Band. There you can edit demo links with real links of your social network pages.

39 USD

Compatibility View Demo Download Purchase Music Band $39 Get All Templates $49

Links, Partners and Social Media