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!

1. Unzip file "hot_hvacXX_hotstart.zip" from the archive you downloaded after purchase. Unzip this archive to your computer.
2. 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).
3. 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).
4. Select your language and click Next.
5. 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.
6. You can read Joomla License and click Next.
7. 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.
8. 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.
9. 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.
10. 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:

1. list element one
2. list element two
   1. list subelement one
   2. list subelement two
   3. list subelement three
3. list element three
4. 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

Three columns - use DIV container with class .three-cols

Four columns - use DIV container with class .four-cols

Five columns - use DIV container with class .five-cols

Six columns - use DIV container with class .six-cols

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.