Demo Articles

Demo Articles (16)

Sunday, 30 October 2011 00:08

RokNewsFlash Module (J1.5/1.7)

Written by
RokTabs

RokNewsFlash is module to display snippets of an article. It can cycle through article titles or a predefined number of characters of an article, which are cycled automatically. The module supports navigation controls to override the automatic transitioning.

Details Download Support

Module Configuration

Options available at Admin → Extensions → Module Manager → RokNewsFlash Module:

  • Load built-in StyleSheet: Disable if you wish to override the standalone style by custom template styling.
  • Theme Style: Light and Dark standalone themes.
  • Module Class Suffix: Add a custom class for individual styling
  • Content Type: Joomla Core Content or K2 Content (Requires K2 to be installed).
  • Joomla Section: Section to load tabbed content from.
  • Joomla Category: Category to load tabbed content from.
  • Joomla Frontpage Items: Determine whether frontpage content is loaded.
  • Max Number of Articles: Control the maximum number of articles.
  • Item Ordering: Control tab ordering — Default, Oldest First, Most Recent First, Title Alphabetical, Title Reverse-Alphabetical & Order.
  • Use Title or Intro Text: Controls what is used for the snippet, either the title of the article or an extract of the intro text.
  • PreText Label: This is the text which appears before the transitioning articles, such as Newsflash:.
  • Show Controls: Control the display of the navigational controls.
  • Transition Duration: This is the time, in milliseconds, for the switching of content items.
  • Delay Length: This is the time, in milliseconds, for the content to remain static.
  • News Indent: Input the number of pixels for the text to be indented (typically 5px more than the size of the pretext label).
  • Preview Length: Input a numerical value which equates to how many characters you wish for the module to show.
Sunday, 30 October 2011 00:08

RokAjaxSearch Module (J1.5/1.7)

Written by
RokTabs

RokAjaxSearch is a Joomla search module, utilising AJAX, to provide a combined search solution for both internal searches, and for external searches with Google: Web, Images, Blog and Videos.

Details Download Support

Module Configuration

Options available at Admin → Extensions → Module Manager → RokAjaxSearch Module:

  • Search page URL: Insert the relative path to your search page such as index.php?option=com_search&view=search&tmpl=component
  • Advanced Search page URL: Insert the relative path to your advanced search page such as index.php?option=com_search&view=search&tmpl=component
  • Include RokAjaxSearch default CSS: The module has inbuilt module styling so set this to Yes if you wish for it to work standalone. As we override this file from the template, you still need to set this to Yes for the styling to work.
  • Theme Style: Only applicable if using a non-formatted template, but you can select between a Blue, Light or Dark theme for the search module.
  • Searchphrase: Control the format of the search functions. Choose between Any Words, All Words or Exact Phrase to control your search strings.
  • Order: Set the order of the search results. For example, if you set to Oldest First then the oldest item will be loaded in the search result. There are a variety of options to chose from.
  • Limit: Set the limit for the number of search results per page, whether: 3, 5, 10, 15, 20, 25, 30 or 50
  • Results per page: Set the limit for the number of search result pages, whether: 3, 5, 10, 15, 20, 25, 30 or 50
  • Google Web Search: When enabled, an option will appear in the module to search Google Web Search. The API key needs to be correctly completed for this to work.
  • Google Blog Search: When enabled, an option will appear in the module to search Google Blog Search. The API key needs to be correctly completed for this to work.
  • Google Images Search: When enabled, an option will appear in the module to search Google Images Search. The API key needs to be correctly completed for this to work.
  • Google Videos Search: When enabled, an option will appear in the module to search Google Videos Search. The API key needs to be correctly completed for this to work.
  • Google AJAX Search API Key: This field needs to be completed in order for the various Google search options to work. Please see http://code.google.com/apis/ajaxsearch/signup.html to retrieve an API Key.
  • Show Pagination: Set to Yes to show pagination for search results.
  • Google SafeSearch: Choose between the different Google preferences, either Strict, Moderate or Off.
  • Image Size to Search: Select the image search size preference for Google Search, either Small, Medium, Large or Extra Large.
  • Show Estimated: Show the estimated result for Google searches.
  • Hide div ID(s): This option allows you to set which elements of your site you wish to be excluded from searching. Enter the ID names separated by a comma such as logo-module, side-column, maincontent
  • Link to all results: Set to yes to show a link to all search results.
  • Show Description: Set to yes to show a description with each search result.
  • Include (Category/Section): Control whether to show the content category or section in the result.
  • Show Read More Link: Set whether the Read More link should be display.
