Demo Content

Demo Content (30)

Sunday, 19 April 2009 10:11

RokGZipper Plugin

Written by
RokGZipper is a plugin whose primary aim is to improve the performance and speed of your site. It does this by compressing your CSS (stylesheets) and JavaScript files. For javascript files, it compresses them altogether (via GZip) and places them in the cache folder. It differentiates between the pages so if you have a particular combination of scripts on one page, and a different combination on another, two files will be created and loaded independently. A similar method is used for the CSS but is based on path. To exemplify, all the CSS files in template's /css directory are combined into one file, with the module CSS files being combined elsewhere. Compressing all these files means your site can load faster. [span class=alert]Note: This plugin is experimental and should be used at your own risk. You should not use the plugin during development stage and should only activate it on a finalised site.

Also, Gzip must be installed on your server and enabled in PHP in order to function.[/span]

What does this mean in the real world?

To see how this effects a template in the a real world scenario, we'll examine the front-page of the SolarSentinel demo site from a very average 768kb DSL connection. We used the Net panel in Firebug for Firefox to get our data.

CSS Files

First we'll see how the site loads the CSS without RokGZipper enabled:

rokgzipper

As you can see because the SolarSentinel template allows for maximum flexibility with almost unlimited combinations of header/body/footer/backgrounds etc, there are multiple CSS files loaded as well as some of the CSS files needed for the modules used. Let's turn on RokGZipper and see what we get now:

rokgzipper

As you can clearly see the 11 original requests have been reduced to 4 requests. The 104KB of CSS files has been reduced to just 18KB (17% of the original size!), and the original 1.44 seconds it took to download the CSS files has been reduced to just 359ms (400% faster!). A drastic improvement!

JavaScript Files

Now to see the effects on the JavaScript side. SolarSentinel is an extremely feature-packed template, and we've tried to show off as much as possible on the front page of the demo. This makes it an excellent example to really see the power of RokGZipper in action. First without RokGZipper enabled:

rokgzipper

Once again, there's a lot of JavaScript there to power all the features and functionality we are showing off on the front page. This of course is a somewhat extreme case, and you probably would not have this much functionality turned on at any one time. Let's enable RokGZipper and see what we get:

rokgzipper

The end result is even more dramatic than with the CSS. Those original 17 requests for the JavaScript elements have been reduced to just 1 request. The 164KB has been reduced to just 46KB (28% of the original size), and the 4.85 seconds it took before has been reduced to just 639ms (760% faster!).

Of course RokGZipper is particular useful with SolarSentinel due to the large amounts of CSS and JavaScript Files, but RokGZipper can be applied to any template and should improve your browsing experience significantly.

How do I configure RokGZipper?

The plugin itself has one parameter, as found in Extensions → Plugin Manager → System - RokGZipper. This option is Cache Time in Secs which delineates the amount of time the cache will remain unchanged before it is flushed for a new file. The value is set in seconds. [span class=note]Note: You need to publish the plugin for it to work.[/span]
Sunday, 19 April 2009 10:11

RokStock Module

Written by
image RokStocs, is an Ajax-powered stocks module for your site. It has been finely tuned to give stocks character such as a coloured line graph, coloured indexes, draggable indexes, tooltips and much more. Your users can easily add, remove, and reorder the stock symbols in their portfolio, this is stored locally for them in a cookie. The module fits seamlessly into the template and is perfect for any news site.

How do I configure RokStock?

We will take a quick look at the parameters you will find when you install this module. There are 4 columns, parameters, options, demo and description. The parameter column lists each available setting for the module; options lists the available options to choose from; demo lists the options chosen on the demo and description outlines what the module does.

Parameter

Show Title Enabled Position Default Stocks User Interaction Save/Restore Status Store Duration (days) Open links in new page Show Main Chart Tooltips Details Tooltips time axis hours

Options

Yes : No Yes : No list of positions Text Field Yes : No Yes : No Number Field Yes : No Yes : No Yes : No 12hr : 24hr

Demo

No Yes right .DJI, .INX, .IXIC Yes Yes 30 Yes Yes Yes 12hr

Description

Enable/Disable the module header Enable/Disable the module Position of the module Stocks displayed. Valid title a must Allows interaction such as reordering Save and restore cookie status Days to keep cookie Open links in new page Show main chart Show tooltips on hover Display 12hr or 24hr time
[clear][/clear]
Tuesday, 21 April 2009 14:10

RokNavMenu

Written by
RokNavMenu is now an essential ingredient of the RocketTheme templates. It provides various functions which are above and beyond what the mainmenu, and the subsequent template overrides. Therefore, much more sophisticated menus can be constructed providing you with a much greater degree of usability. It is an essential install for the integrated menu systems to operate.

How do I configure RokNavMenu?

We will take a quick look at the parameters you will find when you install this module. There are 4 columns, parameters, options, demo and description. The parameter column lists each available setting for the module; options lists the available options to choose from; demo lists the options chosen on the demo and description outlines what the module does.

Parameter

Show Title Enabled Position Menu Name Limit Levels Start Level End Level Always show submenus Menu Tag ID Menu Class Suffix Module Class Suffix Max Menu Depth Show Menu Icons Menu Icon Link

Options

Yes : No Yes : No List of positions List of menus Yes : No Number Field Number Field Yes : No Text Field Text Field Text Field Number Field Yes : No Yes : No

Demo

No No toolbar mainmenu No 0 0 No leave blank leave blank leave blank 10 No No

Description

Enable/Disable the module header Enable/Disable the module Position of the module Menu that is loaded Limit number of sub-levels Starting menu level Ending menu level Always show submenu items ID added to the menu code Class suffix to the menu Class suffix to the module Max number of menu levels Show menu icons Link menu icons
[clear][/clear]
Sunday, 19 April 2009 10:12

RokNewsflash Module

Written by
RokNewsFlash is a custom mootools module that displays your newsflash tidbits at the top of your site. The RokNewsflash also includes small buttons allowing your visitors to toggle through the different newsflash items you have set up. See it in action on the frontpage.

How do I configure RokNewsFlash?

We will take a quick look at the parameters you will find when you install this module. There are 4 columns, parameters, options, demo and description. The parameter column lists each available setting for the module; options lists the available options to choose from; demo lists the options chosen on the demo and description outlines what the module does.

Parameter

Title Position Access Level Published Module Class Suffix Enable Cache Module Mode Frontpage Item Count Category Section Use Title or Intro Text PreText Label Show Controls Transition Duration Delay Length Preview Length

Options

Yes : No List of position Public : Registered : Special Yes : No Text Field Yes : No Content : Static : Both Show : Hide Number Field List of categories List of sections Title: Intro Text Text Field Yes : No Number Field Number Field Number Field

Demo

No NewsFlash Public Yes leave blank No Content Items Hide 5 Top Headlines News Intro Text Latest: Yes 600 2500 85

Description

Enable/Disable the module header Select the module position Determines who can see the module Enable/Disable the module Allows for individual CSS control Stores the contents with Cache What content types are loaded Show or Hide frontpage items How many items to load Category where content is loaded from Section where content is loaded from Controls what part of content are loaded Text label in the module Enable / Disable the controls Time for switching of content items Time for content to remain static Number of characters to be shown
[clear][/clear]
Sunday, 19 April 2009 10:12

RokNewsPager Module

Written by
image The module 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.
[span class=alert]In order for the new SolarSentinel modules to function, you must install com_rokmodules. This component facilitates the modules, as Roknavmenu does for the integrated menu. Follow the instructions below:-

1. Download solarsentinel-extensions-j15.zip from RokDownloads. 2. Extract the zip onto your computer. 3. Go to Extensions then select the Upload File & Install button. 4. Find com_rokmodules.zip and in install.
Now all the new modules are functional[/span]

How do I configure RokNewsPager?

We will take a quick look at the parameters you will find when you install this module. There are 4 columns, parameters, options, demo and description. The parameter column lists each available setting for the module; options lists the available options to choose from; demo lists the options chosen on the demo and description outlines what the module does.

Parameter

Show Title Enabled Position Count Max Pages Order Preview Length Author Auto Update Auto Update Delay Frontpage Items Section Category Module Class Suffix

Options

Yes : No Yes : No list of positions Number Field Number Field list of orders Number Field list of authors Yes : No Number Field Show : Hide list of sections list of categories Text Field

Demo

Yes Yes right 3 3 Recently Modified First 65 Anyone No 5000 Show News Top Headlines blue

Description

Enable/Disable the module header Enable/Disable the module Position of the module Number of Articles per page Number of Pages Ordering of content Number of characters displayed Author selector for articles Update news automatically Delay on auto-update Show/Hide frontpage items Section of articles Category of articles Tag for individual styling
[clear][/clear]
Sunday, 19 April 2009 10:12

RokStories Module

Written by
RokStories is a great module to display your articles and accompanying images as a featured item. The module itself is facilitated by Mootools to transition between images and articles seamlessly. Perfect for showcasing featured articles on your site, as seen on the frontpage. image

