Highline Documentation

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

• Main Menu. The main menu is a core Joomla menu module that is published to the menu position. Please note that to render the superfish menu here you need to ensure the superfish option is enabled in the template but you do not need to add the module class -superfish.
• Logo. The logo is an image type logo published to the setting "On same row as nav" using center positioning. The logo width has been assigned a width of 4. 
• Social Icons. The Social icons are published to the menu position and aligned to the right. These icons are controlled via the template parameters under tools > social icons.
• Slideshow. The slideshow is an instance of the Zentools module using the slideshow layout. The demo draws images from a folder and the links are assigned using the external link function in the zentools module. The settings to recreate the layout for the slideshow can bee seen in the screenshots below.
• Grid4. The items below the slideshow position is another instance of the zentools module and is published to the grid4 position. It uses the Zentools grid layout with filters enabled and the settings can be seen in screenshots below.
• Bottom1. A custom html module containing the text "Highline - Building relationships through better communication." is published to this position. 
• Footer. Joomla menu module is published to the footer position without any specific setting.
• Template width. The demo site uses two widths - 90% is assigned to the frontpage view while the default template width is 960px.
• Contact page.  As described above the contact page, has a published module position called contact - this is ideal for the insertion of a google map.
• Toggle menu. As described in the responsive menu options in the core framework the togglemenu position can be used to publish a menu or any module of your choosing to display on mobile devices.

 

Frontpage category menu filter

There is second menu-like category filter under slideshow. This menu is created by ZenTools and will not be visible in case you have any java-script issue or conflict on your site. Steps to troubleshoot this:

• 1) Reinstall ZenTools with latest release (do not uninstall ZenTools before new installation)
• 2) Resolve jQuery issues (see here: http://docs.joomlabamboo.com/getting-started/how-to-resolve-jquery-conflicts)

Please, do not forget to enable Category Filter inside ZenTools module Filter Options.

 

Zentools Slideshow settings

The following settings were used to create the zentools slideshow published to the grid1 module position.

 

Zentools Masonry Grid4 settings

One of the key features of this theme on the frontpage is the Zentools derived Masonry layout. As of Zentools v1.5.5 we added the ability to target featured items in the zentools layout with a specific class called "featured". Not all themes take advantage of this class and while the module itself does not provide any extra styling it is now possible for us to target featured items in the layout using specific css.

 

 

Different colors of article titles inside ZenTools Masonry in Grid4 module position are based on category name (not alias). In case you will use your own category names you need to add your own styling for it. See here how to add own styling.

Here is example of code for 1 category. You can duplicate this and change CATEGORY to your own category name -> so instead of .CATEGORY you can have .cars or other name of your category:

 #grid1wrap .zentools .CATEGORY .zencategory span, #grid1wrap .zentools .CATEGORY .zencategory { background-color: #87A6CB; }

• Zentools - Used to create slideshows, grids, carousels etc.
  Demo / Documentation / Download
• JB Type - Typography and style plugin.
  Features / Download
• JB Maps - Module used to display google map
  Features
• jFlickr - jQuery based Flickr module.
  Features

The screenshots below are taken from the modules used in the demo and quickstart packages for this template.