Saturday, 29 October 2011 22:57

Elegant Design and Flexible Features

Written by

RocketTheme

The Enigma template is built for both the Joomla 1.5.x and 1.7.x platforms, with full support for both. This includes the template, the RocketTheme Extensions demoed, the Gantry Framework, version specific PDF tutorials, in addition to RocketLaunchers for both versions. All products are available from a consolidated Joomla Download area for Enigma.

The template is based on the Gantry Framework, therefore, standard features such as the 960 Grid System, iPhone/Android viewing support. Layered on top is an intricate array of design elements, textures, patterns and backgrounds providing an elegant but complex appearance.

Wednesday, 19 October 2011 15:24

RokGallery Extension (J1.5/1.7)

Written by
RokGallery

RokGallery is a ground-up revolutionary gallery extension, developed to be hugely flexible, customizable and thus extendable far into the future.

Description

The system itself is built on a custom tag-based architecture with the ability to have multiple tag-based galleries. RokGallery uses design and concepts that have been traditionally reserved for platform-native applications and are for the first time making their way into a web environment. For example, you will not have to resize images, or make thumbs before using them in RokGallery, just upload the raw image and use the RokGallery slice editor to resize and crop the images. This non-destructive editing method allows you to create and edit your image size, cropped view, etc, at any point without having to reupload or recreate your image in external photo editing software.

Other features include an all-new multi-file image upload mechanism that incorporates the latest HTML5 drag-and-drop upload functionality, but can also fall back to Flash if your browser doesn’t yet support this feature. Compound filtering can be used to isolate specific images you are looking for and a sophisticated Jobs Manager handles processes like image resizing in the background so you can get on with your work without having to wait for time-consuming image computations to complete.

Access the RokGallery Component at Admin → Components → RokGallery

RokGallery

This section is an introduction to the general interface of RokGallery, specific instructions on the functions, such as filtering, will be explained below.

#1 Image Controls

  • Publish
  • Unpublish
  • Tag
  • Delete

#2 Gallery Controls

  • Jobs: A log of all previous and current operations, such as imports.
  • Galleries: Create, Delete and Manage all tag galleries.
  • Settings: Configuration the general aspects of RokGallery.
  • Upload: A HTML5/Flash drag and drop image uploader.

#3/4 Filters

The filters have a range of variables such as gallery, file type, published etc... to allow you to sort your images for management in an efficient and simple manner. Statistics for the filters appear at #4.

Photo Upload

RokGallery uses a HTMl5 file uploader, or Flash for unsupported browsers.

  • Go to Admin → Components → RokGallery
  • Click the Upload button
  • Either Drag and Drop the files, or click Browse and find
  • Click Upload
  • Monitor progress
  • Click Close once completed

RokGallery RokGallery

RokGallery RokGallery

RokGallery RokGallery

Gallery View and Jobs

All photos will appear at Admin → Components → RokGallery. RokGallery has support for multiple image selection, either by drag and highlight with the cursor, or via individual selection with the Shift Key and click.

RokGallery RokGallery

RokGallery

Jobs Manager

The Jobs Manager provides you a log of operations undergoing or undergone in RokGallery. You can view:

  • Import status, with time stamps
  • Slice status, with time stamps
  • Clear all Jobs
  • Delete individual Jobs via the trash icon
  • Refresh individuals Jobs via the reload icon

Galleries Manager

RokGallery is a tagged based gallery component, therefore, Galleries are controlled by tags and not specific photos in albums. Subsequently, you can easily have one master photo in multiple albums with ease.

RokGallery

A single image can appear in numerous galleries based on its tag, and also can be different sizes based on the gallery settings, without editing the original image.

  • Dropdown: To create a new Gallery, select Create New, or the name of another Gallery to edit it
  • Name: Set the name of the Gallery
  • Tags: Set the tags that are associated with the gallery (separate via a comma)
  • Images: Set the maximum height and width of the full image
  • Thumbnails Size: Set the height and width of the thumbnails
  • Background Color: Set the background color for the thumbnail surround
  • Aspect Ratio: Check if you wish to keep the dimensions of the image intact, or cropped.

Remember to Publish a Gallery after clicking Save. If you make any changes to a Gallery, whether in the Galleries Manager, or in the Image Slice Editor, you will need to re-Save in the Galleries Manager for the changes to take place on the site.

RokGallery RokGallery RokGallery

Image Editor

RokGallery has a very advanced image editor, akin to a native application. The various parts will be discussed below.

