Welcome Guest! Login
0 items Join Now

Nuance: Recreating the Demo

Your Guide to Recreating Elements of the Nuance Demo for Joomla


Recreating features of the demo site used to show off some of the more interesting aspects of Nuance can be done fairly easily. All you need is the right extensions and settings, and you should be able to reproduce most (if not all) of the elements found in our demo site.

Below, we will break down some of these elements and give you the information you need to know to recreate them on your own site using the Nuance Template.

Keep in mind that a lot of the detail that makes our demos look so good is the result of many hours of hard work by our team, and some of them will require a moderate level of experience working with the Joomla back end. We have added most of these elements into the template's core files in order to make them easily accessible without having to edit any code.

NOTE: We recommend downloading a copy of the RocketLauncher whenever you are attempting to replicate demo content. This allows easy referencing, whether on your site in a subdirectory, development server, or on a localhost. This will allow you to see all of our demo content in context, making it easier to replicate.

Module Settings

Below, you will find the module placement and settings for the various module positions as they appear on the front page of our demo. Not all of these position assignments are unique to the front page.

Top A - Breadcrumbs
Header C - Custom HTML
Showcase A - RokSprocket Features Scroller
Feature A - RokSprocket (Headlines)
Feature B - Custom HTML
MainTop A - RokSprocket (Grids)
MainBottom A - Custom HTML
ExpandedBottom A - Custom HTML
Extension A - Custom HTML
Extension B - Custom HTML
Bottom A - Custom HTML
Bottom B - Custom HTML
Bottom C - Custom HTML
Footer A - Custom HTML
Footer B - Custom HTML
Footer C - Custom HTML
ExpandedFooter A - Menu

We have detailed how to recreate the individual modules pictured above in the links below.

  1. Top A - Breadcrumbs
  2. Header C - Custom HTML
  3. Showcase A - RokSprocket Features Scroller
  4. Feature A - RokSprocket (Headlines)
  5. Feature B - Custom HTML
  6. MainTop A - RokSprocket (Grids)
  7. MainBottom-A - Custom HTML
  8. ExpandedBottom A - Custom HTML
  9. Extension A - Custom HTML
  10. Extension B - Custom HTML
  11. Bottom A - Custom HTML
  12. Bottom B - Custom HTML
  13. Bottom C - Custom HTML
  14. Footer A - Custom HTML
  15. Footer B - Custom HTML
  16. Footer C - Custom HTML
  17. ExpandedFooter A - Menu

Recommended Extensions

Here is a list of RocketTheme extensions used to create the demo version of Nuance:

Many of these extensions are included with the Nuance RocketLauncher, and can be downloaded and installed individually by going to the RocketTheme website.

Recreating the Front Page

The front page of the Nuance demo sits apart from the rest of the page layouts in that it features the latest and greatest features of the template. It is because of this that several module and layout overrides were done. In this section, we will break down the settings you will need to recreate elements present in the front page of the Nuance demo.

Template Settings

The first thing you will need to do in order to set your front page apart as it appears in the demo is to create a style override. This can be done by navigating to Administrator -> Extensions -> Template Manager and selecting the template you wish to change. Once you have checked the box next to the template, you can click the Duplicate button to create a second copy of the template. This will become the Override while the primary copy of the template remains the designated Master.

Only options that are different from the Master copy will take hold on the menu items you have assigned to the override. In this case, you will be assigning the front page to the override as we have in the demo.

It would be a good idea for organization to name this override something like Nuance - Home as it would be used only for the front page of your site.


The next step you will need to take in creating your Template Settings override is to assign the Front Page style to the site's home page.

You will need to start by navigating to Admin > Extensions > Template Manager > (Your Home Override) and select the Assignments tab. Under the Main Menu list, you will want to select Home.

Doing this will assign the style to the home page. This will allow the style to cover all access scenarios that would lead a user to your site's main home page.

You can find more information about the entire override breakdown for both the front page and our default settings in the demo by visiting the template style portion of this tutorial.


Text Separator

The search icon that appears in the menu with a drop-down search field is a Text Separator menu item. The Custom CSS Class listed under Dropdown Menu Options is hidden-phone menu-item-search. The menu-item-search class hides the text and adds the magnifying glass icon.

You will also need to assign a mod_search module as the Child Module in the Dropdown Menu Options page. This gives it its search functionality.

To do this, navigate to your main menu in the backend of Joomla by going to Admin > Menus > Manage > Your Menu and add a new Text Separator item.

We added a mod_search module as a Child Module in the Dropdown Menu Options tab.

This module was created with the following settings:

Option Setting
Title Menu Search
Show Title Hide
Position menu-search
Box Label Blank
Box Width 20
Box Text Blank
Search Button No
Button Position Right
Search Button Image No
Button Text Blank
OpenSearch Autodiscovery Yes
OpenSearch Title Blank
Set ItemID None Selected

Found errors? Think you can improve this documentation? Please edit this page. You can also view the history of this page.