1. Home
  2. Documentation
  3. Joomla
  4. jMarket
  5. Design Customization

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

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

Following above modifications, your custom theme modifications will not be overriden 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

  • Navigate to /joobi/user/theme/site/

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 t3 framework template and the new theme folder has been called, you can now 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-override

Joobi theme folder structure

blueprint - this folder include many of the user interface functionality like: buttons, carroussel, menu, countdown, etc... Those functionality are used through out the Apps and are not Application specific.
css - this is where you can find all the front-end css files
fonts - the fonts the applications uses
images - where the images the applications are store
js - where all Joobi application JS files are here for you to modify
node - where all Joobi application user interface can be modified. Each node specify a different functionality. The file in those node are application specific
database & xml - those two folders should be ignored, they are not relevant

joobi-folder-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-node-stucture

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.css so that it doesn't get overwritten when Joobi is updated.

joobi-css-main

For instance, you want to modify the css 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 different type of products.

joobi-node-cat