After selecting the edit button, you will be able to edit the META data of the image, the image itself, plus delete or publish the image.

  • Title: The name of the image file to be displayed on the frontend gallery
  • Slug: The individual identifier for an image (we recommend not to change)
  • Description: The description of the image file shown on the frontend gallery
  • Tags: Add the tags that you wish to associate with the image
  • Slicing: Edit the image
  • Publish:Show or Hide an image for specific tags/galleries.

RokGallery

In the Slice Editor, you can edit the META data and the actual image. You can crop the image, similar to that of an native application, with a set or variable marquee, in addition to Zoom controls. Edits in the Slice Editor are on a per gallery/tag basis.

The original image that was uploaded is maintained, as a new image is created after applying the crop. This can be reverted at any time from the Slice Editor.

RokGallery

Additionally, you can also Share the slice via the Share button, or Delete the image via the Delete button, from the Image Editor:

RokGallery RokGallery

Multi-Tagging

Tagging is at the core of RokGallery, and with its multi-selection ability, you can easily manage tags across multiple images with great ease. Simply highlight several images and click Tags. Here, you can add, remove, or change any common tags applied to your selection.

If you wanted to quickly move several images to another gallery, simply change their tag.

RokGallery

Filtering

RokGallery

A system based on tagging needs an advanced search facility, so RokGallery employs a simple but powerful filtering mechanism:

Filter Type

  • Tags
  • Gallery
  • Published
  • File Size
  • Width
  • Height

Filter Operation

  • Is
  • Is Not
  • Contains
  • Does not Contain
  • Greater than
  • Lesser than

Order by Type (Asc/Des)

  • Title
  • Created At
  • Updated At
  • File Size
  • Width
  • Height

RokGallery RokGallery

RokGallery RokGallery

Filters are not singular and can be applied cumulatively:

RokGallery RokGallery

Wednesday, 19 October 2011 15:23

RokTabs Module (J1.5/1.7)

Written by
RokTabs

RokTabs is a tabbed content module, standalone and themed. Content is transitioned, either by fade or scroll, powered by Mootools, which can be automatic or manual. Plugin support is also featured, whether loading module positions, read more content, or the K2 CCK component.

Module Features

  • Tabbed Content: Display multiple content items in a tabbed enclosure.
  • Module Position Support: You can insert module positions inside the tabs.
  • Inbuilt Styling: Both light and dark styling for standalone support
  • Configurability: Highly configurable from options dealing with transition, to content type and layout.
  • K2 Support: Fully compatible with the powerful content constructive component K2.

Details Download Support

Module Configuration

Options available at Admin → Extensions → Module Manager → Roktabs Module. Important demo settings are highlighted accordingly:

Other

  • Theme Style: Light and Dark. Or Custom, if the template has styling for the modules.
  • Content Type: Joomla Core Content or K2 Content (Requires K2 to be installed).
  • Module Class Suffix: Add a custom class for individual styling

Joomla Core Content

  • Joomla Section: Section to load tabbed content from.
  • Joomla Category: Category to load tabbed content from.
  • Joomla Frontpage Items: Determine whether frontpage content is loaded.

Content Parameters

  • Item Ordering: Control tab ordering — Default, Oldest First, Most Recent First, Title Alphabetical, Title Reverse-Alphabetical & Order.
  • Default Readmore: Determine whether the system Read More is active.
  • Custom Readmore Text: Control the label of the Read More.

Animation and Styling

  • Width: Set to the width of the container element, or a custom value.
  • Max # of Tabs (0 = All): Control the maximum number of tabs.
  • Transition Duration: Time, milliseconds, for tabs to transition between one another.
  • Type of Transition: Choose between Fading or Scrolling for transition
  • Transition Effect: Determine the effect for tab transition.
  • Subtract roktab-links margins: Control calculation of margins for scrolling tabs.
  • Scrollable Tabs: Determine whether tabs are scrollable when they exceed the specified width.

Subtract roktabs-links margins needs to be enabled for best visual effect with scrollable tabs.

Tab Details

  • Tabs Position: Position of tab row, either Top, Bottom or Hidden.
  • Tabs Interaction: Control transition trigger of tabs, Click or Hover.
  • Tabs Title: Determine how tabs are named, By Incremental, By Content Title, or By first Content h6 tag.
  • Incremental prepend text: If By Incremental is selected, specify the prepended text for each tab.
  • Hide h6 tags: Disables H6 content in the tabs.
  • Prefix tabs with numbers: Inject incremental numbers before tab titles.
  • Show Tab Icons: Display tabs adjacent to the tab titles.
  • Tab Icon Side: Position of tab title icons.
  • Tab Icon Path: Set the path of icon images.
  • Tab Icons: Control which icons appear with each tab title.

