Client Documentation

Another change to the way our themes work is that much of the logo functionality has been moved out of the template. Previously the logo content was generated and controlled via the template settings however now the logo is controlled via a custom html module position.

Create the logo content.

The first part of the step is to create a new custom html module.

Once you have created a custom html module and published it we need to assign the logo position in the template's layout schematic. Just in the same way we assigned the main content or sidebar blocks to the page we also need to assign the logo to a position. By default the logo is positioned in the position that you see on the demo, however this is easily changed to a new position as per the screen shot below.

Default logo position

 

The logo font is controlled under the Theme menu item in the template administrator. The template automatically targets the module that is positioned to the logo position with the required settings to allow you to control the font-family used for this area of the template.

The offcanvas panel is a secondary content area that is hidden from the page until a user clicks on the off canvas toggle button. In the Client theme this toggle button is positioned in the navbar to the right of the logo and search buttons.

Offcanvas settings

The off canvas settings are available under the addon panel in the template admin.

The off canvas settings are available under the addon panel in the template admin.

 

Enable the off canvas sidebar

In addition to needing to publish a module to the off canvas module position you also need to ensure that the off canvas function is enabled.

Off-canvas Effect

You can choose from fourteen different animations for the off canvas effect.

Off-canvas Position

This setting determines the position of the page the off canvas is located. Left is to the left of the page while right is to the right of the page.

Off-canvas Trigger

This is the text used to accompany the button that triggers the off canvas effect.

Off-canvas Title

This is the text that is placed at the very top of the off canvas area above the off canvas content.

 

 

About module class suffixes

Module classes are a core Joomla functionality that allow the user to specify how a specific module will appear. The class itself is added to the module in the module parameters.

Combining module classes:

Module classes can be combined to take advantage of multiple complementary styles. An example of a module class suffix using a combination of classes: "hot primary1 top50".

Module class examples

Basic classes

• 
•  

 

Border classes

• 
•  

 

Inset classes

• 
•  

 

Icon classes

• 
•  

 

Hot and new classes

• 
•  

 

Corner classes

• 
•  

Very top right menu - This is a core Joomla menu module published ot the top4 position. On small screens this position is designed to float to the left and on larger screens it is designed to float to the right.

Logo - The logo is a module position that uses an h2 tag to display the text Jacqui Smith. The width and font settings for the logo position are controlled via the template parameters. Please view the layout tab for more information.

Search - The search position sits to the right of the logo. When you publish a search module to this position an icon for the search functionality is automatically displayed. When the user clicks on this item the search bar expands to reveal the input area for the search form.

Offcanvas Menu trigger - This is the menu icon that sits to the right of the search icon. This is automatically displayed when you use the off canvas menu or publish a module to the offcanvas position.

Social icons - The social icons are an instance of the Zensocial module which is published to the social position. When a module does not exist in this position the main content area expoands to fill the entire width of the page. The width of the social position is determined by the Theme Mafic setting which call navbar height. The height of the logo bar and the social icons column are equal.

Custom HTML module published ot the banner position - The "Building steam with a grain of sand" text is a custom html module published to the banner position.

Market Health and Future stock blocks - These two blocks of content are custom html modules published ot the grid1 and grid4 positions. They use the nopadding module class suffix which targets the first paragraph tag (in this case an image) and removes the padding around that image.

Tabbed layout - The items marked Core proficiencies, meet the team and Passionate technicians are a collection of modules that are published to the tabs position. When any modules are published to this position the modules are automatically displayed in a tabbed layout. 

Core Proficiencies - This module is an instance of the Skillset module using the circular layout.

Meet The Team - This is an instance of the Zentools module using the list layout

Passionate Technicians - This is a custom html module.

By the Numbers - This is an instance of the Skillset module published to the grid6 position. It uses the skillbar layout.

Biostats - This is an instance of the skillset module using the count up layout.

Galleries - The two blocks of images are two separate instances of the Zentools module using a grid layout. The two modules reference two separate folders.

Frequently Asked Questions - This is an instance of the Zentools module using the accordion layout. It is published to the grid13 position.

Come Find Us - This is an instance of the Maps2 module published to the grid17 position. It uses the module class nopadding.

Like to know more and Need to talk to us - These two modules are custom html modules published to the bottom1 and bottom2 positions. 

Footer Menu - This is an instance of the core Joomla menu moduel published ot the footer position.

 

• Zentools - Used to create slideshows, grids, carousels etc.
  Demo / Documentation / Download
• JB Type - Typography and style plugin.
  Features / Download
• Maps2 - Enhanced google maps module.
  Features / Download
• Skillset - Animated graph module for statistics, characteristics and competencies.
  Features / Download

In order to enable the accordion menu on your site you need to follow three key steps.

Enable the accordion in the template settings

The accordion settings can be found in the template administrator under the effects panel. Ensure that the "enable accordion" menu item is enabled.

Other accordion menu settings explained:

• Always open first item

  This setting means that when the accordion is loaded on the page the first item in the menu will always be open.

• Show active item

  When enabled this option ensures that the active menu item will always be open on the page.

• Accordion Type

  The Accordion menu type means that when one menu item is opened then the previously opened item is closed. While the panel option means that when menu items are clicked open items remain open. In order to close each menu level the user needs to click on the top level menu item for that accordion level.

Add a module class to your menu

Now that the accordion menu scripts have been added it is necessary to add a module class suffix to the menu module. Adding the "accordion" module class to the module class suffix will automatically apply the correct code required to create the accordion menu.

Use text separators or menu headings for top level menu items

The accordion menu is designed to be flexible enough to accomodate both normal content links or accordion triggers for any of the top level menu items.

Joomla provides two types of menu items that can be used as top level menu items in the accordion menu.

The Text Separator or menu heading menu type will both function as triggers for the accordion menu.

A typical accordion menu setup looks like the example in the screenshot below.

• T3 mega menu settings
• Adding icons to your T3 mega menu
• Adding a module to your T3 mega menu
• How to create a multi-column mega menu with T3