How do I configure RokStories?

We will take a quick look at the parameters you will find when you install this module. There are 4 columns, parameters, options, demo and description. The parameter column lists each available setting for the module; options lists the available options to choose from; demo lists the options chosen on the demo and description outlines what the module does.

Parameter

Show Title Enabled Position Section Category Order # of Articles Thumbnail Width Authors Frontpage Items First Article Thumbs Opacity Nav Interaction Autoplay Autoplay Delay Module Class Suffix

Options

Yes : No Yes : No list of positions list of sections list of categories list of orders Number Field Number Field list of authors Show : Hide Number Field Number Field Click : Hover Yes : No Number Field Text Field

Demo

Yes Yes feature News RokStories Recently Modified First 4 90 Anyone Show 0 0.3 Hover No 5000 leave blank

Description

Enable/Disable the module header Enable/Disable the module Position of the module Section of content Category of content Ordering of content Number of articles displayed Pixel width of thumbs Choose specific author articles Display frontpage items Article displayed first Transparency (pc) of thumbs Transition trigger type Auto or manual transition Time for transition Suffix applied to the code
[clear][/clear]
Sunday, 19 April 2009 10:11

RokMicroNews Module

Written by
RokMicroNews is a new module, perfect for displaying your content. Your content (plus auto loaded image) are displayed adjacent to your article titles and the hover or click of these titles triggers a javascript transition to another article. Perfect for showcasing news items in a small, but structured spaced. image

How do I configure RokMicroNews?

We will take a quick look at the parameters you will find when you install this module. There are 4 columns, parameters, options, demo and description. The parameter column lists each available setting for the module; options lists the available options to choose from; demo lists the options chosen on the demo and description outlines what the module does. [span class=attention]In order to stack multiple modules on top of one another, you must create new modules: Admin → Extensions → Module Manager → New → rokmicronews and fill out the relevant details.[/span]

Parameter

Show Title Enabled Position Section Category Order # of Articles Preview Length Nav Position Nav Interaction Show Titles Show Thumbnails Thumbnail Width Authors Frontpage Items Module Class Suffix Extra CSS Class Use Custom CSS

Options

Yes : No Yes : No list of positions list of sections list of categories list of orders Number Field Number Field Left : Right Click: Hover Show : Hide Show : Hide Number Field list of authors Show : Hide Text Field Text Field Yes : No

Demo

Yes Yes rokmicronews RokMicroNews Politics Recently Modified First 3 260 Right Click Hide Show 120 Anyone Show red leave blank No

Description

Enable/Disable the module header Enable/Disable the module Position of the module Section of content Category of content Ordering of content Number of articles displayed Number of characters displayed Position of article titles Transition trigger type Show/Hide Titles Show/Hide thumbnails Pixel width of thumbs Choose specific author articles Display frontpage items Suffix applied to the code Unique class for module Use the Custom CSS tag
[clear][/clear]
Sunday, 19 April 2009 10:03

Color Chooser

Written by
The popular return of the color chooser in SolarSentinel makes a third appearance, in a more conservative and complimentary format. There are several options to choose from to supplement the elegance and ease of use with the template. Simply go to the template manager to change a variety of styles and colours.

Color Chooser


The options are as follows, and the areas that they control are indicative in their name:-
  • Header Style
  • Body Style
  • Background Style
  • Footer Style
  • Primary Colour
[clear][/clear]

Creating your own presets

With SolarSentinel, we provide a series of preset configurations for the color chooser which you and your visitors can select from. However, if you wish to set or change these yourself, the process is extremely simple.

  1. Login into the Joomla Administrator
  2. Go to Extensions > Template Manager > rt_solarsentinel_j15
  3. Set Preset Styles to Custom
  4. Now, choose all the options you wish from the several options available
  5. Hit the Custom Styles button in the Button menu, located in the upper right of the template manager
  6. This will output all the values into the Custom Style Output box, situated below the options. Copy the outputted code from this box
  7. Open the file styles.php which is located within the /templates/rt_solarsentinel_j15/ directory
  8. Locate the following code block.
    $stylesList = array(
    	'style1'  => array('black', 'white', 'bg-red', 'black', "#cf0404"),
    	'style2'  => array('blue', 'beige', 'bg-black', 'grey', "#2986d0"),
    	'style3'  => array('grey', 'white', 'bg-blue', 'blue', "#035b99"),
    	'style4'  => array('orange', 'beige', 'bg-grey', 'orange', "#de510b"),
    	'style5'  => array('red', 'white', 'bg-red', 'blue', "#cf230b"),
    	'style6'  => array('green', 'beige', 'bg-white', 'blue', "#4e7805"),
    	'style7'  => array('blue', 'white', 'bg-grey', 'black', "#0269b3"),
    	'style8'  => array('orange', 'beige', 'bg-black', 'black', "#de510b"),
    	'style9'  => array('black', 'white', 'bg-white', 'red', "#cc0000"),
    	'style10' => array('red', 'beige', 'bg-grey', 'grey', "#cc0000")
    );
    
  9. Edit that block to meet your needs, either by remove the code between $stylesList = array( and ); and copying in the code directly, or adding the new style code to the list of current styles or whatever method you prefer.
    [span class=alert]Ensure that you only edit the code in between $stylesList = array( and ); and ensure it is the right format otherwise you will receive errors[/span]
  10. Save, and upload the file to your site.
