Step 1 Locate the Joobi module that you want to customize the look

  • From the admin panel, navigate to Joomla module manager >> [Joobi Module] e.g Product List
  • From the module edit page, specify your unique module class
  • Click save once you are done

mod-class-joomla


Step 2 Inspect store elements

  • From your storefront locate the module that you want to customize and easily spot the class you want to modify using firebug (firefox)
  • In this example I am going to add a black border in the product image

siteimage-class-front


Step 3 Add your custom styles

  • Now go to your File manager using Filezilla or any Joomla file manager
  • Navigate to the the custom.css of your default Joomla template (If you do not have custom.css you can add one)
  • Enter the joomla module class we specified in step 1 and Step 2

/templates/your_default_template/css/custom.css

customcss-file

This is how the storefront product module looks like after the change:

store-customize-black

Friendly Reminder

Joobi uses "evaluate before you buy" approach, we do NOT issue refunds after a subscription is purchased.
All basic plan (3 months) includes a back-link to Joobi.org

We invite you to:

Use the 30 days trial period before buying
Test-drive Joobi products using the demo website
For Mobile apps, check our iOS and Android demo

joobi-custom-service

Web Hosting Partner

Web Hosting     DreamHost