General principles and concepts of JBZoo customization

9.0/10 rating (2 votes)

It is important to remember that JBZoo is a content constructor. It allows you to solve 80% of catalog creation tasks simply by mouse clicking. To solve other 20% you will probably need to modify templates. You shouldn't be afraid of this - it's a common task when developing websites.

All are templates located in media/zoo/applications/jbuniversal/templates/catalog/renderer/. In this article we'll replace media/zoo/applications/jbuniversal/ part with .../

After this you should read about the category template.

What affects JBZoo appearance?

JBZoo by itself almost doesn't apply any styles. All that comes with its CSS is an appearance of some basic elements (columns, some margins, optional borders, buttons etc.). These styles are declared in .../assets/css/jbzoo.css

Most styles will be applied from your main Joomla template. Semantic layout of all templates contributes to this (if it's a heading then it's h1, subheading is h2, texts are in paragraphs, table is table etc.).

Attaching your CSS and JavaScript

Create new files (case sensitive!):
.../assets/css/jbzoo..<APPLICATION ALIAS>.css
.../assets/js/jbzoo.<APPLICATION ALIAS>.js

You can find or change application alias in the config

Application alias

Also, you can include additional CSS for a search form:
.../assets/js/jbzoo.filter.<FORM TEMPLATE ALIAS>.js
.../assets/css/jbzoo.filter.<FORM TEMPLATE ALIAS>.css

These files will be loaded automatically if the application needs them on the current page and if they are not empty. It is recommended to use only English letters without whitespaces or special symbols as application aliases ().

Recommendations for working with CSS and JavaScript

When you work with CSS, begin all your selectors with .jbzoo-app-<APPLICATION ALIAS> class. For example:

.jbzoo-app-flat .photo-agent {
    float: left;
    margin-right: 10px;

JBZoo will generate a lot of different classes for a convenient work with layout. We recommend using <div> tags for your layout.

Working with Javascript:

1. Use jQuery. Wrap your code in this structure:

    // Your code. It will be accessible through "$" variable

2. Don't use several jQuery includes on one page. The one which is loaded by ZOO is usually the latest version. Otherwise, you risk breaking all widgets on your website.

In order to change application icon in the control panel create a 64x64px PNG file in this location (case sensitive!):

.../assets/app_icons/<APPLICATION ALIAS>.png

Changing JBZoo templates without hacks

For example, we want to make our own category template. It is located here:


To make a custom template for the specific application, copy this file to the same folder and name it <APPLICATION ALIAS>.php

Now it will be loaded automatically. And you can modify it however you wish without worrying that it will be overwritten during update.

Allowed file names for templates

This question is closely related with the previous one. For example, you can use following names for categories (ordered by priority):

  • _default.php

Thus, each category can have its own template.

Notice. Not all templates have so many variants because not all entities have alias or ID.

<APPLICATION ALIAS>.php definitely works with all templates:

You can also use one custom template in several places at the same time without copying it like in the previous example. In order to do this, you can explicitly select it in the category or application settings.

How to change a wrapper around each item?

Changing wrapperEach item may have a wrapper tag which adds a lot of classes for your convenience. This tag is set in the application settings (it is <div> by default.).


Still gotta questions, who can help me?

Visit our special JBZoo tech support forum which is specifically meant for JBZoo so the priority of the response and its promptness are much better there than in any other place. With inactive account with a “Plus” sign in a tariff plan you can ask for support in one of these sections or use any of our contacts.