Demo Content (30)

Tuesday, 24 June 2008 05:29

Demo Content

Written by Webmaster

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.

Extensions

Written by Webmaster

Learn all about the exciting RocketTheme exclusive extensions that are included in the SolarSentinel template release. Here you can find instructions for installation and configuration for each of the custom extensions/addons.

[span class=attention] Video Tutorial Currently Available! Launch the Joomla Template Module Installation Video Tutorial now! (Requires Flash)[/span]

Step One: Installing the Extension

[list class=bullet-1][li]Download the solarsentinel-extensions-j15.zip archive from the SolarSentinel download section of the RocketTheme Joomla! Club. Unzip the archive and inside you will find individual zip files for each of the extensions.[/li] [li]Login in to your administrator console on your Joomla! website and navigate to the Extensions menu item, and select Install/Uninstall from the dropdown menu. [/li] [li]In the Upload Package File section, click the Choose File button and select one of the extension_name.zip that was inside of the zip file you downloaded earlier. Next click the Upload File & Install button to install the module.[/li][/list]

Step Two: Publishing the Module/Plugin

[list class=bullet-1][li]Now the module is installed it must be published in the appropriate module position and configured to suit our needs. From the top menu, select Extensions → Module Manager[/li] [li]This will take you to the Site Module Manager which allows you to configure the placement and configuration of all modules in your Joomla website.[/li] [li]Locate the module from the list. Remember there could be a few pages. Once you have found it, you can publish in 2 ways: The first is selecting the cross next to the title or clicking the title then set Publish to Yes followed by Save.[/li] [li]Plugins behave in a similar way, simply go to Extensions → Plugin Manager and enable the plugin. You can also configure it from the same manager.[/li][/list] [clear][/clear] [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 install it.
Now all the new modules are functional[/span]

What Extensions accompany the SolarSentinel release?

[list class=bullet-3][li]RokMicroNews Module
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. [/li] [li]RokWeather Module
RokWeather, as the name suggests, is a 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 being configurable from the frontend via the user. Perfect for any news site. [/li] [li]RokGzipper Plugin
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. [/li] [li]RokNewsPager Module
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. [/li] [li]RokNewsflash Module
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. [/li] [li]RokStories Module
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. [/li] [li]RokStock Module
RokStock, is a 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. The module fits seamlessly into the template and is perfect for any news site. [/li] [li]RokAjaxSearch Module
RokAjaxSearch brings fantastic search functionality to Joomla, using the powerful and versatile javascript library, Mootools.

So, what does the module do? The best description is an example, simply type test in the search box in the upper right of SolarSentinel and wait ... and a popup shall materialise, showcasing the Joomla search results for you. [/li] [li]RokTabs Module
RokTabs, the fully independent and incredible flexible standalone version of the former RokSlide.

The module itself is installable into Joomla and can be easily utilised on any template, not just SolarSentinel. As its name implies, it is a tabbed based module to efficiently showcase your content to your visitors. [/li] [li]RokNavMenu Module
RokNavMenu is now an essential ingredient of RocketTheme templates. It provides various functions which are above and beyond what the mainmenu, and the subsequent template overrides can do. Therefore, a much more sophisticated menu can be constructed providing you with a much greater degree of usability. This makes the incredible advanced multiple-dropdown menu possible. It is an essential install for the integrated menu systems to operate. [/li] [li]RokCandy Component
The popular plugin from RocketTheme which allows you to implement typography easily, without fear of the WYSIWYG editor ruining your formatting and allows you, and/or your clients to add them to your content with ease. This is through a method similar to BBcode (as seen in a forum). WYSIWYG friendly syntax can be used, or even custom configured that will transform a set snippet to the correct HTML when it is parsed by Joomla. [/li] [/list]

Published in Demo Content

Tuesday, 24 June 2008 05:15

Features

Written by Webmaster

TerranTribune continues the chain of impressive, revolutionary, yet functional RocketTheme templates. It combines incredible styling with refined and powerful code to help your website achieve its maximum potential.

Color Array
TerranTribune includes an array of colors that you can select from and are integrated with the menu system for a stylish, color-changing effect.
RokMiniNews
RokMiniNews is a powerful module to display your articles, perfect for news and media sites. It is highly configurable and is javascript enabled to allow for user interaction. A truly versatile extension
RokNewsRotator
RokNewsRotator is a module that rotates your news item using the powerful of the mootools javascript library. You simply assign a category/section and watch your articles transition
IE6 Warning Message
For the TerranTribune template we included a script that will display a message to IE6 users advising them to upgrade to a more secure browser version.

This is not enabled by default, but can easily be turned on or off with a toggle in the template index.php. When enabled, users visiting your site with IE6 only, will be able to view the message. By enabling this, you can help fight the good fight that rids the internet of the evil incarnation that is IE6!
Stylish Typography
TerranTribune includes a vast selection of professionally styled typography to bring that extra element to your content. Choose from several typography options including various bullet and number styles as well as much much more.
32 Module Positions
With a Module Position count of 32, as well as support for many more using the new tabbed module functionality, you will be able create a wide variety of layout options and methods for presenting your site's content.
Menu Extravaganza
SplitMenu is a dynamic colour changing menu system with 3rd level dropdowns to maximise navigation. The new RokMooMenu is now accompanied by its predecessor, Suckerfish in a toggle option so you can easier interchange for maximum compatibility.
Rocketlauncher Available
The TerranTribune RocketLauncher package consists of a full 1.5.3 Joomla install, complete with all of the demo images, content, modules, and extensions. By running the installer, your Joomla site will be set up with all everything needed to create an exact implementation of the demo site automatically.

Published in Demo Content

Friday, 17 April 2009 17:16

HTML Typography

Written by Webmaster

This tutorial page features all the typography available with the template, showcasing them in HTML form. If you wish to use the RokCandy format, which is WYSIWYG friendly, please go to the RokCandy Typography page.

This page shows all of the typography styles and settings in action. If you would like to read more detailed information on inserting the included typography into your content, check out the Typography Tutorial.

This is a ComponentHeading

This is a Contentheading

Proin ac nunc eu nunc condimentum accumsan. Phasellus odio justo, euismod vitae, egestas a, porttitor in, urna. Maecenas vitae mauris. Donec vestibulum, nunc eu varius pharetra, massa est sagittis odio, sit amet eleifend elit dolor id tortor.

This is an H1 Header

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sit amet odio quis sapien molestie ultrices. Vivamus quis lectus. Praesent eu mi. Curabitur pharetra leo sed nisl. Nunc vel nisi. Aliquam nulla. Etiam at est. Pellentesque arcu diam, tempus nec, sodales eu, ullamcorper quis, risus.

This is an H2 Header

This is an H3 Header

Mauris euismod. In ac massa vitae quam tincidunt dapibus. Ut at tortor nec mi mattis blandit. Maecenas venenatis lorem at nulla. Phasellus a libero. Sed odio odio, eleifend dignissim, feugiat vel, tempor nec, ligula. Suspendisse lacinia convallis nulla. Vestibulum posuere, lacus aliquet pulvinar faucibus, tortor urna luctus diam, vitae ultrices ante magna non tellus.

This is an H4 Header

This is an H5 Header

Notice Styles are shown below

This is a sample of the 'attention' style. Use this style to denote very important information to your users. To use this use the folllowing html: .... This is a sample of the 'notice' style. Use this style to denote very important information to your users. To use this use the folllowing html: .... This is a sample of the 'alert' style. Use this style to denote very important information to your users. To use this use the folllowing html: .... This is a sample of the 'download' style. Use this style to denote very important information to your users. To use this use the folllowing html: .... This is a sample of the 'approved' style. Use this style to denote very important information to your users. To use this use the folllowing html: .... This is a sample of the 'media' style. Use this style to denote very important information to your users. To use this use the folllowing html: .... This is a sample of the 'note' style. Use this style to denote very important information to your users. To use this use the folllowing html: .... This is a sample of the 'cart' style. Use this style to denote very important information to your users. To use this use the folllowing html: .... This is a sample of the 'camera' style. Use this style to denote very important information to your users. To use this use the folllowing html: .... This is a sample of the 'doc' style. Use this style to denote very important information to your users. To use this use the folllowing html: ....

This is a sample <pre>...</pre> tag:

div.modulebox-black div.bx1 {
  background: url(../images/black/box_bl.png) 0 100% no-repeat; 
}

div.modulebox-black div.bx2 {
  background: url(../images/black/box_tr.png) 100% 0 no-repeat;
}

div.modulebox-black div.bx3 {
  background: url(../images/black/box_tl.png) 0 0 no-repeat;
  padding: 0;
  margin: 0;
}

Blockquote Styles

This is a blockquote, you will want to use the following formatting: <blockquote>....</blockquote>Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod magna a nibh.

This is a blockquote, you will want to use the following formatting: <blockquote class="blue">...</blockquote> Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod magna a nibh.

This is a blockquote, you will want to use the following formatting: <blockquote class="red">...</blockquote>Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod magna a nibh.

This is a blockquote, you will want to use the following formatting: <blockquote class="green">...</blockquote>Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod magna a nibh.

This is a blockquote, you will want to use the following formatting: <blockquote class="purple">...</blockquote>Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod magna a nibh.

This is a blockquote, you will want to use the following formatting: <blockquote class="orange">...</blockquote>Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod magna a nibh.

This is a blockquote, you will want to use the following formatting: <blockquote class="brown">...</blockquote>Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod magna a nibh.

This is a blockquote, you will want to use the following formatting: <blockquote class="grey">...</blockquote>Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod magna a nibh.

List Styles - Bullets

Below is a list with bullets. To use this style create a list in the following format: <ul class="class name"><li>....</li><li>....</li>...</ul>

To use this style create a list in the following format: <ul class="bullet-1"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet-2"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet-3"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet-4"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet-5"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet-6"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet-7"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet-8"><li>....</li><li>....</li>...</ul>.

List Styles - Special Icons

Below is a list with special icons. To use this style create a list in the following format: <ul class="class name"><li>....</li><li>....</li>...</ul>

To use this style create a list in the following format: <ul class="special-1"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class=" special-2"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class=" special-3"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class=" special-4"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class=" special-5"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class=" special-6"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class=" special-7"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class=" special-8"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class=" special-9"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class=" special-10"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class=" special-11"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class=" special-12"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class=" special-13"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class=" special-14"><li>....</li><li>....</li>...</ul>.

Span Styles - Number

Below is a list with number. To use this style create a list in the following format: 1[any number]

1To use this style create a list in the following format: 1....some content....

2To use this style create a list in the following format: 2....some content....

3To use this style create a list in the following format: 3....some content....

1To use this style create a list in the following format: 1....some content....

2To use this style create a list in the following format: 2....some content....

3To use this style create a list in the following format: 3....some content....

1To use this style create a list in the following format: 1....some content....

2To use this style create a list in the following format: 2....some content....

3To use this style create a list in the following format: 3....some content....

4To use this style create a list in the following format: 3....some content....

Highlight Styles

This is a span that allows you to highlight words or phrases. Use the following format: ...

This is a span that allows you to highlight words or phrases. Use the following format: ...

This is a span that allows you to highlight words or phrases. Use the following format: ...

This is a span that allows you to highlight words or phrases. Use the following format: ...

This is a span that allows you to highlight words or phrases. Use the following format: ...

This is a span that allows you to highlight words or phrases. Use the following format: ...

This is a span that allows you to highlight words or phrases. Use the following format: ...

This is a span that allows you to highlight words or phrases. Use the following format: ...

This is a span that allows you to highlight words or phrases. Use the following format: ...

Inset Styles

Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.You will need to use the following formatting: ...some content...Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod magna a nibh.

Sed euismod magna a nibh. Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.You will need to use the following formatting: ...some content...Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod magna a nibh.

DropCap Styles

PPraesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod magna a nibh. Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod magna a nibh.

You will need to use the following formatting: P

Important Emphasis Styles

Sample Title This is a span that lets you place all of the content into a nice well formed section. You will need to use the following formatting: <div class="important">Sample Title...some content...</div>

Sample TitleThis is a span that lets you place all of the content into a nice well formed section. You will need to use the following formatting: <div class="important-blue">Sample Title...some content...</div>

Sample TitleThis is a span that lets you place all of the content into a nice well formed section. You will need to use the following formatting: <div class="important-red">Sample Title...some content...</div>

Sample TitleThis is a span that lets you place all of the content into a nice well formed section. You will need to use the following formatting: <div class="important-green">Sample Title...some content...</div>

Sample TitleThis is a span that lets you place all of the content into a nice well formed section. You will need to use the following formatting: <div class="important-purple">Sample Title...some content...</div>

Sample TitleThis is a span that lets you place all of the content into a nice well formed section. You will need to use the following formatting: <div class="important-brown">Sample Title...some content...</div>

Sample TitleThis is a span that lets you place all of the content into a nice well formed section. You will need to use the following formatting: <div class="important-orange">Sample Title...some content...</div>

Sample TitleThis is a span that lets you place all of the content into a nice well formed section. You will need to use the following formatting: <div class="important-grey">Sample Title...some content...</div>

Published in Demo Content

Friday, 17 April 2009 17:18

IE6 PNG Fix

Written by Webmaster

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.

SolarSentinel
Mynxx
Meridian
Akiraka
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>

Published in Demo Content

Tuesday, 24 June 2008 05:25

Installation

Written by Webmaster

The following is a guide that covers how to set up your new TerranTribune template on your Joomla site. Here you can find an overview of the files included in the TerranTribune release and instructions on installing and activating the template in your Joomla install.

Downloading the TerranTribune Files

The first step is to download all of the files that will be needed to install your template, custom modules, as well as make modifications. Here is a quick explanation of each of the available files in the TerranTribune release.

TerranTribune Template (rt_terrantribune_j15.tgz) This file is the template package you will use to install your template into Joomla.
TerranTribune Custom Extensions (terrantribune-extensions-j15.zip) This package contains each of the individual custom extensions included in the terrantribune template release.
TerranTribune Source PNG's (terrantribune-sources.zip) This zip contains the source PNGs for making modifications and customizations to the images in the template as well as the logo font. There are additional sources for the transparent background, buttons, typography and headers. You will need an image editing software (preferably Adobe/Macromedia Fireworks) to utilize the Source PNG files.
TerranTribune RocketLauncher (Joomla_RT_TerranTribune_j15.zip) This is the RocketLauncher pack for TerranTribune which is a complete and separate Joomla install which has the template preinstalled, configured as well as the demo content already implemented.

Step 1 - Using the Joomla installer

Go to your Admin control panel for your site. In the Menu at the top, go to Extensions > Install/Uninstall. Next browse for your rt_terrantribune_j15.tgz file you downloaded and then click Upload File & Install. Now TerranTribune is installed and in your template list. You should observe an introductory page in which you select Continue.

Step 2 - Making TerranTribune Default

Next, from your admin control panel, go to Extensions > Template Manager. This will pull up the list of your installed templates. Find TerranTribune on the list and select the radio button to the left and then click Default up in the top right corner. TerranTribune will now be the default template on your Joomla! website.

Published in Demo Content

Tuesday, 24 June 2008 05:28

Logo Editing

Written by Webmaster

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 1

First, open the header Source PNG file in Adobe Fireworks. On the right side, you will notice a taskbar named Layers. Inside this column, a list of elements within the source will appear, divided into folders. The first is Web Layers which controls the green slices on the page that are used to export the images. Click the eye which is immediately left to the folder name Web Layers to make it invisible. This allows use to edit the logo.

Step 2

Next, double click on the logo which should be position in top-left. This will activate the text tool so you can edit the element. Highlight the entire text box with your cursor and type your text instead(such as your company name.)

Next, double click on the slogan which is beneath the logo. This will activate the text tool so you can edit the element. Highlight the entire text box with your cursor and type your text instead(such as your company slogan). You may need to drag and move the second text block

Now, double click on the icon letters left of the logo. This will activate the text tool so you can edit the element. Highlight the entire text box with your cursor and type your text instead(such as your company initials).

Step 3

On the right column where the Web layers area is, we need to reactivate it. As you did in the initial step, select the eye icon to make it visible and subsequently making the slices visible on the canvas. Select the logo slice, either on the canvas itself or in the Web Layers folder. If you find the slice is too small, hover your cursor the blue points around the slice and drag it to a new size

Step 4

To export your logo, right click on the green slice that is situated above your new logo. A popup menu should appear with numerous options. The value we want to deal with is "Export Selected Slice...". As the name suggests, this option will export/save this slice only out of the entire source window.

Step 5

If you are new to Fireworks, you may be wondering why it appears that there is only one style variation in the source. This is not the case as we take advantage of the Frame features of Fireworks. You need to simply switch frames to see all the other style variation sources.

There are a few ways to change frames and we will show 2 methods that you can use.

In the right column where you find the Layers toolbar including the Web Layers area, you should see another tab/toolbar named Frames. Just left click on the title Frames to enter the frames area. Then you can click on either of the frames which are named to show which style variant is on that particular frame.

The second method is the most easiest and simplistic. At the bottom of the Fireworks canvas is a row of buttons, arrows just as previous and next. Select the arrows to switch between frames.

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

Open your FTP client on your local computer.
Login to your web server where TerranTribune is installed.
Navigate to the /templates/rt_terrantribune_j15/images/#color directory.
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).
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.

