image image image image image image
Ultimate Style Control Zephyr, the August 2010 Template Club release, features an impressive assortment of stylistic tools, ranging from its completely transparent base, to an extensive array of Color Chooser controls.

Read the Full Story
Fusion with MegaMenu Fusion has been expanded with MegaMenu features, ranging from the ability to group Child items inline, to being able to load modules / positions within the dropdowns, as well as extensive custom width controls.

Read the Full Story
72 Module Suffix Combos Module Variations form the core of the stylistic individualism of Zephyr, with 18 style based suffixes: 12 Box and 6 Title Styles. These suffixes can be compounded together to an impressive 72 possible combinations.

Read the Full Story
Custom RokStories Styling The default layout of RokStories benefits from a new custom styling from the template, adding a vertical scrolling thumbnail list to the side of the main thumbnail image, providing a new possibility in displaying dynamic content.

Read the Full Story
Smart / Ajax Loading Gantry offers a series of performance boosting features, 2 of these are Image Smart Loading: only loading images within the browser window; and Ajax Loading: view new articles via Ajax versus a full browser reload.

Read the Full Story
iPhone Compatible Zephyr supports mobile viewing on the iPhone, offering an intuitive mobile browsing experience, complete with an interactive Fusion Menu and extensive configuration options within the Gantry Framework.

Read the Full Story

Fusion with MegaMenu

image

Transparent Design Base

image

Advanced Color Chooser

image

72 Module Suffix Combos

image

68 Module Positions

image

Template RTL Support

image

Tableless Overrides

image

Google Web Fonts

image
Tuesday, July 23, 2019

Fusion with MegaMenu

In Zephyr, Fusion Menu has been extended with the following features:

  • Triple / Quad Column Mode
  • Child Items Menu Grouping
  • Column Width Control
  • Load Modules / Positions in Items

Transparency lays at the heart of the Zephyr template, with the entire theme being developed around it. Every structural image is transparent to allow background colors to bleed through seamlessly.

In unison is the Color Chooser, providing extension controls, in a user friendly interface, over all style in the template, ranging from background, text or link colors to the overlay styles.

Fusion Menu is a menu theme of the RokNavMenu extension, the addon that drives all RocketTheme template menus. It is primarily a javascript enhanced CSS dropdown menu, that combines standard suckerfish type functionality with animations, transitions and other advanced effects provided by Mootools.

NOTE: The latest version of RokNavMenu is required, in order for Fusion to operate.

New Features

In Zephyr, Fusion Menu has been extended with the following features:

  • Triple / Quad Column Mode
  • Column Menu Grouping
  • Column Width Control
  • Load Modules inside Dropdowns
  • Load Module Positions inside Dropdowns

Recurring Features

Below is a list of the standard, recurring features of the Fusion Menu:

  • Single Column Mode
  • Dual Column Mode
  • Menu Item Subtext
  • Menu Item Icons
  • Javascript Controls

Editing Menu Items

All Menu Items can be edited from Admin → Menu → Menu NameMenu Item.

Image

Basic Fusion Parameters

Adding Subtext

Subtext Line is the option that allows you to insert additional text to the Menu Item Title. There is separate styling for this, making it useful for adding brief descriptions to menu items.

Image Image

Adding Menu Icons

Menu Image is the option that allows you to insert an inline icon / image to the Menu Item.

Image Image

Advanced Fusion Parameters: Columns

Menu Columns

Columns of Child Items allows you to determine how many columns the Fusion dropdowns are presented in. You can have anywhere between a single dropdown to a four column dropdown.

Image Image

Item Distribution

Item Distribution allows you to control how the menu items are ordered in the dropdowns:

  • Evenly: If there are 7 menu items in 3 columns, Fusion will allocate a 3,2,2 distribution - trying to equalize each dropdown.
  • Order: If there are 7 menu items in 3 columns, Fusion will allocate a 3,3,1 distribution - maintaining the item ordering.

Image Image

NOTE: If your Columns of Child Items setting is configured to be 2 or more columns, you will need to manually set the column widths and distribution, as outlined below. The default is 180px which is too small for multiple columns.

Drop-Down Width (px)

Drop-Down Width (px) determines the total width of the dropdown, regardless of how many columns are shown. This option is to be used in conjunction with Column Widths (px)

Image Image

Column Widths (px)

Column Widths (px) determines the width of each Column. Separate each width by a comma. The final column's width is determined automatically. This option is to be used in conjunction with Drop-Down Width (px)

Below are some example configurations:

  • Drop-Down Width: 480px: 160,160. Fusion automatically calculates the final width as 160, so in practise, 160,160,160 is the actual distribution.
  • Drop-Down Width: 600px: 160,160. Fusion automatically calculates the final width as 280, so in practise, 160,160,280 is the actual distribution.

Image Image

Advanced Fusion Parameters: Groupings

What is Grouping?

