Basic Installation (no demo)

Details

Category: Documentation

1. Unzip file "hot_responseXX.zip" 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 "hot_responseXX.zip" 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.

How to Add Images to the Article Boxes

Details

Category: Documentation

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.

Different Colors of Article Boxes

Details

Category: Documentation

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:

 
 
div.black {
 
  background:#000 !important;
 
  border-color:#000;
 
  color:#eee;
 
}
 
 
 
div.black:hover {
 
  background:#222222 !important;
 
  border-color:#000;
 
  color:#eee;
 
}
 
 
 
div.black h2, div.black h2 a.ui-link:link, div.black h2 a.ui-link:visited {
 
  color:#eee !important;
 
}
 
 

The Width of the Article Boxes

Details

Category: Documentation

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.
 
</p>