Joobi theme system is based on Twiiter Bootstrap, which allow you to customize the look and feel of your store and easily integrate it with an existing website design. 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 template, Joobi products will automatically adapt to your website look and feel (buttons and text colors and sizes).

We are constantly working hard to make our products to make it easier for you to modify the design without needing to know html/css code, 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

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.

Frontend: Joomla 3.2 Responsive Theme
Admin Theme: Joomla 3.2 Responsive Admin Theme

The default themes are easily customization without the need of any html or css knowledge. Please refer to Easy Theme Customization article for more in depth explanation.

Skins

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 template to seamless integrate the design without the need to touch the code.

Theme Structure

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

• HTML
• CSS
• Javascripts

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

Views

View provide the base structure that wraps the frontend of the store. You can modify the views of your strore-front 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. See this article to learn more about View customization.

Modifications

To avoid upgrade issues it is advised that you do not edit the original 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.

Disabling Joobi Bootstrap styles

For some rare case that you have a conflict with your website Bootstrap template and Joobi theme, you can disable the bootstrap style in Joobi. This means that Joobi will follow the style from your site BS template.

1. From your admin area >> [any Joobi products] >> Tools >> Themes
2. Edit the frontend default Bootstrap theme >> click Edit Theme Design button
3. From the edit them page, navigate to General Design >> General section
4. Select "Remove Bootstrap file" >> Yes
5. Click [Save] to save the changes.

Having said that, most template developers always customized the provided default Bootstrap style. They often remove the styles which are not necessary for their templates, which could lead to an undesirable store-front design. If this happens, we'd recommend to contact the template provider and ask for their feedback.

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 follow point 1.