Reflection Effect

We integrated reflection script with this template. So, you can add reflection to your images without editing them in Photoshop.

Beside that, you have full control over the reflection height and opacity.

How to add reflection effect to the picture

Add class="reflect" to any image you'd like to have reflection effect, and you are done!

To control the effect's height, use class="reflect rheight25". In this case, height of the reflection will be 25% of the image height. You can also, control opacity of the reflection. Use class="reflect ropacity60" and opacity will be set to 60%. You can also combine height and opacity, in example class="reflect rheight25 ropacity60".

<img class="reflect ropacity60 rheight25" src="images/stories/demo/reflection.jpg" alt="reflection effect">

SEO Friendly

You don't need a nice website if Google can't index it and position it higher in search results.

Even SEO beginners know that H1 and H2 tags are important and that Google spiders look for them when indexing your page. Joomla itself doesn't put headings in H1 and H2. With this template, it does!

This feature is automatically enabled in the template. You can check HTML code of the demo home page. You will see that big heading is in <H1> tag, while sub-heading is in <H2> tag. Without this template, these headings are in default componentheading and contentheading Joomla classes. Important note is that Joomla core files are NOT hacked, so you won't have any problems with upgrading, when new version of Joomla is available.

Hot Menu

This template has a fast-loading jQuery based top menu with nested sub-menus. Sub-menu opens with a nice animation effect. Core Joomla files are not hacked. Module position User3 is reserved for the top menu. Please type "nav" in Menu Tag ID. Menu type should be set to "list".

If you like classic vertical drop-down menu, instead of horizontal, please type "nav2" in Menu Tag ID.

The vertical menu placed to the left side column here is a classic static Joomla menu with support for sub-menu items. You don't have to change default menu parameters for this menu. Menu type should be set to "list". You don't need to type anything in Menu Tag ID, Menu Class Suffix or Module Class Suffix fields.

This information is not important if you are installing template using our HOT Start package. In this case, all parameters are set.

The top menu acts as a horizontal menu with submenu displayed below it, also in horizontal layout. Only one sublevel is allowed.

Typography

This page represents typographical aspects of the "Skies" template. 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.

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 "quote" class with paragraph of text, like in this sample code: <p class="quote">...your text here...</p>

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.

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 code 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="code">...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.

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

Check list sample:

• to achieve this effect
• add class "checklist" to your unordered list
• like <ul class="checklist">

Arrow list sample:

• to achieve this effect
• add class "arrow" to your unordered list
• like <ul class="arrow">

Star list sample:

• to achieve this effect
• add class "star" to your unordered list
• like <ul class="star">

HOT Joomla Carousel Pro

We are selling this module for $9.95. However, you will get it FREE with this template purchase.

Need to display your images or articles in a carousel? Easily done with our new Joomla extension.

HOT Joomla Carousel Pro is Joomla module that will help you to show your articles and photos in a carousel style. You can see how it works on this demo site. Usage is very simple. You need to enter path to your images or source IDs of your content pages, sections or categories, and your carousel is ready.

USAGE INSTRUCTIONS

Open module parameters in Extensions > Module Manager > HOT Joomla Carousel Pro. You'll see that some default parameters are already there. However, you should change some of them to accomodate module for usage on your site.

Please mouse over any parameter to see its description and sample usage in pop-up window. The following (looong) image shows all available parameters of this module.