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 Content > Site Modules > 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 shows featured Joomla articles. Make some articles as featured and they will appear here.

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 the 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 Content > Site Modules > 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.

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.

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 Content > Site Modules > Our Music Live. As for the previous module, we recommend you edit it with the 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:

You can edit text for song name (in demo "Lorem noise velit auctor"), buy link (in demo "") 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 Content > Sote Modules > 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:

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:

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:


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.

It's very similar to the previous tab with pictures. Instead of the 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, for 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 Content > Site Modules > 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 Content > Site Modules > Follow Music Band. There you can edit demo links with real links of your social network pages.

Follow Music Band

Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio.