Top A

Top-a with its default styling.

Top B

Top-b with its default styling.

Top C

Top-c with its default styling.

Top D

Top-d with its default styling.

Top E

Top-e with its default styling.

Top F

Top-f with its default styling.

Feature A

Feature-a with its default styling.

Feature B

Feature-b with its default styling.

Feature C

Feature-c with its default styling.

Feature D

Feature-d with its default styling.

Feature E

Feature-e with its default styling.

Feature F

Feature-f with its default styling.

phone

Showcase A

Showcase-a with its default styling.

Showcase B

Showcase-b with its default styling.

Showcase C

Showcase-c with the box1 suffix.

Showcase D

Showcase-d with the box2 suffix.

Showcase E

Showcase-e with the box3 suffix.

Showcase F

Showcase-f with the box4 suffix.

Utility A

Utility-a with its default styling.

Utility B

Utility-b with the box1 title1 suffix.

Utility C

Utility-c with the box2 title2 suffix.

Utility D

Utility-d with the box3 title3 suffix.

Utility E

Utility-e with the box4 title4 suffix.

Utility F

Utility-f with the box1 title2 suffix.

MainTop A

MainTop-a with its default styling.

MainTop B

MainTop-b with the box2 title3 module suffix.

MainTop C

MainTop-c with the box3 title4 module suffix.

MainTop D

MainTop-d with the box4 title1 module suffix.

MainTop E

MainTop-e with the box1 title3 module suffix.

MainTop F

MainTop-f with the box2 title4 module suffix.

Content Top A

Content-Top-a with the pattern1 module class suffix.

Content Top C

Content-Top-c with the pattern2 module class suffix.

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.
Category: Demo Articles

roknewspager

RokNewsPager is an article previewer and rotator. It displays content articles, in a summarised form and, using mootools based javascript transition, rotates through a series of pages displaying articles in a contracted list format.

RokNewsPager allows you to display a large number of news items and links in a small compact area via its paging functionality and includes a multitude of configuration options and parameters to customize how your news is displayed.

RokModule needs to be installed if you are using this module within Joomla 1.5.x

Module Features

  • Javascript Transitions: using the power of mootools, the module fades between lists of your content articles
  • Previews: set the number of characters you wish to display from your articles
  • Section Control: choose all articles, or those from particular sections or categories
  • Auto Update: select whether the module auto-updates using AJAX
  • K2 Support: Fully compatible with the powerful content constructive component K2.

Details Download Support


 

Module Configuration

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

Other

  • Load built-in StyleSheet: Disable if you wish to override the standalone style by custom template styling.
  • Theme Style: Light and Dark.
  • 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

  • Count: Insert a numerical value of the number of articles you wish to appear.
  • Enable Accordion Effect: Enable the accordion module, versus standard list style.
  • Enable Paging: Display several pages if articles exceed count value.
  • Max Pages: Determine the maximum number of pages
  • Show Title: Control whether to show the article title inside the previewed content.
  • Show Thumbnails: Control whether to show the article image inside the preview content.
  • Width of thumbnail (px): Set the pixel width of any thumbnails.
  • Use Thumbnail as link: Determine whether the image becomes a link to the full article.
  • Show Thumbnail Overlay: Control whether the thumb overlay appears.
  • Overlay File: Load which file appears as the overlay over the thumbnails.
  • Show Item Ratings: Control whether to display article rating.
  • Show Readmore Link: Determine whether to show a Read More inside the preview content.
  • Read More Text: Insert the text that you wish to appear on the Read More.
  • Item Ordering: Control tab ordering — Default, Oldest First, Most Recent First, Title Alphabetical, Title Reverse-Alphabetical & Order.
  • Show Preview Text: Control whether the preview text is shown.
  • Allowed HTML tags: Insert all HTML tags, separate by a comma, which you wish to remain intact in the snippet.
  • Preview Length: Input a numerical value which equates to how many characters you wish for the module to show.
  • Show Comment Count: Determine whether to show the number of comments for the article.
  • Show Author: Control whether to show the article author.
  • Show Published Date: Control whether to show the article publishing date.
  • Auto Update: Determine whether articles load automatically.
  • Auto Update Delay (ms): Set delay for automatic loading in milliseconds.
Category: Demo Articles

RokTwittie

RokTwittie is a module that integrates Twitter into your Joomla site. Display tweets of any username, or even by search terms, as well as your profile information and various other elements from Twitter itself. RokTwittie is the perfect compliment to any Social site, or Business site that uses Twitter.

Module Features

  • Real Time Tweets: Tweets update live from Twitter
  • Search: Use the inbuilt search to scan for usernames or keywords
  • Profile information: Show your profile details, such as name, avatar and bio
  • Fast Loading: Written from the ground up for greater performance
  • Highly configurable: Options to control every aspect of RokTwittie
  • Twitter Authentication: Choose between Anonymous and App Authentication
  • Retweet Support: http://support.twitter.com/forums/10711/entries/77606-what-is-retweet-rt
  • Caching: Use of Joomla Cache for greater stability
  • Friendly Errors: If Twitter is down, or CURL is not installed, RokTwittie will fail gracefully

Details Download Support


 

Module Configuration

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