Group Child Items changes the behaviour of child items in the dropdown menus, instead of creating a dropdown for the immediate sublevel, this option places them inline. See below for an illustrated example of the differences:

Image Image

Configuration

NOTE: Grouping cannot be applied to root items, only child items.

Set Group Child Items to Yes to activate the mode. The sublevels well then appear below the parent menu item in a categorical type structure.

Image Image

Below is a diagram of how the menu groupings in Joomla translate into the Fusion Menu:

Image

Advanced Fusion Parameters: Modules

Fusion is now capable of loading individual modules or entire module positions inside its dropdowns.

Loading Individual Modules

Set Child Item Type to Modules to load all modules setup on your Joomla site in a list. Select the module you wish to display in the dropdown.

Image Image

Loading Module Positions

Set Child Item Type to Modules Positions to load all module positions on your Joomla site in a list. Select the position you wish to display in the dropdown.

Image Image

Below is an example of multiple modules appearing in a dropdown:

Image Image

Template Configuration: Fusion Menu

Go to Extensions → Template Manager → rt_zephyr_j15 → Menu Set Menu Control to Type : Fusion-Menu, to load all the Fusion parameters.

Image

image
image
image
image

Compatibility styling constitutes basic CSS alterations to better integrate the extensions with the template, rather than full theme integration. Example extensions: K2, Tienda, JComments, Virtuemart and JomSocial.

Note: All the extensions below and their peripheries will not be included in the RocketLauncher package. You will need to download and install separately.

Control Third Party Styling

Enabled or Disable from Admin → Extensions → Template Manager → rt_zephyr_j15 → Advanced → Third Party Styling. Disable if you are not using any of the extensions for performance purposes.

All styling is located in the /templates/rt_zephyr_j15/css/extended.css file, so any customizations you wish to make, edit the contents of that CSS file.

Color Chooser is a Gantry-Admin based control interface which, through simple controls, allows you to change all color and style elements of the template, such as text and background color.

Access the Color Chooser

Access the Color Chooser from Admin → Extensions → Template Manager → rt_zephyr_j15 → Settings

Image

Configuration

You can control 7 sections of the template, in 4 different aspects:

Color Chooser Sections

  • Body - Background Area
  • Main - Mainbody / Content Area
  • Navigation - Menu Area
  • Header; Showcase; Feature; Utility; Bottom; Footer - Module Position Rows

Section Controls

  • Background Color
  • Overlay Type - Light or Dark
  • Text Color
  • Link Color

Image

Configuration: Background Controls

  • Static CSS: Places all inline CSS into CSS files for increased performance
  • Body Level: High or Low to reduce the detailing of the template such as no overlays
  • Background Image: Select an image to display in the page backgorund

Image

MooRainbow & Transparent Mode

Click on the color icons to trigger the MooRainbow popup. Pick any color or transparent.

Image Image

Gantry Settings → General Style Controls

Theses settings are not directly affiliated with the Color Chooser portion, but affect the template styling nevertheless.

Image

  • Read More Style: Button or Link
  • Article Style: Default, Title1-6
  • Article Overlay: Light or Dark
  • Article Info Style: Layout1-3
  • Fixed Footer: On - Off
  • Web Fonts: On - Off; Google Font Directory
  • Font Settings:
    • Font Family: Enigmatic, Geneva, Optima, Helvetica, Trebuchet, Lucida, Georgia, Palatino, or Various Google Fonts (dropdown)
    • Font Size: Default, Extra Large, Large, Small, Extra Small (dropdown)

Learn more

image

New Releases

Recent Reviews

  • Halo Reach Halo Reach
    FPS - Expansion of the popular Halo Universe...
  • FIFA '11 FIFA '11
    Play on until the final whistle with the '11 edition...
  • Madden 11 Madden 11
    Prepare for a new season with Madden 11...
  • Mafia II Mafia II
    Mafia 2 immerses players in the mob underworld...
  • 1
  • 2
  • 3
  • 4
  • 5
image

Template/Gantry RTL Support

Zephyr has full RTL support, ranging from stylistic elements such as typography, to the Gantry Framework itself.

Preview RTL
image

72 Module Suffix Combos

Combine the 12 Box suffixes with the 6 Title suffixes to create a series of up to 72 different stylistic module variations.

Read More

Contact Info

  • Zephyr Developers Inc.
  • 9090 Cascade Boulevard,
  • Miami, Florida, 23490, USA
  • Tel: (555) 555-55555

Demo Information

  • All sample content is for demo purposes only, intended to exemplify a live site. All images and materials are the copyright of their respective owners.
  • Additionally, this demo, in a modified form for distribution purposes, is available for download in the RocketLauncher format.

This is the Popup Module feature. Assign any module to the popup module position, and ensure that the Popup Feature is enabled in the Gantry Administrator.

You can configure its height and width from the Gantry Administrator.

More Information