Another business template in the Hot Joomla Templates collection. This time the business template is related to the HVAC industry. This is abbreviation for heating, ventilation and air conditioning. Since these technologies are tightly related, the companies usually provide all these services.
This is the summarization of the HVAC template's most important features:
- Responsive template, based on clean CSS/CSS3 code, and powered by Sparky Joomla template framework.
- 5 pre-defined styles with different colors. All colors are easily customizable in Sparky options (infinite color options).
- Customization of the template's layout and adding/removing module positions is easy. It's powered by Sparky's drag and drop Layout Editor. Change layout and element's dimensions easily whenever you need.
- Hot Swipe Carousel, Hot Maps, Hot Slicebox, Hot Responsive Lightbox are included with the template. All commercial modules included in this template are free for you if you buy the template (you save $15 per module). All extensions are pre-installed and configured.
- All demo content can be edited visually, using only the core Joomla! editor. Therefore, the compatibility with all future Joomla! versions is guaranteed!
- HotStart (quick start installation) is available with both single purchase or membership plan. It copies template with all extensions and demo pages easily.
- 22 module positions are used in our demo. An unlimited number of module positions can be added easily within the Layout Editor of the Sparky Framework if needed.
- A selection of 800+ Google Fonts is available through the template options panel. The latest version of the Font Awesome icons collection is included.
- PSD source file and fonts are available.
- The top menu system with the presentation of the menu items in multiple levels in the drop-down panes.
- Tested with IE10+, Firefox, Chrome, Safari, Opera. Tested on iOS and Android mobile devices.
- Support for RTL (right-to-left) languages.
Edit Content Visually
All demo content (articles and custom modules) can be edited visually using only the core Joomla! editor. You can see the exact results of all edits that you are making in real time.
Add images and other elements, change text, and select all text styles listed in the Typography page visually in the editor. It's possible to edit content from the backend and front-end.
Drop-down Menu
This template has a fast-loading jQuery based top menu with nested sub-menus. Sub-menu opens on mouse over action. Various menu options are available for all the menus that you create in Joomla. You can change colors, fonts, sizes, and menu other parameters for each menu.
Sparky Framework supports several menu options, such as the drop-down menu, off-canvas menu (like the top menu in this template), accordion menu, horizontal menu, and classic Joomla menu. Each menu type has its own specific parameters and options.
Infinite Color Schemes
Unlimited color options! Select colors and make your template unique! This is useful if you want to match the main template color with your company logo or brand. All our templates come with several pre-defined color schemes.
To get to the parameters in your Joomla Admin go to Extensions > Template Manager and click on the template name. Beside many other parameters, here you can select colors. The template colors can be selected using a handy palette tool or entered manually in hexadecimal format (a 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 a few options in template parameters and... Boom! You got a template with a completely new experience!
Newer versions of Joomla (after 1.6) have a nice new feature in the template manager. It's possible to save multiple template styles! If you are using a template that has many parameters (like our templates), and you wish to use different template settings for Page A and Page B, it's now possible. Please read Joomla template styles from our Blog to learn more about this.
No Conflicts
jQuery is a powerful javascript library. Almost all of our extensions are based on that library (Top Menu, Hot Image Slider, Hot Newsflash, Hot Joomla Gallery, Hot Joomla Carousel, Lightbox, Font resizer, and many more...). However, many Joomla extensions from other providers use other libraries (mooTools or prototype).
Using them together on a page will probably make conflicts. As a result, some or all of your extensions would not work.
However, we have found a solution. Our Joomla extensions use "jQuery noConflict mode". Therefore, with our templates, beside our extensions, you can also use other extensions from other providers based on other libraries.
SEO Friendly
You don't need a nice website if Google can't index it and position it higher in search results.
All Hot Joomla Templates are well optimized for search engines. The template code is valid and passes W3C Markup Validation.
Unlike older versions, newer Joomla versions are well optimized for SEO out of the box. Joomla now use H1 and H2 tags for headings, allow you to enter descriptions for each page, make SEF links better and has many other advantages for the semantic HTML code and better SEO. Joomla! with our templates is the best combination for your better ranking!
This template has support for 22 module positions.
All module positions are collapsible. If no modules are published on some module positions, those module positions will automatically collapse.
Sparky Framework allows you to add more module positions (if you need them) easily with user-friendly drag and drop technology. To check this, open template parameters and go to the Layout Designer tab.
Adding new module positions and changing existing module positions is easy using the Sparky's Layout Editor.
The image you can see on the left side represents a "map" of all default module positions of the template.
Once you finish this installation method, you should get exactly the same copy of this Demo site on your server. Let's start!
- Unzip file "hot_hvacXX_hotstart.zip" from the archive you downloaded after purchase. Unzip this archive to your computer.
- Using FTP software (such as FileZilla) upload all files and folders to your hosting space. Make sure that folder, where you uploaded files, is writable by server (chmod 755).
- In browser, open address http://www.your_site_address.com/joomla/index.php (change "your_site_address.com" with your site address, change "joomla" with folder name where you uploaded files, if you uploaded files to the root folder, you don't need this).
- Select your language and click Next.
- The installer will check your server to find out if it's compatible with Joomla. If you see any parts marked red, please contact your hosting provider to resolve the problem. If all items are green, you can click Next.
- You can read Joomla License and click Next.
- You should enter MySQL database connection parameters now. Please enter Host Name (usually "localhost"), username, password, and database name and click Next. If you get an error message, please check database parameters. If you don't know correct parameters, please contact your hosting provider.
- On FTP Configuration page, you can enter parameters of your FTP server. This is not necessary and can be entered later if needed. So, just click Next.
- On Main Configuration screen you should enter Site Name, e-mail address, administrator's username and password (twice). Click Install Sample Data button. (Otherwise, demo content won't be imported). Once you get "Sample data installed successfully" message, you may click Next.
- As the Finish screen says, please remove "installation" folder from your server (use FTP software).
Typography
Take care about your typography to make better user experience for your readers. How to achieve that?
- Learn more about typography, escpecially about the most often used codes, such as <p>, <h1>, <h2>, <h3>, <img> and <a>.
- This template has valid XHTML, but if you want to keep it like that, you must learn and follow the XHTML principles. Also, if some of your extensions are not XHTML valid, pages based on this component would not be XHTML valid as well (no matter if template itself is valid).
- Familiarize yourself with CSS styles that comes with this template.
- Never copy/paste directly from layout text editors, such as Microsoft Word or OpenOffice. Try to paste text in plain editors first (such as Notepad).
- Use a WYSIWYG editor that comes with Joomla or install a better editor, but always check your code in the editor's HTML mode.
Heading 2
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.
Heading 3
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.
Heading 4
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.
Quote/Citation
My mother said to me, "If you are a soldier, you will become a general. If you are a monk, you will become the Pope." Instead, I was a painter, and became Picasso... To have a quote styled like that, apply "quote" style, like in this sample code: <p class="quote"> ...your text here... </p>
Paragraph with Big First Letter
This is a dropcap style applied to a paragraph of text. To use it, apply class of dropcap to your paragraph of text, in example: <p class="dropcap">...some text goes here...</p>. To edit this style, find class .dropcap in CSS stylesheet file template_css.css.
Notice Styles with Background Color
This is a warning message you may use in your text. Simply add appropriate class to your paragraphs to achieve this effect.
Here's a sample code: <p class="warning">...your text here...</p>. The rest of text is just filler. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat.
This is an information message you may use in your text. Simply add appropriate class to your paragraphs to achieve this effect.
Here's a sample code: <p class="info">...your text here...</p>. The rest of text is just filler. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat.
This is an error message you may use in your text. Simply add appropriate class to your paragraphs to achieve this effect.
Here's a sample code: <p class="error">...your text here...</p>. The rest of text is just filler. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat.
Notice Styles with Outline
This is a warning message you may use in your text. Simply add appropriate class to your paragraphs to achieve this effect.
Here's a sample code: <p class="warning outline">...your text here...</p>. The rest of text is just filler. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat.
This is an information message you may use in your text. Simply add appropriate class to your paragraphs to achieve this effect.
Here's a sample code: <p class="info outline">...your text here...</p>. The rest of text is just filler. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat.
This is an error message you may use in your text. Simply add appropriate class to your paragraphs to achieve this effect.
Here's a sample code: <p class="error outline">...your text here...</p>. The rest of text is just filler. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat.
Blockquote
This is an information message you may use in your text. Simply add appropriate class to your paragraphs to achieve this effect. To use this style, wrap your text in blockquote element, like this <blockquote> your content here </blockquote>. The rest of text is just filler. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Typewriter Style
This is typewriter style you may use in your text. Simply add appropriate class to your paragraphs to achieve this effect. Here's a sample code: <p class="typewriter">...your text here...</p>. This style uses a font with constant width of characters.
1This is a paragraph of text marked with a big number or letter. To make such paragraph of text, you should enter number before the rest of the text in the paragraph, and wrap it in span with a class of p_number, like this: <p><span class="p_number">1</span>...your text here...</p>
2This is a paragraph of text marked with a big number or letter. To make such paragraph of text, you should enter number before the rest of the text in the paragraph, and wrap it in span with a class of p_number, like this: <p><span class="p_number">2</span>...your text here...</p>
AThis is a paragraph of text marked with a big number or letter. To make such paragraph of text, you should enter number before the rest of the text in the paragraph, and wrap it in span with a class of p_number, like this: <p><span class="p_number">A</span>...your text here...</p>
BThis is a paragraph of text marked with a big number or letter. To make such paragraph of text, you should enter number before the rest of the text in the paragraph, and wrap it in span with a class of p_number, like this: <p><span class="p_number">B</span>...your text here...</p>
Code Style
To achieve this style, wrap your content in <code> tag.
#some_style {
float: left;
display: block;
}
Unordered list sample:
- list element one
- list element two
- list subelement one
- list subelement two
- list subelement three
- list element three
- list element four
Ordered list sample:
- list element one
- list element two
- list subelement one
- list subelement two
- list subelement three
- list element three
- list element four
Arrow list sample:
- to achieve this effect
- add class "arrow" to UL
- like <ul class="arrow">
Arrow (left) list:
- to achieve this effect
- add class "arrowleft" to UL
- like <ul class="arrowleft">
Calendar list sample:
- to achieve this effect
- add class "calendar" to UL
- like <ul class="calendar">
Check list sample:
- to achieve this effect
- add class "checklist" to UL
- like <ul class="checklist">
Delete list sample:
- to achieve this effect
- add class "delete" to UL
- like <ul class="delete">
Email list sample:
- to achieve this effect
- add class "email" to UL
- like <ul class="email">
File list sample:
- to achieve this effect
- add class "file" to UL
- like <ul class="file">
Folder list sample:
- to achieve this effect
- add class "folder" to UL
- like <ul class="folder">
Hearts list sample:
- to achieve this effect
- add class "heart" to UL
- like <ul class="heart">
Information list sample:
- to achieve this effect
- add class "information"
- <ul class="information">
Lock list sample:
- to achieve this effect
- add class "lock" to UL
- like <ul class="lock">
Pencil list sample:
- to achieve this effect
- add class "pencil" to UL
- like <ul class="pencil">
Persons list sample:
- to achieve this effect
- add class "person" to UL
- like <ul class="person">
RSS list sample:
- to achieve this effect
- add class "rss" to UL
- like <ul class="rss">
Shopping basket:
- to achieve this effect
- add class "shop" to UL
- like <ul class="shop">
Songs list sample:
- to achieve this effect
- add class "song" to UL
- like <ul class="song">
Star list sample:
- to achieve this effect
- add class "star" to UL
- like <ul class="star">
Trash list sample:
- to achieve this effect
- add class "trash" to UL
- like <ul class="tweak">
Tweaks list sample:
- to achieve this effect
- add class "tweak" to UL
- like <ul class="tweak">
Unlock list sample:
- to achieve this effect
- add class "unlock" to UL
- like <ul class="unlock">
Warning list sample:
- to achieve this effect
- add class "warn" to UL
- like <ul class="warn">
Inset Styles:
Block TitleDuis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisi.To make such block of text, wrap it into a span with a class of inset-left. Optionally, inside this span you can add another span with class of inset_title for title. Here's an example: <span class="inset_left"><span class="inset_title">Title</span>...your text goes here...</span>. In a similar way, you can align the block of text to the right. Use inset_right, instead of inset_left. Block TitleDuis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisi. If you need to change width or something else in those blocks, you can edit classes .inset_left and .inset_right in CSS stylesheet template_css.css.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisi. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisi.
CSS3 Columns:
Two columns - use DIV container with class .two-cols
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 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.
Three columns - use DIV container with class .three-cols
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 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.
Four columns - use DIV container with class .four-cols
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 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.
Five columns - use DIV container with class .five-cols
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 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.
Six columns - use DIV container with class .six-cols
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 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.
Font Awesome 5 Icon Set Included
Font Awesome is icon font set that counts over 500 vector icons. The icons are scalable and looks great in all sizes. Also, icon fonts are better for site speed than ordinary image icons because only one file is loaded. You can include these icons in your articles or modules easily by adding this HTML:
<i class="CLASS_NAME"></i> content here...
Just change CLASS_NAME with name of any icon. You can find all icons on the Font Awesome website.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Pellentesque sollicitudin nisl vel massa lacinia at dictum quam accumsan. Donec id velit urna. Praesent gravida lacus in ante hendrerit eget vehicula metus rhoncus.