How to use themes in DJ-Tabs

How to use themes in DJ-Tabs

Themes in DJ-Tabs

With the Themes functionality, you can change the appearance of DJ-Tabs.
Tab items are independent of their look, so the same set of items (tabs or accordions) can be used multiple times in multiple places (for example in different modules or menu items), and in each instance, the theme can be different, even though the content remains the same.
Themes can be selected in DJ-Tabs modules, and when adding the DJ-Tabs menu item

Built-in themes

DJ-Tabs comes with 16 built-in themes . 12 of them are customizable - you can freely modify, copy or remove them. 4 are hardcoded and can be customized with CSS.
To see the list of the themes, open Joomla! admin panel and go to Components -> DJ-Tabs -> Themes.
There you'll see a list of all available themes: 
Themes list in DJ-Tabs
Each theme with a checkbox can be edited, deleted, or copied.

Theme Builder actions

Creating a new theme

To create a new theme click +New when in themes

Editing existing theme

To edit an existing theme click on the theme's name and you'll see the details of that theme that can be modified. Once you modify the theme, click " Save ".

Duplicating/copying the theme

If you want to copy the theme to modify it with a different name, just open the theme details, change its title and click " Save as copy ".
Duplicating DJ-Tabs theme

Removing theme

To remove the theme, open the themes list and select the checkbox next to the theme's title and click "Delete".
Removing DJ-Tabs theme

Theme builder elements

Theme builder is divided into sections that it modifies. You can control the look of Tabs, Tabs content, Panels, and Toggler.

Customizing Tabs 


In theme customizer it is possible to control: 
  1. Tabs general settings 
    1. Tab's height
    2. Tab's width
    3. Tabs direction
    4. Tab border-radius (top)
    5. Tab border-radius (bottom)
    6. Tab's left-right padding
    7. Tab space
  2. Tab separator
    1. Tab separator style
    2. Tab separator color
  3. Tab text
    1. Tab text-transform
    2. Tab font size
    3. Tab font family
  4. Active tab
    1. Active tab color
    2. Active tab title color
  5. Inactive tab
    1. Tab color
    2. Tab title color
  6. Tabs bottom line
    1. Tabs bottom line width
    2. Tabs bottom line color

Customizing tab content


  1. Font family
  2. Date font size
  3. Article content color
  4. Image border-radius
  5. Content border

Customizing panel


  1. Panel general
    1. Panel border-radius
    2. Panel font size
    3. Panel font family
    4. Date color
  2. Panel active
    1. Active panel color
    2. Active panel title color
    3. Active panel borders style
    4. Active panel borders color
  3. Panel inactive
    1. Panel color
    2. Panel title color
    3. Panel borders style
    4. Panel borders color

Customizing toggles


  1. Toggler color
  2. Active toggler color
  3. Toggler border-radius

How to assign a theme to Tabs

Assigning themes to tabs is possible in modules and menu items for DJ-Tabs.

Choosing a theme in the DJ-Tabs module


Choosing a theme in the DJ-Tabs menu item



      • Related Articles

      • How to use themes

        The theme is a feature allowing you to override views of the component (globally or for chosen categories) and using your own, non-default CSS files. Using DJ-Classifieds Themes for overriding ideas is an alternative to the Joomla! Built-in template ...

      • How to use DJ-Notifications?

        Installation This plugin has to be installed like any other Joomla extension.  Configuring the plugin Let’s start the configuration of the plugin Go to Extensions > Plugins and find the " System - DJ-Notifications " plugin.   Enable the plugin, open ...

      • How to use Custom Field plugin for DJ-Catalog2

        Custom Field Plugin for DJ-Catalog2 component allows adding an embedded custom field into the product's description. You'll be able to display any custom field anywhere in the description just using the short-code. How to enable the Custom Field ...

      • PayLane DJ-Catalog2 integration

        Integrate DJ-Catalog2 with a PayLane payment processing solution and receive payments from your customers. PayLane is the payment method for users from Poland. It provides payments with credit cards (Visa and Master Card), Paypal, and polish payments ...

      • DJ-Tabs Component

        The DJ-Tabs component allows you to create tabs from the selected content (categories, articles and modules). See the basic steps to configure the DJ-Tabs component: Browse created items Create new item  Browse created groups Create new group Browse ...