Wednesday, November 22, 2017

Articles

Background images are selectable via a RokGallery interface, or through a standalone alternative.

tutorial

ColorChooser allows you to modify the color scheme easily. Choose from light/dark modes as well as full color controls over other backgrounds, text, and links.

Read More

Module Variations allow you to individually style a module Enter any available suffixes at Extensions → Module Manager → Module → Module Class Suffix

There are 56 suffixes: box1-2, title1-2, rounded, square, dark10-95 and light10-95; nomargintop, nomarginbottom, nomarginright, nomarginleft, nopaddingtop, nopaddingbottom, nopaddingright and nopaddingleft; flush, flushtop and flushbottom; plus standardcase, uppercase and lowercase.

Note: You can compound multiple suffixes together such as dark10 nomarginleft standardcase flushbottom.

  • Title: 2 variations to change the module title.
  • Box: 2 variations to change the module background.
  • Dark10-95 (increments of 5): 18 variations to change the module background.
  • Light10-95 (increments of 5): 18 variations to change the module background.
  • Rounded: rounds the module corners.
  • Square: squares the module corners.
  • Standard/Upper/Lower Case: change the case of the module title.
  • NoMarginTop/Bottom/Left/Right: removes the various margins around the module.
  • NoPaddingTop/Bottom/Left/Right: removes the various paddings around the module
  • Flush/FlushTop/FlushBottom: removes the margin/padding around the module surround.

There are 78 module positions. If no module is published to a position, it will not appear, collapsing the entire area.

Non-Standard Elements

There are non-standard elements that are injected into the template grid structure when enabled via the template parameter, such as the logo into header-a. These features stack vertically with any modules published to that position.

You can change the positions of these elements at Extensions → Template Manager → (J15) rt_radiance_j15 or (J17) rt_radiance

Layout Control

Control all modules positions with Gantry, in terms of widths within the module row, and left/right/middle placement for the mainbody/sidebar area.

image

image

Gantry Framework : Layouts Documentation

Preview Positions

View all module positions live by appending ?tp=1 or &tp=1 to the end of your URL such as http://yoursite.com/index.php?tp=1.

The below diagram is of the Module Variations page.

Module Positions






To replicate, use the following formatting:
...
(HTML)
or
...
(ROKCANDY)
.
To replicate, use the following formatting:
...
(HTML)
or
...
(ROKCANDY)
.
To replicate, use the following formatting:
...
(HTML)
or
...
(ROKCANDY)
.
To replicate, use the following formatting:
...
(HTML)
or
...
(ROKCANDY)
.

To replicate, use the following formatting:

....

(HTML) or

...

(ROKCANDY)
.



Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis.

To replicate, use the following formatting:

....

(HTML) or

...

(ROKCANDY)
.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris metus tortor, commodo sit amet tempor id, gravida eget orci. In molestie feugiat nunc ac lobortis. Ut non nisi dolor, ac ultricies lorem. Vestibulum non lectus in arcu gravida malesuada. Curabitur sed sollicitudin mi. Aenean sit amet tortor ac arcu gravida rutrum eget ac dui. Phasellus rutrum dapibus nulla, a venenatis tortor eleifend vitae. Ut tincidunt vestibulum blandit. Nulla aliquet urna non enim convallis in vehicula mi scelerisque. Aliquam blandit imperdiet lorem eu ultrices. Nulla in dolor non ipsum fringilla sodales sed ac turpis. Nam nisi arcu, tincidunt sodales.



Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis.

To replicate, use the following formatting:

....

(HTML) or

...

(ROKCANDY)
.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris metus tortor, commodo sit amet tempor id, gravida eget orci. In molestie feugiat nunc ac lobortis. Ut non nisi dolor, ac ultricies lorem. Vestibulum non lectus in arcu gravida malesuada. Curabitur sed sollicitudin mi. Aenean sit amet tortor ac arcu gravida rutrum eget ac dui. Phasellus rutrum dapibus nulla, a venenatis tortor eleifend vitae. Ut tincidunt vestibulum blandit. Nulla aliquet urna non enim convallis in vehicula mi scelerisque. Aliquam blandit imperdiet lorem eu ultrices. Nulla in dolor non ipsum fringilla sodales sed ac turpis. Nam nisi arcu, tincidunt sodales.