Twitter Options

  • Use OAuth: Set this to yes when using RokTwittie on a live site.
  • Authenticate: Sign in with Twitter with your username and password to authorize RokTwittie.
  • Module Class Suffix: Add a custom class for individual styling
  • Load Built-in CSS: Choose whether to load the standalone styling or to load the CSS from the template. You should disable this option only if you wish to use your own styling which you have already created.
  • Output Caching: As the name suggests, if this is enabled, the module will enable caching in order to save on performance and prevent the 100 Twitter API limit being met.
  • Timeout on connect (secs): The number of seconds to wait while trying to connect to Twitter. User 0 to wait indefinitely.
  • Timeout on response (secs) The maximum number of seconds to allow cURL functions to execute.
  • Cache Time: If caching is enable, set, in minutes, the time you wish before it is cleared and new data is called.
  • Usernames, separated by comma: You can insert your username or multiple usernames (separated by a comma) here and the module will load them.
  • Inactive user opacity: This sets the opacity of the inactive user tab, if you have multiple users set to show in RokTwittie.

General Options

  • Show default avatars: When enabled, your profile picture from Twitter will appear in the module, alongside your other profile information.
  • Show default avatars: Choose between a light and dark style, depending on the background of the module.
  • Include ReTweets: Determines whether retweets are shown.
  • Enable username statuses: This option controls whether the statuses from each username appears in the module.
  • Open links in new window: A self explanatory parameter, basically, all links in RokTwittie can be set to either open in a new window (will default to a new tab in certain browsers) or load in the page you are viewing.
  • Show RSS feed link: This parameter controls whether the RSS feed link for your profile appears in the module, it is accompanied by the RSS feed icon.
  • Show Follow Updates Link: Set to show if you wish to show the updates link.
  • Show the Bio Description: Set to show if you wish to show your Twitter Bio in the module.
  • Show the URL: If you have a website address in your profile, this option allows you to show it.
  • Show the location: Again, if this is set in your twitter profile, you can set it to appear.
  • Show user updates count: Show the number of updates of the user.
  • Show user followers count: Show the number of those who are following the user.
  • Show user following count: Show the number of those who the user is following.
  • Show following icons: Set to show if you wish to show the icons/avatars of the users who are following the user.
  • Icon Count: If icons are enabled, this option controls the number that are actually displayed.
  • Show View all after Icons: When enabled, an additional link will be placed below the icons to view all of the following twitter users.

Tweet Options

  • Enable usernames tweets: This parameter allows you to show the tweets from the user set above.
  • Show usernames avatar: Set to show if you wish to show the avatar next to each tweet.
  • Size in pixel of the avatar: If you set the username avatars to show, this controls the size in pixels.
  • Tweet count: This sets the number of tweets to show if enabled.
  • Open links in new window: A self explanatory parameter, basically, all links in RokTwittie can be set to either open in a new window (will default to a new tab in certain browsers) or load in the page you are viewing.
  • Show tweets sources: When enabled, the sources of each tweet will be shown.
  • Show username as preopened text: If set to show, the username of the tweeter will appear before each tweet.

Search Options

  • Enable search tweets: This parameter allows you to show the tweets from the search option.
  • Search string: Enter the value you wish to search for in Twitter.
  • Show search avatar: Set to show if you wish to show the avatar next to each search tweet.
  • Size in pixel of the avatar: If you set the search avatars to show, this controls the size in pixels.
  • Tweet count: This sets the number of tweets to show if enabled.
  • Open links in new window: A self explanatory parameter, basically, all links in RokTwittie can be set to either open in a new window (will default to a new tab in certain browsers) or load in the page you are viewing.
  • Show tweets sources: When enabled, the sources of each tweet will be shown.
  • Show username as preopened text: If set to show, the username of the tweeter will appear before each tweet.
Category: Demo Articles

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.

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

 

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

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

 

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
  • RokGalleryPublish: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

 

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

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

 
Category: Demo Articles

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.

Category: Demo Articles

Content Bottom A

Content-Bottom-a with its default styling.

Content Bottom C

Content-Bottom-c with its default styling.

Sidebar A

All Sidebar positions can be alternated, such as Side Main Side Side.

This is done via a sliding configuration option in the template manager.

More

Sidebar A

Sidebar-a with its default styling.

More

Sidebar A

Sidebar-a with the box4 title2 pattern8 suffix.

More

Sidebar B

Sidebar-b with the box1 pattern1 module class suffix.

More

Sidebar B

Sidebar-b with its default styling.

More

Sidebar B

Sidebar-b with the box3 title1 pattern15 suffix.

More

Sidebar B

Sidebar-b with its default styling.

More

Sidebar C

Sidebar-c with the box2 pattern10 module class suffix.

More

Sidebar C

Sidebar-c with its default styling.

More

Sidebar C

Sidebar-c with the box1 title4 suffix.

More

Sidebar C

Sidebar-c with its default styling.

More

Bottom A

Bottom-a with its default styling.

Bottom B

Bottom-b with its default styling.

Bottom C

Bottom-c with its default styling.

Bottom D

Bottom-d with its default styling.

Bottom E

Bottom-e with its default styling.

Bottom F

Bottom-f with its default styling.