Autoplay Settings

  • Autoplay: Determine whether tabs transition automatically or manually.
  • Autoplay Delay (ms): Set delay for automatic transition in milliseconds.
Wednesday, 19 October 2011 15:23

Sample Content

Written by

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus, tellus ac ornare aliquam, massa diam tristique urna, id faucibus lectus erat ut pede. Maecenas varius neque nec libero laoreet faucibus. Phasellus sodales, lectus sed vulputate rutrum, ipsum nulla lacinia magna, sed imperdiet ligula nisi eu ipsum. Donec nunc magna, posuere eget, aliquam in, vulputate in, lacus. Sed venenatis. Donec nec dolor vitae mauris dapibus ullamcorper. Etiam iaculis mollis tortor.

In erat. Pellentesque erat. Mauris vehicula vestibulum justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla pulvinar est. Integer urna. Pellentesque pulvinar dui a magna. Nulla facilisi. Proin imperdiet. Aliquam ornare, metus vitae gravida dignissim, nisi nisl ultricies felis, ac tristique enim pede eget elit. Integer non erat nec turpis sollicitudin malesuada. Vestibulum dapibus. Nulla facilisi. Nulla iaculis, leo sit amet mollis luctus, sapien eros consectetur dolor, eu faucibus elit nibh eu nibh. Maecenas lacus pede, lobortis non, rhoncus id, tristique a, mi. Cras auctor libero vitae sem vestibulum euismod. Nunc fermentum.

Mauris lobortis. Aliquam lacinia purus. Pellentesque magna. Mauris euismod metus nec tortor. Phasellus elementum, quam a euismod imperdiet, ligula felis faucibus enim, eu malesuada nunc felis sed turpis. Morbi convallis luctus tortor. Integer bibendum lacinia velit. Suspendisse mi lorem, porttitor ut, interdum et, lobortis a, lectus. Phasellus vitae est at massa luctus iaculis. In tincidunt.

Nullam eget neque. Nullam imperdiet venenatis ligula. Integer a leo. Nunc consectetur. Maecenas sem. Proin vulputate, massa vel volutpat laoreet, purus erat pretium ligula, eget varius arcu nibh sed libero. Fusce ante. Nullam interdum aliquet metus. Ut ultrices vestibulum tellus. Praesent quis erat. Nam id turpis sit amet neque cursus luctus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque id tortor. In vitae sapien. Nunc quis tellus.

Wednesday, 19 October 2011 15:23

Preset Styles

Written by

Access the Style Control settings from: Admin → Extensions → Template Manager → (J15) rt_enigma_j15 or (J17) rt_enigma → Settings

Simple configure the options, then save and Gantry will automatically load the modified preset to your site.

Style Settings

  • Background Level: Low - Med - High; Determine the background detailing level
  • CSS Style: Style 1-8; Set which style set you wish to load
  • Read More Style: Button and Link; Set the read more link styling for the template
  • Load Transition: On - Off; Enable or disable the page loading transition animation effects
  • Web Fonts: On - Off, Google Font Directory; WebFonts allow you to use 3rd party WebFonts from providers such as Google. You must SHOW then APPLY before the new fonts will show up in the Font Family dropdown.
  • Font Settings: Select a font family from the available options and also choose a default font size
    • Font Family: Enigma, Geneva, Optima, Helvetica, Trebuchet, Lucida, Georgia, Palatino, or Various Google Fonts (dropdown)
    • Font Size: Default, Extra Large, Large, Small, Extra Small (dropdown)

Assigning a Style to a Specific Page

With Gantry, the ability to assign a certain style to an individual page has never been easier and/or more efficient. Just follow these simple steps:

  • (J15) Go to Extensions → Template Manager → rt_enigma_j15 → Menu Items → *Menu Item*
  • (J17) Go to Extensions → Template Manager → rt_enigma → Assignments → *Menu Item*

  • (J15) Select your preset from Presets → Style Presets, configure and save.
  • (J17) Select your preset from Show Presets, configure and save.
Gantry Framework: Per Menu Item Controls
Wednesday, 19 October 2011 15:22

Logo Editing

Written by

Gantry sets the dimensions of the logo, so CSS modification is unnecessary.

Step 1 - Open the File

Logo
  • Open the logo-source.png file in Adobe® Fireworks.
  • In the right column, find Layers. Select the Web layers directory and click the eye icon to the left of the logo slice (the green object). This will make the slice invisible so you can edit the file.