This is a sample 
...
(HTML)
or, [pre2 class="{lines}"] ... [/pre2] (ROKCANDY) 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; }

This is a sample 
...
(HTML)
or, [pre class="{lines}"] ... [/pre] (ROKCANDY) 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; }

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

Use the following format:

...

(HTML) or

...

(ROKCANDY)
. You can use any letter, symbol or number.

Praesent rutrum sapien ac felis. Use this format:

...

(HTML) or

...

(ROKCANDY)

Praesent rutrum sapien ac felis. Use this format:

...

(HTML) or

...

(ROKCANDY)

Praesent rutrum sapien ac felis. Use this format:

...

(HTML) or

...

(ROKCANDY)

Praesent rutrum sapien ac felis. Use this format:

...

(HTML) or

...

(ROKCANDY)

Praesent rutrum sapien ac felis. Use this format:

...

(HTML) or

...

(ROKCANDY)

Praesent rutrum sapien ac felis. Use this format:

...

(HTML) or

...

(ROKCANDY)


This is a ComponentHeading

Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede.

This is a Contentheading

Proin ac nunc eu nunc condimentum accumsan. Phasellus odio justo, euismod vitae, egestas a.

This is a H1 Header

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sit amet odio quis sapien molestie ultrices.

This is a H2 Header

Proin ac nunc eu nunc condimentum accumsan. Phasellus odio justo, euismod vitae, egestas a, porttitor

This is a H3 Header

Mauris euismod. In ac massa vitae quam tincidunt dapibus. Ut at tortor nec mi mattis blandit.

This is a H4 Header

Vestibulum posuere, lacus aliquet pulvinar faucibus, tortor urna luctus diam, vitae ultrices ante.

This is a H5 Header

