joomla music template

parametersUnlimited color options! Select your own colors. This is useful if you want to match main template color with your company logo.

Five pre-defined styles available. There are three variants of top background image (home page). Whatever color you select for themain template color, all background images will be updated accordingly.



With our templates, you don't need to edit images in Photoshop.

To get to the parameters in your Joomla Admin go to: Extensions > Template Manager and select HOT Rockin. There you can select colors and background images. The template colors can be selected from handy palette tool or entered manually in hexadecimal format (combination of 6 letters and numbers). If you don't have Photoshop, Fireworks or similar application, Color Combos can help you to find out the hexadecimal code of your color.


Change few options in template parameters and... Boom! You got template with completely new experience!

module positions

This template has support for 19 module positions. All module positions are collapsible. If no modules are published on some module positions, those module positions will automatically collapse.

You can define overall template width as well as widths of the left hand side and the right hand side columns with modules. All of this is done very easily in the template configuration. Main content area will be calculated to fit best between the left hand side and the right hand side column, no matter what values you entered for them. Also, if you don't have left or right modules published on certain pages, main content area will occupy their space.


If you like effect used on the images on this Demo site, you can use it for your site. This template comes with integrated jQuery Lightbox. Please prepare thumbnail image(s) and full size image(s) before proceeding.

To test how Lightbox gallery works, please check Color Schemes page and click on the pictures.

Single Image Lightbox

If you don't know HTML, you can use built-in Joomla editor. What you need to do:

  1. Create a new paragraph and assign "gallery" ID to it
  2. Insert thumbnail image inside
  3. Link the thumbnail image with full-size image
  4. You are done!

HTML view should look close to this example:

<p id="gallery" align="center">
<a href="images/stories/sample.jpg" title="This is module positions layout.">
<img src="images/stories/sample_small.jpg" border="0" width="200" height="152" />

Multiple Images Lightbox

Here's what you need to do to make a mini gallery, using Joomla editor:

  1. Create a new paragraph and assign "gallery" ID to it
  2. Make an unordered list
  3. Insert thumbnail image inside every list element
  4. Link each thumbnail image with full-size image
  5. You are done!

HTML view should look close to this example:

<p id="gallery">


<li><a href="images/stories/sample1.jpg" title="Step 2"><img src="images/stories/sample_small1.jpg" border="0" width="136" height="100" /></a></li>

<li><a href="images/stories/sample2.jpg" title="Step 3"><img src="images/stories/sample_small2.jpg" border="0" width="120" height="100" /></a></li>



top panelImagine this situation: You have many modules to publish, but if you publish them all, your web site would become too busy. With this feature, you can have some modules published, but hidden into the top panel. When visitor needs some of these modules, he clicks the OPEN button and the top panel will slide down. Once he's done, he clicks theCLOSE button and the top panel will be hidden again.

The top panel contains four module positions. Those positions and floatable and have fluid width. In template parameters, you can change the panel's background color, as well as font color.

Member's Area

Latest News

News Article 4

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore. Read more ...

News Article 3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Read more ...

News Article 2

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. Read more ...

Reflection Effect

Reflection script is incorporated in template. If you want an image to have it, use class "reflect" for your images. You can also control reflection's height and opacity.

Learn more about it here.

HOT Start

Follow our instructions to make a copy of this demo site to your server.

HOT Start! is available with each template. It allows you to create a copy of this demo.

Lightbox Enabled

jQuery Lightbox available. Click on thumbnail picture will open bigger picture in the Lightbox.

Check out how this feature works on this page.