Контакты

Телефон для связи:

... + 7 701 710 89 28

Hot Flashes Menu System

Подробности: Автор: Super User

On this page we are going to elaborate how this menu system works, what you can do with it, how to do it, and what you can't do with it. For your reference, until you read this text, please look at the home page of the Hot Flashes template. We are assuming you have fair knowledge of basic Joomla menu management. If you don't please learn more about it.

If you install template using HotStart method, all options that you see on our demo will be set automatically!

Menu module parameters

To activate the Flashes menu, you should edit parameters of your menu module in Extensions > Module Manager. Click on your menu module and enter "flashes" (without quotes) for Menu Tag ID parameter. Module should be published in position 'user3'.

Maximum 3 levels

As usually in Joomla, you create your menu items in menu manager. In this case you can have up to 3 levels of menu items. Please don't make fourth or deeper menu levels.

flashes menu screen

The first level

The first level is always visible. You can have as much menu items in the first menu as you need. The menu images will be divided in 3 parts if you have 3 first level menu items, or in 5 parts if you have 5 first level menu items, and so on. More first level menu items will bring more divisions of the menu images and more complex animation. When the mouse pointer is over any first level menu item, it will show the second menu items (if available).

You must prepare images for your first level menu items in the resolution that you need. On our demo, the images are 960 x 542 px. All images must have the same resolution and must be in format jpg, jpeg, gif or png. The number of the images must be equal as the number of the first level menu items.

The images must be named as bg1.jpg, bg2.jpg, bg3.jpg, and so on. Extension .jpg can also be .jpeg, .gif or .png, depending of the image format.

The images must be uploaded to the folder <your joomla root>/templates/hot_flashes/images/menu.

Position, height, font size and colors of the first level is determined in the template parameters (see below).

The second level

The second level is visible when mouse pointer is over any first level menu item (if this menu item has child menu items). As you can see, the second level has background colors. Actually, those background colors are from transparent png background images. Those background images should be named as sub1.png, sub2.png, sub3.png, and so on. They can also be in format jpg, jpeg or gif. They must be uploaded to the folder <your joomla root>/templates/hot_flashes/images/menu. The number of the second level background image must be equal as the number of the first level menu items. Therefore, the background image can be different as on our example. If you need them to be identical, you can multiply one image. Width of the background images must be 700px. Height of the background images is not important as they are repeated vertically.

Height, font size and colors of the second level is determined in the template parameters (see below).

The third level

The third level is visible when mouse pointer is over any second level menu item (if this menu item has child menu items). The third level menu items are shown in a balloon that lists all available menu items. The balloon disappears when mouse pointer is moved out.

Flashes menu options in template parameters

flashes menu params The first 2 options are used to set width and height of the menu. In our example, menu width is the same as template width (960). Make sure that you images for the first level menu items are in the same resolution as width and height of the menu set in template parameters.

Root items top offset is distance of the first level menu from the top. Root items height is the height of the first level menu.

In the next 4 fields you can select text colors and background colors from the color picker.

The last parameter for the first level menu determines the font size. Font family is defined and taken from the template's CSS file.

The last 4 fields define second/third level's height, text color and font size.

Flashes menu in the Interior Pages

In the template parameters you have 2 Flashes Menu height parameters, one for home page and another for interior pages. Like on our demo, the menu height on the interior pages can be reduced. In this case, you would see only a bottom part of the menu in the interior pages. In example, if full height of the menu (on home page) is 500 and you enter 200 for the interior pages, the top part of the menu will be cut off. In this case, the height that will be cut off is 500-200=300 pixels.

Hot Flashes, nice effects without Flash

Подробности: Автор: John Doe

The idea was to combine Joomla menu with images slideshow in order to make a flash-like website. As Joomla and Adobe Flash are not from the same countyard, the solution is based on jQuery. On more big advantage of using jQuery is that you don't have to worry about compatibility of your site with popular Apple mobile devices (iPhones and iPads). If your desire was to have a flash-like animated site, but to keep compatibility with Apple devices, Hot Flashes template is for you!

You can read detailed info about the template's menu system. We are listing the template's most important features here:

Подробнее...

Typography

Подробности: Автор: Super User

This page represents typographical aspects of this 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

Heading Three

Heading Four

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:

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

Our Templates Don't Make Conflicts

Подробности: Автор: Super User

jquery noConflict jQuery is a powerful JavaScript library. Almost all 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 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 JavaScript libraries.

Unlimited Color Schemes

Подробности: Автор: Super User

Unlimited color options! Select your own colors. This is useful if you want to match main template color with your company logo.

Several pre-defined styles available.

To get to the parameters in your Joomla Admin go to: Extensions > Template Manager and select HOT Flashes. There you can select colors and background images. The template colors can be selected from 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!

Еще статьи...

Social Networks

Меню