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.

How to override Joobi themes

  • Create a new directory in your template

Joomla: [yoursite.com]/templates/[Your-Joomla-Templates]/joobi

WordPress: [yoursite.com]/wp-content/themes/[Your-WordPress-theme]/joobi

Joomla: COPY the folder /joomla30

WordPress: COPY the folder /wp40

  • PASTE your copied folder into your newly created directory

Joomla: [yoursite.com]/templates/[Your-Joomla-Templates]/joobi

WordPress: [yoursite.com]/wp-content/themes/[Your-WordPress-theme]/joobi

  • Rename the folder name

Joomla: /joomla30 to /joobi

WordPress: /wp40 to /joobi

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

Joobi Theme debug

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

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.

Auction: [YOUR-TEMPLATE]/joobi/node/auction Product: [YOUR-TEMPLATE]/joobi/node/product Download: [YOUR-TEMPLATE]/joobi/node/download Subscription: [YOUR-TEMPLATE]/joobi/node/subscription

Joobi PHP Override

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.

Joobi CSS Override

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

Note: A Catalog is the listing of all different types of product.