Step 2 - Text/Slogan/Icon Editing

  • Double click on the logo text. Now you can edit the text of logo to your choosing. Edit the icon as desired.
Logo Logo

Logo

Logo

Step 3 - Slice Modification

  • Reactivate the Slice in the Web Layers column, this will place a green rectangle over the logo image. Change the size of the slice (or move it) to match the new size if applicable.

Logo

Step 4 - Export

  • Now you will want to export the logo. Right click on the image slice and select Exported Selected Slices... from the contextual menu. Proceed to export it to your computer for uploading.

Step 5 - Multiple Frames/States

  • If there are multiple logos for a template, they are located in Frames or States within Fireworks.

Logo Logo

Wednesday, 19 October 2011 15:22

Menu Options

Written by

Please ensure you are using the latest version of RokNavMenu, available here.

To find all the parameters for Fusion Menu and Splitmenu, such as transitions, duration and sublevel position, go to:

  • (J15) Extensions → Template Manager → rt_enigma_j15 → Menu → Menu Control → Set Menu Type
  • (J17) Extensions → Template Manager → rt_enigma → Menu → Menu Control → Set Menu Type

Descriptions of each template parameter can be seen when you mouseover the label of each option.

Fusion with MegaMenu

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 powered by Mootools.

  • 1/2/3/4 Column Modes
  • Custom Column Widths
  • Custom Menu Width
  • Menu Item Grouping
  • Item Distribution Controls
  • Animation Controls
  • Transition Controls
  • Duration/Delay Controls
  • Opacity Controls
  • Per Item Styling
  • Inline Modules
  • Inline Positions
  • Menu Item Subtext
  • Menu Item Icons

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

Basic Fusion Parameters

  • Subtext 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.
  • Menu Icon is the option that allows you to insert an inline icon / image to the Menu Item.

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.

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.
  • Manually: Determine the exact distribution of items across all columns in the Manual Item Distribution field. For example, if there are 7 menu items in 3 columns, you can specify a 4,2,1 distribution.

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)

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.

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:

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.

Advanced Fusion Parameters: Modules

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

  • Inline 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.
  • Inline 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.

Splitmenu

A static menu system that displays 1st and 2nd level items in the main horizontal menu and further children in the Sidebar.

  • Subtext 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.

Code Modification: Remove the Menu in the Title

(J15) Open /templates/rt_enigma_j15/html/modules.php:

(J17) Open /templates/rt_enigma/html/modules.php:

Change

<?php echo $menu_title_item->name.' '.JText::_('Menu'); ?>

To

<?php echo $menu_title_item->name; ?>

Or delete the entire line.

How to create Child / Sublevel menu items

Go to Admin → Menu → A MenuA Menu Item → Select a Parent Item, and it will appear as a child of it.

Image Image

Image Image

Wednesday, 19 October 2011 15:22

Installation Instructions

Written by

Note: The Bundle Template is only necessary if the Gantry Library is not installed at /components/com_gantry (J15) or /libraries/gantry (J17).

Step 1 - Installation

  • (J15) Install from Admin → Extensions → Install/Uninstall → Choose File → Select file → Upload File & Install
  • (J17) Install from Admin → Extensions → Extensions Manager → Choose File → Select file → Upload File & Install

rt_enigma_j15.tgz rt_enigma.zip Image Image

Step 1 - Template Default

  • (J15) Make the template default at Admin → Extensions → Template Manager → rt_enigma_j15 → Default
  • (J17) Make the template default at Admin → Extensions → Template Manager → rt_enigma → Make Default

rt_enigma_j15 rt_enigma - Default Master Image Image

RocketLauncher Instructions

Note: All sample content images will be replaced with blank versions in the RocketLauncher version.

RocketLauncher is a customized Joomla install, that installs a replica of the demo onto your site - inclusive of sample data, content, extensions, the template and sample images.

We always recommend installing a RocketLauncher first to trial and understand the template more efficiently. It must be installed as new, and not over an existing Joomla install.

Step 1 - Upload

  • Download the RocketLauncher
  • Unzip
  • Upload the created folder to your server

Note: You can upload all the files via FTP, or use cPanel or SSH to upload the zip and unzip directly onto the server. Enquire with your hosting provider.

Step 2 - Installation

  • Go to www.yoursite.com/*folder name*
  • Follow the Installation instructions
  • Ensure you click Install Sample Data during installation
  • (J15) Delete the /installation directory on your server
  • (J17) Remove the installation folder in the Installation interface
Page 1 of 2