Setting up our demo

This template has two different layouts for listings.
One for the frontpage and one for the category/categories.

For the frontpage grid layout we need four Primary items with Medium image size in a single column. The grid layout of the frontpage inherits its parameters from the menu item.

For the category listings we use:

  • two Leading items with Medium image size in two columns,
  • four Primary items with Small image size in a single column.

Image Sizes

The following image sizes are recommended for this template:

  • XSmall 100
  • Small 240
  • Medium 400
  • Large 778
  • XLarge 1200
  • Generic 300
  • Category Image 100
  • Avatar Size 100
  • Commenter Image 108

Module Suffixes

  • .floatLeft, .fLeft adds a float:left to a block.
  • .floatRight, .fRight adds a float:right to a block.
  • .center, .text-center adds a center alignment to a block.
  • .redModule adds a red (#e03720) background color on any sidebar module, like Agenda and Most Commented modules.
  • .noise adds a transparent noise to the background. It is not intrusive to the background color and can be used with a variety of combinations.
  • .white, .whiteBg adds a white (#ffffff) background color on any sidebar module.
  • .whiteModuleShadow adds a white background color along with a shadow, like all sidebar modules under K2 Modules section on the Demo site.
  • .shadowed adds a shadow without any background color.

Template Specific Module overrides

K2 Content Modules
  • Agenda
  • Default
  • DontMiss
  • Grid - Editors choice
  • LatestInterviews
  • LatestVideos
  • MostCommented
  • Opinion
  • Quote
  • Scroller - Scroller module 1 - 2 (Latest Releashes, Upcoming tabs)
  • Slideshow
NuContent Modules
  • Agenda
  • Default
  • DontMiss
  • Grid - Editors choice
  • LatestInterviews
  • MostCommented
  • Opinion
  • Quote
  • Scroller
  • Slideshow

Extra fields

For better content management we have set up some Extra Fields that are associated with specific categories.
Let's start with the Quotes category. The Quotes category is associated with the Quotes K2 Content Module which is located in the Homepage of the Demo site, at the bottom, next to the About us block.
For this category we have set up an Extra Field Group called Quotes which includes one Extra Field, Text Field, the Quoter. The Quoter name you see on the module, is this Extra Field.

Another category that uses Extra Fields is the Interviews category. This category is associated with the Latest Interviews K2 Content Module which is located in the Homepage of the Demo site, right under the scrolling tabs and above the component list. For this category we have set up an Extra Field Group called Interview details which includes two Extra Fields. One is the Interviewee Name and the other is Band/Organ. Both are Text Fields and are shown under the photo of the artist, i.e. James Hetfield (Interviewee Name), Metallica (Band/Organ). In the item page they are located under the header Additional Info.

We have also created another Extra Field Group named Album Review Details. This group is assigned to the Reviews & the Latest Releases categories and it includes the following fields:

  • Album Date
  • Rating
  • Album Name
  • Band Name

Color variations

This template comes along with five preset color variations, blue, black, green, purple, and red (default color) and a custom.

To choose the one that suits you best, navigate to Extensions → Template Manager, choose the nuMuzik template and under the Template Specific tab you will find the Color Variations section where you can either choose one of the preset colors or create your own theme by assigning colors to the color pickers (Custom Color 1-4) (or just enter the hex of the color, i.e. #FFFFFF).

The colorpickers can be used in two distinct ways:
You can either select a preset color variation like blue and modify the base color or select the custom color profile and set the base color. If you choose the first option you will keep the blue iconset and complementary colors, whereas if you choose the second option, the default iconset will be used. 

Example: If you want a darker blue or red for your main color you have to pick first the according color variation and then select your desired color from the colorpicker. If, on the other hand, you want a completely different color (eg. yellow) you should select the custom option and then set a color from the colorpicker. This will output a yellow color as the site's main color, a neutral complimentary color and the default iconset (red).

Note: The iconset used is supported for the preset colors only.

Setting up the tabs

On the frontpage there are two sections that use tabs. The upper one is the one that includes the Scroller modules and the lower one is the one that includes the Latest Videos modules. The upper section uses the positions nuMuzik_Upper_Tabs1 and nuMuzik_Upper_Tabs2 and the lower section uses the positions nuMuzik_Lower_Tabs1 and nuMuzik_Lower_Tabs2.
After assigning the modules to those positions you will notice that the tab headers have not been changed. Due to the limited space and wanting to preserve a somehow logical module naming, the tab headers are NOT the module titles.

To name the tabs go to Extensions → Tempate Manager, locate your template, open it, and name the tabs through the appropriate fields under the Template Specific tab.

Newsletter module

This template uses the TinyLetter Subscribe by JoomlaWorks extension as a newsletter mechanism. All you have to do is open a free account to TinyLetter and add the username in the module parameters.

Commercial Extensions

Simple Image Gallery Pro - After installing it go to the Extension's parameters Layout template for image galleries and choose the one named after the template, i.e. nuMuzik.

Visual Walkthough