Friday, 17 April 2009 17:18

IE6 PNG Fix

Written by

What is the PNGfix?

If you have ever opened a webpage with a transparent PNG in Internet Explorer 6, you will see an obvious problem. The images do not appear transparent but adopt a light blue background, which is unsightly to say the least. This is the purpose of the PNGfix, to allow transparent PNG images to work correctly in the web browser Internet Explorer 6. A common way around this is to use a range of different Joomla! extensions which can be applied to your site. However, this is already built in to new RocketTheme templates (the fix already provides other solutions to various other IE6 issues). The author of this new PNGfix is Drew Diller.

[readon url="http://www.dillerdesign.com/experiment/DD_belatedPNG/"]Learn More[/readon]

Below is a list of all the Rocket Theme Templates which have the PNGfix described above, incorporated into it. Also, all new templates releases will contain this as it has become an recurrent feature.

  1. SolarSentinel
  2. Mynxx
  3. Meridian
  4. Akiraka
  5. Mixxmag

How do I use the PNGfix?

To apply the PNGfix to a particular image, all you need to do is add a class, png. We have an example of image HTML code below:-

<img src="image.png" alt="Image" />

Now add class="png" to the code such as:-
<img src="image.png" alt="Image" class="png" />

[span class=alert]Uninstall all other PNGfixes before using the template version, that includes plugins you may have installed into Joomla as they will conflict with the template fix[/span]

How to remove the PNGfix

If you wish to remove the PNGfix from the template, you have to remove the file and remove the reference from the rt_head_includes.php file. The file is called DD_belatedPNG.js and is located in the /templates/rt_solarsentinel_j15/js directory. You would then remove the following from the rt_head_includes.php file:-
<script src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template?>/js/DD_belatedPNG.js"></script>
<script>
    DD_belatedPNG.fix('.png');
</script>
Sunday, 19 April 2009 10:11

RokWeather Module

Written by
RokWeather, as the name suggests, is an Ajax-powered weather module, using the Google API, you can easily display weather data from regions across the globe. This includes temperature, climate, wind speed as well as allowing the location to be configured from the frontend via the user. Perfect for any news site. [span class=note]Remember, you can change the location displayed in RokWeather by double clicking on the current location, then type your own (as seen in the Minimal block in the screenshot below.[/span] image [span class=alert]In order for the new SolarSentinel modules to function, you must install com_rokmodules. This component facilitates the modules, as Roknavmenu does for the integrated menu. Follow the instructions below:-

1. Download solarsentinel-extensions-j15.zip from RokDownloads. 2. Extract the zip onto your computer. 3. Go to Extensions then select the Upload File & Install button. 4. Find com_rokmodules.zip and in install.
Now all the new modules are functional[/span]

How do I configure RokWeather?

We will take a quick look at the parameters you will find when you install this module. There are 4 columns, parameters, options, demo and description. The parameter column lists each available setting for the module; options lists the available options to choose from; demo lists the options chosen on the demo and description outlines what the module does.

Parameter

Show Title Enabled Position Default Location Location Caching Enable Location Cookie Enable Icon Display Enable Humidity Display Enable Wind Display Enable 4 Day Forecast Default Degree Type

Options

Yes : No Yes : No list of positions Text Field Yes : No Yes : No Yes : No Yes : No Yes : No Yes : No °C : °F

Demo

No Yes right Golden, CO Yes Yes Yes Yes Yes Yes °F

Description

Enable/Disable the module header Enable/Disable the module Position of the module Location on first load Cache location details Enable cookie for location Display the icon image Display the humidity readings Display the wind readings Display the 4 day forecast Celsius or Fahrenheit as default
[clear][/clear]
Page 1 of 3