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_chruchlyXX_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 or 777).
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 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 and 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).
11. Congratulations, you are done! Click Site button to see your site's frontend, or Admin to see site's backend (login required with username and password that you selected during installation).

After you accomplish this method of template installation, your site won't look as our demo. You will probably need a lot of customizations after installation, therefore we strongly recommend you to use HotStart installation method.

1. Unzip file "hot_chruchlyXX.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_chruchlyXX.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_chruchly - 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 Module Positions guide and change parameters in some of your menus. We strongly recommend the HotStart installation.

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

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 Two

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 Three

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 Four

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.

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, use "blockquote" element, like in this sample code: <blockquote><p>...your text here...</p></blockquote>

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:

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.

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.

Paragraphs Marked with a Number/Letter:

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>

Unordered and Ordered Lists

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.

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 semantic HTML code and better SEO. Joomla and our templates are the best combination for your better ranking!

jQuery is 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, more are coming...). 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.

This template has support for 14 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.

The image that you can see on the right side represents a "map" of all default module positions of Hot Church.ly template.

Adding new positions and changing existing is easy with Sparky's Layout Editor

Menu System

This template has a fast-loading jQuery based top menu with nested sub-menus. Sub-menu opens on mouse over action. Core Joomla files are not hacked. Various menu options are available for all 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 drop-down 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.

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 (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 few options in template parameters and... Boom! You got template with completely new experience!

Newer versions of Joomla (after 1.6) have a nice new feature in 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.

Joomla template suitable for religious communities

Hot Church.ly is responsive Joomla church template powered by Sparky Framework and equipped with several modules which enhance its functionalities. We designed and developed this template in good faith. We believe you will find it useful for your religious website. Last but not least, after changing our demo images, you will notice this design could be used for any other purpose, not just for church websites.

There are several facts about Hot Church.ly template:

• Responsive template, 100% tableless and valid XHTML/CSS code. Based on Sparky Framework.
• Five pre-defined styles with different background and font colors. All colors are easily customizable in Sparky options (infinite color options).
• Customizable layout powered by Sparky's drag'n'drop Layout Editor. Change layout and element's dimensions easily.
• Hot Full Carousel, Hot Film Tape, Hot Maps, Hot Carousel, Hot Gallery and Hot Newsflash modules are included with template, pre-installed and configured. Full support for K2 component is included. All commercial modules included in this template are free for you, if you buy template (you save $15 per module).
• HotStart (SQL dump) available with both single purchase or membership plan. It copies template with all extensions and demo pages easily.
• 14 used module positions in our demo. Unlimited number of module positions can be added easily within Sparky Framework, if needed.
• SEO friendly template code.
• PSD source file and fonts are available.
• Top menu system shows the first and the second level horizontally. The deeper levels are shown in drop-down panes.
• Compatible with IE7+, Firefox, Chrome, Safari, Opera.
• Support for RTL (right-to-left) languages.