How to use Hot Music Band template with Joomla 4 (after installation)
This tutorial explains how to use 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 displays featured articles. So, make some of your articles featured to make them 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 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.
City/Country Location Date Tickets Lompoc, CA Avenue Hall 9 / 16 / 2013 Sold OutSanta Maria, CA City Hall 9 / 17 / 2013 Sold OutSan Luis Obispo, CA Sports Center 9 / 21 / 2013 Available Online Monterey, CA Crystal Palace 9 / 22 / 2013 Available Online
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 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:
Lorem noise velit auctor
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 Content > Site 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:
{*photogallery}images/pics/slide1{/photogallery}{*photogallery}images/pics/slide2{/photogallery}{*photogallery}images/pics/slide3{/photogallery}{*photogallery}images/pics/slide4{/photogallery}{*photogallery}images/pics/slide5{/photogallery}
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 the Responsive Photo Gallery plugin. You can recognize it by code snippets:
{*responsivelightbox}images/pics/slide1{/responsivelightbox}
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:
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 the 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.