Published in Demo Content

Tuesday, 24 June 2008 05:21

Menu Options

Written by Webmaster

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".

Published in Demo Content

Start
Prev
1
2
3
Next
End

Page 1 of 3

Preset Style
Header Style
Body Style
Background Style
Footer Style
Primary Color
Display Frontpage Component
Enable IE6 Warning	Enabled Disabled
Font Family
Enable Font Spans	Enabled Disabled
Enable Input Style	Enabled Disabled
Template Width
Left Inset Width
Right Inset Width
Choose Splitmenu Location
Font Size

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
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

MooMenu Background Effect	No Yes
MooMenu Over Background Duration
MooMenu Over Background Transition
MooMenu Out Background Duration
MooMenu Out Background Transition

MooMenu Submenus Effect	No Yes
MooMenu Submenus Max Opacity (0 to 1)
MooMenu Submenu Over Background Duration
MooMenu Submenu Over Background Transition
MooMenu Submenu Out Background Duration
MooMenu Submenu Out Background Transition
MooMenu Submenu Top offset
MooMenu Submenu Right offset
MooMenu Submenu Bottom offset
MooMenu Submenu Left offset

Demo Content (30)

Creating your own presets

Step One: Installing the Extension

Step Two: Publishing the Module/Plugin

What Extensions accompany the SolarSentinel release?

This is a ComponentHeading

This is an H1 Header

This is an H2 Header

This is an H3 Header

This is an H4 Header

This is an H5 Header

Notice Styles are shown below

Downloading the TerranTribune Files

Step 1 - Using the Joomla installer

Step 2 - Making TerranTribune Default

Logo Editing Video Tutorial

Customising Your Logo

Selecting your Menu Style

Menu Settings

More...