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: COPY the folder
WordPress: COPY the folder
PASTE your copied folder into your newly created directory
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 files are organized in several different directories, as follows:
/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.
/cssfolder contains all the front-end css files
/fontscontains the needed font files
/imagesfolder store all the Application images
/nodefolder contains all Joobi application user interface that can be modified. Each node specify a different functionality. The file in those node are application specific
/database & /xmlare 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
Note: A Catalog is the listing of all different types of product.