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.

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. [clear][/clear]

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.

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] [clear][/clear]

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.



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.

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>

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] [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. [clear][/clear]

The demo for TerranTribune utilises a large stock of custom code and styling to make the most of every content item and show what TerranTribune can do. This basically means that the HTML used in the custom modules and content have customisations which employ the characteristics of the template to make the "perfect" content.

This demo content section will take you through some of the content areas and general techniques used to further your understanding and help you realise the true potential of TerranTribune. If you would like to quickly deploy a replica of our TerranTribune demo for a new Joomla site, be sure to check out our RocketLauncher package.

Read More Buttons

Read more buttons are automatically generated for content items that use the intro and main text option. However, you can easily insert them manually as witnessed on this demo. Use the following code:

<a href="your_link" class="readon">Read More...</a>

A guide to implementing the included TerranTribune typography styles and elements into your site as well as instructions for inserting typography using the HTML editor option of your WYSIWYG editor.

Every RocketTheme template has its own set of content styles, these styles are known as Typography. Typography can come in a number of varying and diverse formats, ranging from simple text modifications to image insertions to improve the look, layout of your website and give it life. This tutorial will take you through the necessary steps to adding typography to your Joomla! content.

Inserting Typography with the HTML Editor

To insert the Typography into your content, you must use the HTML feature of all Joomla! content editors. The following tutorial will outline the steps in which to does this with the default Joomla! content edit, TinyMCE. Please be aware, even though there are other content editors available, all are basically the same and the steps with be just as effective if you are using another Content editor.

Please note that the following tutorial will show you how to insert HTML (typography) into Article, the same procedure is apparent for Content Items and Custom modules. You may skip steps 4 and 5 if you are using No WYSIWYG editor.

You will not see the effects in the content editor, all style affects are only visible on the Frontend of your Joomla! website.

The following is a step by step guide to customising your TerranTribune logo image by replacing the logo text with your own organization or company's name and logo.

In order to utilise the Fireworks Source PNG included with the terrantribune template release, you will need Adobe Fireworks. The 30-day free trial of this software as well as more information is available here at the Adobe website.

Logo Editing Video Tutorial

Learn how to customize your TerranTribune logo using Adobe Fireworks with this detailed video tutorial. Watch Now!

Customising Your Logo

One of the first steps of customising your new TerranTribune template will undoubtedly be altering the logo text to reflect the name of your company / organization. RocketTheme makes this process a simple one by including both the Source PNG for the template, as well as font(s) used.

The most effective way to customise the logo is to use the included Source PNG file. When opened in Adobe Fireworks, this file contains all of the Layers in the design allowing you to tweak and change any of the image elements of the template design. The following steps will help you quickly get your new logo ready to go:

Step 6

Once you have successfully edited then exported your new logo, you will need to upload it to your server. This process is best done via a FTP client such as Filezilla

1. Open your FTP client on your local computer.
2. Login to your web server where TerranTribune is installed.
3. Navigate to the /templates/rt_terrantribune_j15/images/#color directory.
4. Upload logo.png to this directory (You may need to browse on the local panel in the FTP client to find where you have exported your logo).
5. Clear your browser cache before viewing such as using the keyboard commands on Windows, Ctrl+F5.

Ensure that you are uploading the correct logo to avoid confusion if it does not change. Also take into account hosting permissions. Sometimes, hosts which are not designed for Joomla may have permissions not suited for the setup, thus, the upload will not be complete. In this case, contact your hosting provider.

A guide to the many configurable options that can be configured in the template manager.

Preset Style	Style1 Style2 Style3 Style4 Style5 Style6 Style7 Style8 Style9 Style10 Custom
Header Style	BlueRedBlackGreyOrangeGreen
Body Style	WhiteBeige
Background Style	WhiteBlueRedBlackGrey
Footer Style	BlueRedBlackGreyOrangeGreen
Primary Color
Display Frontpage Component	ShowHide
Enable IE6 Warning	Enabled Disabled
Font Family	Solar SentinelGenevaOptimaHelveticaTrebuchetLucidaGeorgiaPalatino
Enable Font Spans	Enabled Disabled
Enable Input Style	Enabled Disabled
Template Width
Left Inset Width
Right Inset Width
Choose Splitmenu Location	Left ColumnRight Column
Font Size	SmallerDefaultLarger
Show Date	No Yes
Client Side Date	No Yes
Show Main Logo	No Yes
Show Logo Slogan Text	No Yes
Logo Slogan Text
Show Copyright Information	No Yes
Show Text Size Controls	No Yes
Show Top Button	No Yes
Enable JS Compatibility	No Yes
Menu Type	MooMenuSuckerFishSplitMenuToolbar Module PositionNo Horizontal Menu Bar
Drop Down Rows Per Column
Drop Down Columns
Multi-Column Level
Menu Name
MooMenu BGI Frame	No Yes
MooMenu Delay
MooMenu Duration
MooMenu FPS
MooMenu Transition	linearQuad.easeOutQuad.easeInQuad.easeInOutCubic.easeOutCubic.easeInCubic.easeInOutQuart.easeOutQuart.easeInQuart.easeInOutQuint.easeOutQuint.easeInQuint.easeInOutExpo.easeOutExpo.easeInExpo.easeInOutCirc.easeOutCirc.easeInCirc.easeInOutSine.easeOutSine.easeInSine.easeInOutBack.easeOutBack.easeInBack.easeInOutBounce.easeOutBounce.easeInBounce.easeInOutElastic.easeOutElastic.easeInElastic.easeInOut
MooMenu Background Effect	No Yes
MooMenu Over Background Duration
MooMenu Over Background Transition	linearQuad.easeOutQuad.easeInQuad.easeInOutCubic.easeOutCubic.easeInCubic.easeInOutQuart.easeOutQuart.easeInQuart.easeInOutQuint.easeOutQuint.easeInQuint.easeInOutExpo.easeOutExpo.easeInExpo.easeInOutCirc.easeOutCirc.easeInCirc.easeInOutSine.easeOutSine.easeInSine.easeInOutBack.easeOutBack.easeInBack.easeInOutBounce.easeOutBounce.easeInBounce.easeInOutElastic.easeOutElastic.easeInElastic.easeInOut
MooMenu Out Background Duration
MooMenu Out Background Transition	linearQuad.easeOutQuad.easeInQuad.easeInOutCubic.easeOutCubic.easeInCubic.easeInOutQuart.easeOutQuart.easeInQuart.easeInOutQuint.easeOutQuint.easeInQuint.easeInOutExpo.easeOutExpo.easeInExpo.easeInOutCirc.easeOutCirc.easeInCirc.easeInOutSine.easeOutSine.easeInSine.easeInOutBack.easeOutBack.easeInBack.easeInOutBounce.easeOutBounce.easeInBounce.easeInOutElastic.easeOutElastic.easeInElastic.easeInOut
MooMenu Submenus Effect	No Yes
MooMenu Submenus Max Opacity (0 to 1)
MooMenu Submenu Over Background Duration
MooMenu Submenu Over Background Transition	linearQuad.easeOutQuad.easeInQuad.easeInOutCubic.easeOutCubic.easeInCubic.easeInOutQuart.easeOutQuart.easeInQuart.easeInOutQuint.easeOutQuint.easeInQuint.easeInOutExpo.easeOutExpo.easeInExpo.easeInOutCirc.easeOutCirc.easeInCirc.easeInOutSine.easeOutSine.easeInSine.easeInOutBack.easeOutBack.easeInBack.easeInOutBounce.easeOutBounce.easeInBounce.easeInOutElastic.easeOutElastic.easeInElastic.easeInOut
MooMenu Submenu Out Background Duration
MooMenu Submenu Out Background Transition	linearQuad.easeOutQuad.easeInQuad.easeInOutCubic.easeOutCubic.easeInCubic.easeInOutQuart.easeOutQuart.easeInQuart.easeInOutQuint.easeOutQuint.easeInQuint.easeInOutExpo.easeOutExpo.easeInExpo.easeInOutCirc.easeOutCirc.easeInCirc.easeInOutSine.easeOutSine.easeInSine.easeInOutBack.easeOutBack.easeInBack.easeInOutBounce.easeOutBounce.easeInBounce.easeInOutElastic.easeOutElastic.easeInElastic.easeInOut
MooMenu Submenu Top offset
MooMenu Submenu Right offset
MooMenu Submenu Bottom offset
MooMenu Submenu Left offset

Preset Style

The template is bundled with 10 pre-made style variants that can be easily and quickly chosen from the template configuration. There is also an option for Custom which you will choose if you do not wish to use the preset styles. [span class=attention]NOTE: The various options will not work unless you click Custom in the Preset Styles section.[/span]

Colour Chooser Options

If you selected Custom in the Preset Styles option, you will now have a choice of several options to customise your sites colour scheme. Therefore, you can either manually type your desired colour into the input field or select the colour from the popup.

The names of the various selections denote the area that they apply to. [span class=alert]Click the Custom Styles button in the toolbar to output your custom style configuration into the Custom Config output box, underneath all the params. You will use these values in the styles.php file to customise your own defaults.[/span]

Display Frontpage Component

This setting allows you to select whether the frontpage area (where content items are placed) is active or not. This is useful if you wish to have an entirely modular frontpage and no article-based content.

IE6 Warning

Warn your visitors using Internet Explorer 6 to upgrade to a more secure version with this toggle. This option activates a javascript based dropdown in IE6 at the top of the template where a description of why IE6 is a redundant browser is visible. The warning will only appear once as it is stored via a cookie.

Font Family

You can choose which font you would like to use for your entire website, these are all web standard fonts.

Font Spans

Set to Enable or Disable Font Spans. Font Spans refer to the multi-coloured effect on titles, such as module headers.

Input Style

Set to Enable or Disable Input Styles. This is the javascript enabled custom styling for radio icons and similar inputs such as in the Poll. You can see these icons in the params above.

Template Width

This template configuration option allows you to easily change the width of the template itself, simply change the number to another pixel value.

Left Inset Width

This template configuration option allows you to easily change the width of the left inset position, simply change the number to another pixel value.

Right Inset Width

This template configuration option allows you to easily change the width of the right inset position, simply change the number to another pixel value.

Splitmenu Location

One of the template's menu options is splitmenu which displays the first level items in the horizontal menu bar and the 2nd in a side column module. This option allows you to choose between the left column or the right column.

Default Font

This option allows you to choose what the font size will be, you have 3 options to choose from, these are small, default and large.

Show Date

Choose whether the date, in the upper left of the template appears.

Client Side Date

Select whether the date is server based or based on the time and date of your visitors computer.

Show Main Logo

Choose whether the logo area has the template logo image, or is the logo module position. If this option is set to no and there are no modules assigned to the logo area, it will collapse completely.

Show Logo Slogan Text

Choose whether the slogan, to the right of logo appears.

Slogan Text

Enter the text you wish to appear for the slogan.

Show Copyright

Choose whether the copyright area has the RocketTheme logo image, or is the footer module position. If this option is set to no and there are no modules assigned to the footer area, it will collapse completely.

Show Text Size Controls

This setting allows you to disable the text size controls in the upper right of the template.

Show Top Button

This setting allows you to disable the top button in the lower right of the template.

Mootools / Javascript Compatibility

Enable or disable js compatibility mode for better compatibility with non mootools based js libraries. Warning, setting to "true" will cause several js template features to not work properly.

Menu Type

SolarSentinel is bundled with 4 menu options, 3 of which are integrated menu approaches. These are splitmenu, moomenu, suckerfish and module. Splitmenu displays the 1st level menu items in the horizontal bar and the 2nd in the side column; moomenu and suckerfish display the menu items in dropdown lists with moomenu having a javascript powered approach; and the module options turns the menu bar into the toolbar module position so you can insert modules into the area (this will disable the menu however). You can also select none so the entire horizontal menu does not appear.

Drop Down Rows per Column

The maximum number of menu item rows per column. Applicable only to MooMenu and Suckerfish, as well as second+ menu levels.

Drop Down Columns

The number of columns for a dropdown. Applicable only to MooMenu and Suckerfish, as well as second+ menu levels.

Multi-Column Level

The menu level that is affected by the multiple column dropdown affect. Set to 0 to affect all dropdown levels or set a number greater than 0 to specify a particular level with the multiple column function. Applicable only to MooMenu and Suckerfish.

Menu Name

The following parameter controls which Joomla menu is loaded for the horizontal navigation bar, by default this is mainmenu but you can change it to whatever menu such as othermenu.

TerranTribune features the exciting and exclusive RokMooMenu system for the ultimate in menu functionality and style, as well as the popular and reliable RTSplitMenu. An option for Suckerfish is also included. Here you can read an overview of the TerranTribune menu configuration options.

Video Tutorial Currently Available!
Launch the Joomla Menu Setup Video Tutorial now!(Requires Flash)

Selecting your Menu Style

TerranTribune allows you to choose from 3 menu options:

• RokMooMenu - The exciting new menu system based on the ever popular Suckerfish menu style, featuring mootools powered transitions and effects.
• Suckerfish - The versatile dropdown menu is now an option in combination with RokMooMenu to minimize library conflicts.
• SplitMenu - Then venerable SplitMenu is a solid choice for navigation. It works by rendering the top-level menu options horizontally, and the submenu/child items are rendered in a module on the side. Now with advanced 3rd level features.

You can designate which menu type you want to use on your site with a single control in the Template Manager (located in the Joomla Administrator).

The Powerful & Popular RokMooMenu

Making its return this month is the immensely popular RokMooMenu. This menu has been developed from scratch using the latest and greatest MooTools JavaScript framework. The RokMooMenu is a highly advanced and fully customizable menu system. Some of the great features include:

• Hover support for IE6 using the sfHover javascript class just like in Suckerfish.
• Fully degradable to standard SuckerFish menu if javascript is not supported.
• Configurable mouse-out delay to allow for accidental mousing out of the menu.
• Completely customizable animation effects using MooTools transitions. Can be configured in X and/or Y directions.
• Support for fade-in transparency
• Experimental support for IE6 z-index bug using the iFrame hack.

An example configuration as used in the demo:

<script type="text/javascript">
window.addEvent('domready', function() {
new Rokmoomenu($E('ul.menutop '), {
bgiframe: false,
delay: 500,
animate: {
props: ['width', 'opacity'],
opts: {
duration: 600,
transition: Fx.Transitions.Sine.easeOut
}
}
});
});
</script>

Menu Settings

• Bgiframe - Can be true or false. Only turn on if you are having problems with IE and z-index. This feature is experimental.
• Delay - Defaults to 500ms. This is the how long you can mouse off the menu before it vanishes.
• Props - These are the properties that will be applied to the menu. Can be any combination of opacity, width, height. The two properties, width and height are affected by the transition defined in opts.
• Duration - the time in ms the animation will run for.
• Transitions - any of the available MooTools transitions. See below for more details.
  For example, "Bounce.easeIn or Bounce.easeOut or Bounce.easeInOut" produce a bouncing effect.

For more details with diagrams, visit the Mootools documentation site

Creating dropdown menus for RokMooMenu and Suckerfish

To have specific menu items appear as sub items, you must assign them to the specific navigation item in which they will originate from. The following tutorial will show you how simple it is to create your ideal menu system.

Step 1 - Navigation

Once you have logged into the Joomla! Administration Area, you must navigate to the Menu area. Hover over the Menu item in the taskbar to show the dropdown menu. For this example, we are going into the mainmenu but the technique is exactly the same for all menus in the Administrative area.

Step 2 - The Menu Manager

You will then be transported to the Menu Manager for mainmenu. At this point, you can do 2 things. The first is to edit an existing menu item, which we will be doing in this tutorial or create a New menu item to be subordinate to an existing item. Click on the item you want to be part of the dropdown menu.

Step 3 - Assigning a Parent Item

You can now assign the content item to the mainmenu item in which you want to be in the dropdown menu. Identify the "Parent Item" section of the manager. You will select the item in which you wish to be the parent and the source of the dropdown menu. In this example, we have selected "Home".