Pellentesque vel enim urna, sit amet blandit ipsum. Maecenas quis sem sit amet nunc pretium mattis. Sed dapibus semper est, sed pretium erat sodales sed. Aenean hendrerit fringilla sem, et tincidunt libero ornare at.


  • This is an example of a standard list style. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu.
  • This is an example of a standard list style. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu.
  • To use this style create a list in the following format:
      bullet">
    • ....
    • ....
    • ...
    (HTML)
    .
  • To use this style create a list in the following format:
      bullet">
    • ...
    • ...
    (ROKCANDY)
    .

  • To use this style create a list in the following format:
      list-icon phone">
    • ....
    • ....
    • ...
    (HTML)
    .
  • To use this style create a list in the following format:
      list-icon phone">
    • ...
    • ...
    (ROKCANDY)
    .

  • To use this style create a list in the following format:
      list-icon quote">
    • ....
    • ....
    • ...
    (HTML)
    .
  • To use this style create a list in the following format:
      list-icon quote">
    • ...
    • ...
    (ROKCANDY)
    .

  • To use this style create a list in the following format:
      list-icon cart">
    • ....
    • ....
    • ...
    (HTML)
    .
  • To use this style create a list in the following format:
      list-icon cart">
    • ...
    • ...
    (ROKCANDY)
    .

  • To use this style create a list in the following format:
      list-icon rss">
    • ....
    • ....
    • ...
    (HTML)
    .
  • To use this style create a list in the following format:
      list-icon rss">
    • ...
    • ...
    (ROKCANDY)
    .

  • To use this style create a list in the following format:
      list-icon tags">
    • ....
    • ....
    • ...
    (HTML)
    .
  • To use this style create a list in the following format:
      list-icon tags">
    • ...
    • ...
    (ROKCANDY)
    .

  • To use this style create a list in the following format:
      list-icon write">
    • ....
    • ....
    • ...
    (HTML)
    .
  • To use this style create a list in the following format:
      list-icon write">
    • ...
    • ...
    (ROKCANDY)
    .

  • To use this style create a list in the following format:
      list-icon info">
    • ....
    • ....
    • ...
    (HTML)
    .
  • To use this style create a list in the following format:
      list-icon info">
    • ...
    • ...
    (ROKCANDY)
    .

  • To use this style create a list in the following format:
      list-icon sound">
    • ....
    • ....
    • ...
    (HTML)
    .
  • To use this style create a list in the following format:
      list-icon sound">
    • ...
    • ...
    (ROKCANDY)
    .

  • To use this style create a list in the following format:
      list-icon rightarrow">
    • ....
    • ....
    • ...
    (HTML)
    .
  • To use this style create a list in the following format:
      list-icon rightarrow">
    • ...
    • ...
    (ROKCANDY)
    .

  • To use this style create a list in the following format:
      list-icon leftarrow">
    • ....
    • ....
    • ...
    (HTML)
    .
  • To use this style create a list in the following format:
      list-icon leftarrow">
    • ...
    • ...
    (ROKCANDY)
    .

  • To use this style create a list in the following format:
      list-icon circlearrow">
    • ....
    • ....
    • ...
    (HTML)
    .
  • To use this style create a list in the following format:
      list-icon circlearrow">
    • ...
    • ...
    (ROKCANDY)
    .

  • To use this style create a list in the following format:
      list-icon dropbox">
    • ....
    • ....
    • ...
    (HTML)
    .
  • To use this style create a list in the following format:
      list-icon dropbox">
    • ...
    • ...
    (ROKCANDY)
    .

  • To use this style create a list in the following format:
      list-icon vimeo">
    • ....
    • ....
    • ...
    (HTML)
    .
  • To use this style create a list in the following format:
      list-icon vimeo">
    • ...
    • ...
    (ROKCANDY)
    .

  • To use this style create a list in the following format:
      list-icon downarrow">
    • ....
    • ....
    • ...
    (HTML)
    .
  • To use this style create a list in the following format:
      list-icon downarrow">
    • ...
    • ...
    (ROKCANDY)
    .

  • To use this style create a list in the following format:
      list-icon uparrow">
    • ....
    • ....
    • ...
    (HTML)
    .
  • To use this style create a list in the following format:
      list-icon uparrow">
    • ...
    • ...
    (ROKCANDY)
    .

  • To use this style create a list in the following format:
      list-icon person">
    • ....
    • ....
    • ...
    (HTML)
    .
  • To use this style create a list in the following format:
      list-icon person">
    • ...
    • ...
    (ROKCANDY)
    .

  • To use this style create a list in the following format:
      list-icon calendar">
    • ....
    • ....
    • ...
    (HTML)
    .
  • To use this style create a list in the following format:
      list-icon calendar">
    • ...
    • ...
    (ROKCANDY)
    .

  • To use this style create a list in the following format:
      list-icon doc">
    • ....
    • ....
    • ...
    (HTML)
    .
  • To use this style create a list in the following format:
      list-icon doc">
    • ...
    • ...
    (ROKCANDY)
    .

  • To use this style create a list in the following format:
      list-icon bulb">
    • ....
    • ....
    • ...
    (HTML)
    .
  • To use this style create a list in the following format:
      list-icon bulb">
    • ...
    • ...
    (ROKCANDY)
    .


  • To use this style create a list in the following format:
      list-icon youtube">
    • ....
    • ....
    • ...
    (HTML)
    .
  • To use this style create a list in the following format:
      list-icon youtube">
    • ...
    • ...
    (ROKCANDY)
    .

  • To use this style create a list in the following format:
      list-icon skype">
    • ....
    • ....
    • ...
    (HTML)
    .
  • To use this style create a list in the following format:
      list-icon skype">
    • ...
    • ...
    (ROKCANDY)
    .



  • To use this style create a list in the following format:
      list-icon video">
    • ....
    • ....
    • ...
    (HTML)
    .
  • To use this style create a list in the following format:
      list-icon video">
    • ...
    • ...
    (ROKCANDY)
    .

  • To use this style create a list in the following format:
      list-icon paypal">
    • ....
    • ....
    • ...
    (HTML)
    .
  • To use this style create a list in the following format:
      list-icon paypal">
    • ...
    • ...
    (ROKCANDY)
    .

