Designed and developed by
HotThemes - Joomla Templates

Right Module

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

User Login

Second Right

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan.

Who's Online

We have 222 guests and no members online

Responsive Template Specific Parameters

As with all our templates, with this template you have the full control of color settings. These options are under the Template Colors tab. They are easy to understand and self-explanatory, so we will not elaborate them here. However, this template has some specific settings related to the jQuery scripts that make "responsive" positioning of the elements on the screen.

Masonry Settings

jQuery Masonry is the script used for the elements re-positioning. The settings related to the animation of re-positioning of the elements are Re-position animation easing (easing type of the animation effect), Re-position animation speed (100-1000ms or select No Animation to disable animation, and Item scaling animation speed.

When you are on the articles pages, you will see the Previous and Next buttons. Click on those buttons will open the previous or the next page using one of those animation effects: fade, pop, flip, turn, flow, slidefade, slide, slideup, slidedown, none. You can enter one or more effects (comma separated) in the Page transitions field. If there are more than one, they will rotate randomly. Enter "none" for no page transition effect.

Grid column width, Box width unit and Box distance are parameters related to the layout and size of the elements (article boxes). Change these parameters if you want to change default template layout. The setting market as "Width when articles will be in single column" determines minimum width in pixels that will force boxes to be positioned in only one column (for mobile devices).

Infinite Scroller

If you have too many articles on site, loading all at once may confuse your visitors and waste a lot of your bandwidth. Therefore, we integrated this template with Infinite Scroll jQuery plugin. As you know, Joomla creates pagination to separate the category blog pages with many articles to the several pages. This plugin replaces the ordinary pagination links (page 1, 2, 3...). If you have a category with 100 articles and set to display 10 articles per page (in Menu Items parameters), the template will load the first set of 10 articles. When visitor scrolls to the bottom, the next set of 10 articles will be loaded, and so on...

To setup pagination for the Articles Category Blog page, you would need to edit the menu item in Menu Manager. Make sure that Pagination is also enabled in Global Articles Parameters (Content > Article Manager > Options > Shared Options).

Use infinite scroller in template parameters should be enabled. Loading of new articles can be with fade effect. This is controlled in "Animation from bottom" parameter. Text that displayed during loading of posts and when there are no more articles can be changed here as well.

The Width of the Article Boxes

The width of the Joomla article boxes is determined by the width of the intro images. So, you need to make sure you scaled them properly in your graphic editor before uploading.

On the other hand, in K2 articles you can select the width level for each article and K2 component will scale them properly as per parameters. K2 component has 5 sizes for image widths: x-small, small, medium, large and x-large. You can change default values of these image sizes in Components > K2 > Items > Parameters > Images.

You can have text-only articles without intro images. In this case, the width of such articles will be equal to the widths of articles with the smallest images. It's possible to change width of some of the articles and make them occupy more space. To make it happen, you must assign on of those classes to any HTML element inside intro text:

  • .dynlayout_wide1
  • .dynlayout_wide2
  • .dynlayout_wide3
  • .dynlayout_wide4
  • .dynlayout_wide5

In example, you can assign one of the above classes to the text paragraph to make the text-only articles wider.

<p class="dynlayout_wide2">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Different Colors of Article Boxes

You probably mentioned that some of the boxes in Joomla Articles Category view have different color from the others. Default color and hover color for boxes are defined in Template Parameters, under Template Colors > Background Colors. You can also assign a specific colors to the articles of your choice to make them stand out from the others. Article boxes in Hot Responsive template can have one of 5 additional colors (alternative layouts):

  • Black
  • Blue
  • Green
  • Red
  • Yellow

You can assign on of these alternative layouts to any Joomla article (not available in K2) in Edit Article page. After you make this change, you article will have different background color in Category View.

If you would like to edit background colors, hover colors, border colors or text colors of these alternative layouts, you should edit file /templates/hot_responsive/css/layout.css (under "Custom colored articles" comment). Each layout has it's part, in example, the black layout's CSS looks like this: {
  background:#000 !important;
} {
  background:#222222 !important;
} h2, h2 a.ui-link:link, h2 a.ui-link:visited {
  color:#eee !important;

How to Add Images to the Article Boxes

You can upload all images with FTP into the /images folder of your Joomla (or any subfolder inside). Images in all articles in our demo are added through Add New Article (Edit Article) page. In this page, there is "Images and Links" tab in the right column.

To add the intro image for the Category View, click Select button next to Intro Image field. Pop-up dialog will open, and you will see the content of /images folder. You can either select the image by clicking on its thumbnail (if you uploaded it by FTP) or upload it here and then select it. Click Insert when you are done.

The similar approach should be used for Full article images. You can see how they look on our demo, but you are not obligated to use them. You can create article's content differently, if you like.

You probably mentioned that some of the intro images has captions. To add caption text, enter it into the Caption field under the "Images and Links" tab.

Basic Installation (no demo)

  1. Unzip file "" from archive you downloaded after purchase.
  2. In your Joomla admin panel, go Extensions > Extension Manager. See Image 1.
  3. Click <Browse> button and locate file "" on your computer. Click <Upload & Install> button. See Step Image 2.
  4. Once the file has been uploaded on your server, you would get a message as on this image. See Image 3.
  5. Go Extensions > Template Manager, select "hot_response - Default" from the list and click Default icon (star in the right column). See Image 4.
  6. Check site frontend. Now you should see your website with a new template.

After the installation procedure, you won't get your website look as this Demo. Maybe you'd need to change positions of your modules according to this guide and change parameters in some of your menus. We recommend HotStart installation.