As you start to incorporate your site template into Joobi application, you might find that you want to override the default theme that comes with the application. There are provides two ways to override the theme:

Theme Cloning (refer to theme customization topic)

Template override - simply copy-and-paste the default theme in to your own website template, this is often used by template companies who wants to create compatibility with Joobi Applications.

Following above modifications, your custom theme modifications will not be overridden during update. However, the updates and fixes to the core theme have to be manually merged over to the copied/cloned theme.

Rename the folder name

The new Joobi folder will now be used instead of the core Joobi files.

To verify that Joobi applications uses the newly created folders from [Your Template], check the elements using firebug to see if file is being used.

Below screenshot uses Joomla 3 framework template and the new theme folder has been called, from there you can start your customization!

It is highly recommended that you delete the folders and files that you are not customizing. So that it use the default Joobi elements and get updated with new release

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.

PHP override example:

You want to modify the product page "product_page_item.php". Instead of editing the core Joobi files, you can go directly to [YOUR-TEMPLATE]/joobi/node/product/view/product_page_item.php so that it doesn't get overwritten when Joobi is updated.

You need to edit the correct file the corresponds to the view or application you want to customize.

CSS override example:

You want to change the look and feel of the product page "style.min.css". Instead of editing the core Joobi css files, you can go directly to [YOUR-TEMPLATE]/joobi/css/style.min. that it doesn't get overwritten when Joobi is updated.

For instance, you want to modify the design of the catalog listing, you can go directly to [YOUR-TEMPLATE]/joobi/node/catalog/css/style.min.css