To replicate, the following format: ... (HTML) or ... (ROKCANDY). The class names are listed below, such as "text-icon email".



A text item with a phone icon

A text item with a quote icon

A text item with a cart icon

A text item with a rss icon

A text item with a tags icon

A text item with a write icon

A text item with an info icon

A text item with a sound icon

A text item with a rightarrow icon

A text item with a leftarrow icon

A text item with a circlearrow icon

A text item with a downarrow icon

A text item with an uparrow icon

A text item with a person icon

A text item with a calendar icon

A text item with a doc icon

A text item with a bulb icon



A text item with a youtube icon

A text item with a skype icon





A text item with a video icon

A text item with a dropbox icon

A text item with a vimeo icon

A text item with a paypal icon

These list styles are based on the latest CSS3 techniques and are designed to work in modern browsers (will not display properly in IE6-IE8).

To replicate, use the following format:

  • ....
  • ....
  • ...
(HTML) or
  • ....
  • [li....[/li]
(ROKCANDY)
. The class names are listed below, such as "checkmark red".

  • Checkmark
  • Checkmark
  • Checkmark
  • Circle-Checkmark
  • Circle-Checkmark
  • Circle-Checkmark
  • Square-Checkmark
  • Square-Checkmark
  • Square-Checkmark
  • Checkmark Green
  • Checkmark Green
  • Checkmark Green
  • Checkmark Yellow
  • Checkmark Yellow
  • Checkmark Yellow
  • Checkmark Red
  • Checkmark Red
  • Checkmark Red
  • Checkmark Blue
  • Checkmark Blue
  • Checkmark Blue
  • Checkmark White
  • Checkmark White
  • Checkmark White
  • Triangle-Small
  • Triangle-Small
  • Triangle-Small
  • Triangle
  • Triangle
  • Triangle
  • Triangle-Large
  • Triangle-Large
  • Triangle-Large
  • Triangle Green
  • Triangle Green
  • Triangle Green
  • Triangle Yellow
  • Triangle Yellow
  • Triangle Yellow
  • Triangle Red
  • Triangle Red
  • Triangle Red
  • Triangle Blue
  • Triangle Blue
  • Triangle Blue
  • Triangle White
  • Triangle White
  • Triangle White
  • Circle-Small
  • Circle-Small
  • Circle-Small
  • Circle
  • Circle
  • Circle
  • Circle-Large
  • Circle-Large
  • Circle-Large
  • Circle Green
  • Circle Green
  • Circle Green
  • Circle Yellow
  • Circle Yellow
  • Circle Yellow
  • Circle Red
  • Circle Red
  • Circle Red
  • Circle Blue
  • Circle Blue
  • Circle Blue
  • Circle White
  • Circle White
  • Circle White

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: ... (HTML) or ... (ROKCANDY)

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: ... (HTML) or ... (ROKCANDY)

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: ... (HTML) or ... (ROKCANDY)

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: ... (HTML) or ... (ROKCANDY)

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: ... (HTML) or ... (ROKCANDY)

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: ... (HTML) or ... (ROKCANDY)

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: ... (HTML) or ... (ROKCANDY)

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: ... (HTML) or ... (ROKCANDY)

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: ... (HTML) or ... (ROKCANDY)

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: ... (HTML) or ... (ROKCANDY)


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. Inset Right TitleYou will need to use the following formatting: .... ... some content ... (HTML) or Inset Right Title ... some content ... (ROKCANDY) 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. Inset Left TitleYou will need to use the following formatting: .... ... some content ... (HTML) or Inset Left Title ... some content ... (ROKCANDY) 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.

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.

This is a sample of the Approved style. To replicate, use the following html:

....

(HTML) or

...

(ROKCANDY).

This is a sample of the Attention style. To replicate, use the following html:

....

(HTML) or

...

(ROKCANDY).

This is a sample of the Notice style. To replicate, use the following html:

....

(HTML) or

...

(ROKCANDY).

This is a sample of the Alert style. To replicate, use the following html:

....

(HTML) or

...

(ROKCANDY).


If you are using the TinyMCE editor, go to Extensions → Plugin Manager → TinyMCE 2.0 → Set Code Clean-up on Save to Never.

Typography - RokCandy

In this example, we will use the Attention Span Style - Syntax: [div class="attention" class2="typo-icon"]...[/div] syntax.

  • Go to Content → Article Manager → Select an Article.
  • Insert [div class="attention" class2="typo-icon"] .... some content .... [/div]
  • Save

Typography - HTML

In this example, we will use the Attention Span Style - Syntax:

...
syntax.

Content Editor

  • Go to Content → Article Manager → Select an Article; or Extensions → Module Manager → A Module, for a custom module.
  • Click the HTML mode or equivalent in your editor
  • Insert
    ... some content ...
  • Save

No Editor

  • Go to Content → Article Manager → Select an Article; or Extensions → Module Manager → A Module, for a custom module.
  • Click the HTML mode or equivalent in your editor
  • Insert
    ... some content ...
  • Save

Note, with the Content Editor (WYSIWYG) enabled, you need to enter HTML mode.

Styled Extensions

Demo Utilities



Demo Utilities

image 

RokCandy

RokCandy is a snippet inserter, that transforms custom syntax into complex, HTML elements upon rendering of the content item.


image 

RokPad

RokPad is a code editor for Joomla, providing a rich UI and advanced features for HTML code editing in Joomla content articles.


image 

RokBox

RokBox, is a Mootools powered, popup plugin, that can load images, videos, web pages and other elements in a styled popup.


image 

RokGZipper

RokGZipper is a performance utility that compresses JS and CSS files into one, reducing HTTP request and increasing speed.

Go to Extensions → Template Manager → (J15) rt_radiance_j15 or (J17) rt_radiance. Mouseover the labels to view a description of each parameter.

General Documentation

There are several sites which offer a range of useful resources for using Joomla, beyond the specifics of the template:

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

Step 1 - Installation

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

rt_radiance_j15.tgz rt_radiance.zip ImageImage

Step 1 - Template Default

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

rt_radiance_j15 rt_radiance - Default Master ImageImage

RocketLauncher Instructions

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

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

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

Step 1 - Upload

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

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

Step 2 - Installation

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

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

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

  • (J15) Extensions → Template Manager → rt_radiance_j15 → Menu → Menu Control → Set Menu Type
  • (J17) Extensions → Template Manager → rt_radiance → Menu → Menu Control → Set Menu Type

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

Fusion with MegaMenu

image

Fusion Menu is a menu theme of the RokNavMenu extension, the addon that drives all RocketTheme template menus. It is primarily a javascript enhanced CSS dropdown menu, that combines standard suckerfish type functionality with animations, transitions and other advanced effects powered by Mootools.

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

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

Basic Fusion Parameters

  • Subtext is the option that allows you to insert additional text to the Menu Item Title. There is separate styling for this, making it useful for adding brief descriptions to menu items.
  • Menu Icon is the option that allows you to insert an inline icon / image to the Menu Item.

Advanced Fusion Parameters: Columns

Menu Columns

Columns of Child Items allows you to determine how many columns the Fusion dropdowns are presented in. You can have anywhere between a single dropdown to a four column dropdown.

Item Distribution

Item Distribution allows you to control how the menu items are ordered in the dropdowns:

  • Evenly: If there are 7 menu items in 3 columns, Fusion will allocate a 3,2,2 distribution - trying to equalize each dropdown.
  • Order: If there are 7 menu items in 3 columns, Fusion will allocate a 3,3,1 distribution - maintaining the item ordering.
  • Manually: Determine the exact distribution of items across all columns in the Manual Item Distribution field. For example, if there are 7 menu items in 3 columns, you can specify a 4,2,1 distribution.

NOTE: If your Columns of Child Items setting is configured to be 2 or more columns, you will need to manually set the column widths and distribution, as outlined below. The default is 180px which is too small for multiple columns.

Drop-Down Width (px)

Drop-Down Width (px) determines the total width of the dropdown, regardless of how many columns are shown. This option is to be used in conjunction with Column Widths (px)

Column Widths (px)

Column Widths (px) determines the width of each Column. Separate each width by a comma. The final column's width is determined automatically. This option is to be used in conjunction with Drop-Down Width (px)

Below are some example configurations:

  • Drop-Down Width: 480px: 160,160. Fusion automatically calculates the final width as 160, so in practise, 160,160,160 is the actual distribution.
  • Drop-Down Width: 600px: 160,160. Fusion automatically calculates the final width as 280, so in practise, 160,160,280 is the actual distribution.

Advanced Fusion Parameters: Groupings

What is Grouping?

Group Child Items changes the behaviour of child items in the dropdown menus, instead of creating a dropdown for the immediate sublevel, this option places them inline. See below for an illustrated example of the differences:

Configuration

NOTE: Grouping cannot be applied to root items, only child items.

Set Group Child Items to Yes to activate the mode. The sublevels well then appear below the parent menu item in a categorical type structure.

Advanced Fusion Parameters: Modules

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

  • Inline Modules: Set Child Item Type to Modules to load all modules setup on your Joomla site in a list. Select the module you wish to display in the dropdown.
  • Inline Positions: Set Child Item Type to Modules Positions to load all module positions on your Joomla site in a list. Select the position you wish to display in the dropdown.

Splitmenu

image

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

  • Subtext is the option that allows you to insert additional text to the Menu Item Title. There is separate styling for this, making it useful for adding brief descriptions to menu items.

Code Modification: Remove the Menu in the Title

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

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

Change

name.' '.JText::_('Menu'); ?>

To

name; ?>

Or delete the entire line.

How to create Child / Sublevel menu items

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

ImageImage

ImageImage

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

Step 1 - Open the File

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

Step 2 - Text/Slogan/Icon Editing

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

LogoLogoLogo


Logo

Step 3 - Slice Modification

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

Logo

Step 4 - Export

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

Step 5 - Multiple Frames/States

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

LogoLogo

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

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

Color Chooser Settings

A Color Chooser template uses CSS color values, combined with transparent overlay images, to determine its color and style. Therefore, you can change the entire color scheme via the Gantry Administrator. The available options are outlined below:

  • Top, Main, Accent, Content & Bottom: Background, Overlay (Light/Dark), Text & Link
ImageImage

Background Picker

The Background Picker allows you to load a background image, either through RokGallery or the Joomla Media Manager.

Image

  • Files Window: View all individual images from RokGallery
  • Galleries Window: View all galleries from RokGallery
  • Selection Window: Select the individual slice of a file
  • Media Manager: Load an image from the Media Manager
Image Image

Image Image

Other Style Settings

  • Load Transition: On - Off; Enable or disable the page loading transition animation effects
  • Fixed Header: On - Off; Enable or Disable a fixed floating header section.
  • Read More Style: Button and Link; Set the read more link styling for the template
  • Web Fonts: On - Off, Google Font Directory; WebFonts allow you to use 3rd party WebFonts from providers such as Google. You must SHOW then APPLY before the new fonts will show up in the Font Family dropdown.
  • Font Settings: Select a font family from the available options and also choose a default font size
    • Font Family: radiance, Geneva, Optima, Helvetica, Trebuchet, Lucida, Georgia, Palatino, or Various Google Fonts (dropdown)
    • Font Size: Default, Extra Large, Large, Small, Extra Small (dropdown)

Assigning a Style to a Specific Page

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

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

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

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.

Who's Online

We have 12 guests and no members online