About HOT Carousel

Need to display your images as a carousel? Easily done with our new Joomla extension. Again, usage is very simple. You need to enter path to your images and your carousel is ready.

Switch between effects (fade and scroll), select number of images and image sizes are also possible. Learn more

Unlimited Color Schemes

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

Six gradient background colors of the Carousel module. Background can be a solid color as well.

To get to the parameters in your Joomla Admin go to: Extensions > Template Manager and select HOT Architecture. There you can change many template parameters. The template colors can be selected from palette or entered in hexadecimal format.

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

Under Styles menu you can see five styles that we predefined for you. But you are not limited only to these. Try to be creative and test your own colors! Feel free to experiment with HOT Architecture!

21 Module Positions

module positions

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

Adjustable Widths

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.

widths

Image shown above is from another template. However, this template has the same feature.

Lightbox

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" />
</a>
</p>

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">

<ul>

<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>

</ul>

</p>

Reflection Effect

We integrated reflection script with this template. So, you can add reflection to your images without editing them in Photoshop.

Beside that, you have full control over the reflection height and opacity.

How to add reflection effect to the picture

reflection effectAdd class="reflect" to any image you'd like to have reflection effect, and you are done!

To control the effect's height, use class="reflect rheight25". In this case, height of the reflection will be 25% of the image height. You can also, control opacity of the reflection. Use class="reflect ropacity60" and opacity will be set to 60%. You can also combine height and opacity, in example class="reflect rheight25 ropacity60".

 

 

 

 

<img class="reflect ropacity60 rheight25" src="images/stories/demo/reflection.jpg" alt="reflection effect">

Reflection Effect

reflection

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

HotStart (MySQL Dump)

mysql dump

Follow our instructions to make a copy of this demo site to your server. HOT Start! is available with each purchase. It allows you to create a copy of this demo site with ease.

Lightbox Enabled

lightbox

jQuery Lightbox built-in template. Click on thumbnail picture will open a bigger picture in the Lightbox. Check out how this handy feature works on the following page.