Understanding Joobi Theme System

Joobi theme system is built using Twitter Bootstrap framework, which allow you to customize the look and feel of your store and easily integrate it with an existing website design.

Bootstrap 3

Twitter Bootstrap is the most popular front-end framework for developing responsive, mobile first projects on the web. If you are running a Bootstrap 3 base website template, Joobi products will automatically adapt to your website look and feel (buttons and text colors and sizes).

Joobi uses Bootstrap 3 for both its front display and back administration default templates.

Warning: Joobi uses an unmodified files provided by Bootstrap http://getbootstrap.com, however there are occasions that your template providers start to remove or edit core Bootstrap files that they do not need in their templates which could cause Joobi Applications to look awkward. If this happens to you, please contact your template provider so they can address the issue. It is not a good practice to modify your core Bootstrap files, it will be overridden when you update.

Default Themes

After a successful install of any Joobi product, two themes are installed automatically to give the product admin and front-end area a fresh and professional look.

Front Themes

  • Joomla 3.2 Responsive Theme is visible only to Joomla installation.

  • Virtuemart Theme is a starter theme that you can fully customize to integrate it with your Virtuemart designed Joomla template.

  • Wp20 is a Bootstrap base template and visible only to WordPress installation.

Admin Theme

  • Joomla 3.2 Responsive Admin Theme

The default themes are easily customizable without the need of any HTML or CSS knowledge using the built-in graphical edition, please refer to article "View Customization".


Skins are a bundled free bootstrap themes from bootswatch.com, it's a collection themes which are available in many different colors. Enabling the skins into your default themes will over rule the standard theme to a more beautiful looking store.

Skins are useful if you are using a template that is darker or which has very bright colors. For example, you can use darkly skin if you have a black Joomla or WordPress theme to seamless integrate the design without the need to touch the code.

Note that the skin can overwrite the behavior and display your Joomla template not just the built-in Joobi theme.

Theme Structure

Theme files are organized in several different directories, as follows:

The /blueprint folder include many of the user interface functionality like: buttons, carousel, menu, countdown, etc... Those functionality are used through out the Apps and are not Application specific.

  • The /css folder contains all the front-end css files

  • The /fonts contains the needed font files

  • The /images folder store all the Application images

  • The /js folder contains all Joobi application Javascript files that you can modify

  • The /node folder contains all Joobi application user interface that can be modified. Each node specify a different functionality. The file in those node are application specific

  • The /database & /xml are folders should be ignored, they are not relevant

You do not have to use your FTP to access these files. You can easily access them via admin area >> Tools >> Themes >> Edit Theme.

Joobi Theme Structure


View provide the base structure that wraps the front-end of the store. You can modify the views of your strorefront without writing any single piece of code.

For example, in the registration page you can change the element Tab Container to Panes and make it in 2 columns instead of 1 only without any PHP skills, please refer to topic "View Customization".


An element is the what page is composed of. For example if the page is a list of items, an element in that case will be a column. If the page is a form, then an element will be a field of that form.


To avoid upgrade issues it is advised that you do not edit the original core files. Rather you should use them as a point of reference since the original files are always updated when you update your Joobi products which contain all theme enhancements.

Best practices

Best practices that you should follow when customizing the default theme.

  • Always CLONE the theme if you want to change/add a line of code.

  • Do not edit the files if you are not an experienced designer.

  • Whenever possible, minify your css after customizing them.

  • Do not edit the original theme files directly in your FTP, always clone or use Template override.

  • Always disable your browser's cache when developing.

  • Make sure to always produce a clean and readable code, making it easy to maintain for anyone in the future.


Joobi does not guarantee any kind of design assistance. We expect everyone to have a solid technical grounding.

Custom Design

We are constantly working hard to make Joobi products easier for you to modify the design without needing to know HTML and CSS, however there are still advanced changes that can only be done through modifying the code directly. Customizing your store design beyond the default theme that we provide is beyond our scope of support.

Making the best of the themes feature requires some experience with CSS and HTML. If you're looking for a knowledgeable individual to help you out, check out below popular freelancing websites.

  • odesk.com
  • elance.com
  • freelancer.com
  • www.simplyhired.com
  • www.guru.com