Premium Joomla Templates for Joomla 5 and Joomla 6

Added

Bootstrap 2 layout on Joomla 6

• New css/bs2-bs5-bridge.css. It takes over what the Bootstrap 2 stylesheets did for Diversity’s markup: .row-fluid rows with .spanN columns (also inside a Bootstrap 5 .row, and standalone), offsets, pull-left / pull-right, the hidden-phone / visible-phone utilities, collapse and tab panes, the Bootstrap 2 button classes, and stacking of multi-column rows on phones.
• The compatibility stylesheet is linked on every page, after the template’s own stylesheets, with a version marker taken from the file’s modification time.
• index.php now loads Joomla’s own Bootstrap 5 stylesheet (/media/vendor/bootstrap/css/bootstrap.min.css), also with a version marker. Its 10 .row-fluid wrappers became .row (10 → 0), and the header, menu bar, sidebar, content and module-row columns use Bootstrap 5 column classes (.spanN → .col-md-N, 36 → 0).
• Joomla’s own icon-* classes (54 of them, e.g. icon-eye, icon-eye-slash, icon-angle-left, icon-angle-double-right, icon-chevron-left, icon-chevron-right) are mapped onto Font Awesome 6, so the icons Joomla prints in forms and pagination show up (see Fixed).

jQuery 3.7 compatibility

• New js/cs-jq-compat.js, loaded right after Joomla’s head. Joomla 6 ships jQuery 3.7, which removed calls the bundled scripts still use; the file restores three of them: .live(), .offset() on the window, and .load(fn) as a load-event shortcut. The slideshow’s camera.min.js binds its play/stop controls with .live().

Phone layout

• New js/cs-mobile.js (loaded deferred, with a version marker). The previous version had no phone layout: on a phone it showed the desktop page and could be dragged sideways. On screens up to 767 px Diversity now reflows to the screen width and gets a menu button (#cs-menu-toggle) beside the logo.
• The menu button opens the site’s main menu in a panel below the header (#cs-drawer). Menu items with sub-pages get a + / − button, and opening one section closes the others.
• An icon row under the header (#cs-utility-row) with five 44×44 px buttons: Section menu (opens the sidebar menu modules), Log in (opens the login dialog), Register (shown when registration is enabled), Search and Follow us (the social links).
• Search opens a full-width panel directly under the header, with a touch-sized field (16 px text, so iPhones do not zoom the page) and a magnifier button that submits it.
• Open panels close when you tap outside them, press Escape, or widen the window to desktop size.
• On phones the logo sits inside the header next to the menu button. The Site Name position settings (H1TitlePositionX / H1TitlePositionY) still place it on wider screens; on a phone they pushed it below its own header and under the icon row.
• The phone menu panel runs to the bottom of the screen and scrolls when the menu is longer than the screen, and the page can no longer be dragged sideways.
• On phones the breadcrumb trail stays on one line, the footer menu links stay visible, the “back to top” control is a circle, and account and registration fields run the full width of the screen.

Favicon tool

• New Favicon tab (fieldset faviconsettings, first in the template options) with a media field (favicon) and a crop tool (favicontool, field class fields/favicontool.php): load the chosen image, drag or resize a square over the part you want, and the cropped image is saved and selected. With thanks to Gianluca, whose favicon question inspired this tool.
• On the front end, index.php builds the full icon set from that one image with two new helpers, phFaviconSet() and phIcoBytes(): a real favicon.ico (16, 32 and 48 px), 32, 192 and 512 px PNGs and a 180 px Apple touch icon, written to images/favicon-generated/. The .ico is also published at the site root, where browsers look for it.
• The generated file names change whenever the image changes, so browsers pick up a new icon instead of holding on to the old one. With no image chosen, the template’s own favicon.ico is used, with a version marker.
• New fields/adminui.php: a hidden field that styles the template’s Options screen only, so the Favicon tab’s help text runs across the full width of the page.
• 10 new language strings in en-GB.tpl_diversity.ini (66 → 76), e.g. TPL_DIVERSITY_FAVICON_TAB, TPL_DIVERSITY_FAVICON_HELP, TPL_DIVERSITY_FAVICONTOOL_CREATE.

Colour picker

• New custom field fields/colorpicker.php with the bundled Coloris picker (js/coloris.min.js, css/coloris.min.css). All 18 colour settings (e.g. sitenamecolor, slogancolor, BodyTextColor, acolor, buttonbg, cam_loaderColor) are now type="colorpicker", with a swatch in the field and keyboard support. Nothing is loaded from an outside site.
• Colours are still stored as hex codes, so every colour you had set carries over unchanged.

Modern social network support

• Eight new social services, each with a URL field and an on/off switch: Instagram, Threads, Bluesky, Mastodon, YouTube, TikTok, Pinterest, Discord (fields instagram/instagramON … discord/discordON).
• X replaces Twitter: the field keeps its name (twitter), so a saved address carries over, and is labelled “X (formerly Twitter)”.
• The 13 links (X, Facebook, Instagram, Threads, Bluesky, Mastodon, LinkedIn, YouTube, TikTok, Vimeo, Pinterest, Discord, RSS) are drawn as Font Awesome 6 brand icons instead of an image sprite behind a text label, with a hidden text name for screen readers. New URL fields default to #TYPE-URL-HERE.

Security helpers

• New helpers in index.php: phEsc() (HTML escaping), phCssDim() (a number with a CSS unit) and phHexColor(), each declared only if not already defined. Details under Security.

Changed

Joomla 6 platform

• templateDetails.xml drops the Joomla 2.5 <!DOCTYPE>, goes from <extension version="3.10"> to "6.1" and declares <targetplatform name="joomla" version="6.1" />. method="upgrade" is kept, so an existing install updates in place.
• templateDetails.xml version 3.0.1 → 6.1.3, creation date 29/11/2012 → 2026-08-19, author URL now https, copyright Copyright (C) Cybersalt Consulting Ltd / EnergizeThemes.com. The version shown in the template’s Details panel reads 6.1.3 (2026-08-19).
• The manifest registers the new fields/ folder (addfieldpath="/templates/diversity/fields").

J3 → Joomla 6 API migration

• All 46 Joomla 3 class calls removed (calls before → after): html/mod_login/default.php 20 → 0, error.php 13 → 0, index.php 7 → 0 (JFactory, JComponentHelper, JRoute, JText, JModuleHelper, JDocumentHTML), html/mod_menu/default.php and html/_mod_menu/default.php 2 → 0 each, html/mod_search/default.php 1 → 0 (JRoute), html/mod_breadcrumbs/default.php 1 → 0 (JText). These old names exist only while Joomla’s Behaviour – Backward Compatibility plugin provides them.
• error.php: JError::raiseWarning(404, …) is now new \Exception(…, 404), and JText is Text.
• html/mod_login/default.php defaults $type to 'login' and html/mod_breadcrumbs/default.php defaults $moduleclass_sfx to an empty string when Joomla does not pass them, so neither raises an “undefined variable” warning.

Template Options screen

• The 32 legacy on/off checkboxes (class="switch" type="checkbox", styled by utils/admin-js.js) are gone: 27 are now Joomla’s native switchers, for example logoLinked, H1TitleImgText, usedropdown, usetheme, cam_turnOn, cam_autoAdvance, cam_navigation and cam_pagination, and the five for retired social services are removed. With the eight new social switches there are 35.
• 45 field type changes in all (the 18 colour settings plus the switches). Fields 104 → 113, tabs 7 → 8.
• The tabs now read Favicon / Basic / Site Name & Slogan / Community Links / Drop Down Menu / Header & Footer Custom Code / Built-in Slideshow / Theme. Before: Basic Settings, Site Name And Slogan Settings, Community Links, Drop Down Menu Settings, Template Header And Footer Custom Code, Built-in Slideshow Settings, Theme Settings.
• The X and Facebook icons in the template’s Details panel use Font Awesome 6 brand icons (fa-brands fa-x-twitter, fa-brands fa-facebook-f), and two rules in the panel’s styles that read text-diversity: uppercase now read text-transform: uppercase.

Login dialog

• The login window is a Bootstrap 5 dialog, centred on the screen (modal fade + modal-dialog-centered + modal-content), opened and closed with data-bs-toggle / data-bs-target / data-bs-dismiss. Before, it used the Bootstrap 2 data-toggle / data-dismiss attributes, which Joomla’s Bootstrap 5 does not recognise. The Close control is a real <button>.

Menus

• Desktop drop-down menus open on hover through CSS (nav.css and the compatibility stylesheet) instead of the Superfish/Supersubs plug-ins. An invisible hover strip spans the gap between a menu item and its drop-down, so the menu stays open on the way down.
• The drop-down animation settings (dropopacity, dropheight, dropwidth, dropspeed) and the minimum width (dropdownhandler1) no longer have an effect. The column widths (dropdownhandler2 … dropdownhandler5) still apply.

Icons and fonts

• The front end loads Font Awesome 6.5.2 from cdnjs (all.min.css + v4-shims.min.css) instead of Font Awesome 4.6.3 from MaxCDN, so existing fa fa-* class names keep working.
• The print and pop-up view (component.php) no longer runs Google’s WebFontConfig loader (webfont.js from ajax.googleapis.com), which fetched Open Sans by script (WebFontConfig 1 → 0).

Slideshow

• The built-in slideshow still runs on camera.js, with all its settings. Its previous/next arrows can now be reached on a touch screen: they were shown only on mouse-over, which never happens on a phone or tablet.

Fixed

• The colour settings were plain text boxes. The Options screen called the old jscolor picker 14 times from a hidden field, but its script was never loaded, so a colour could only be changed by typing its hex code. All 18 now have the colour picker.
• Extensions → Manage showed the wrong version. templateDetails.xml carried two <version> tags (3.0.1 and 31.07.2024 5.1.2), so Joomla reported 3.0.1 whatever was installed. There is now one.
• The “Sign in with a passkey” icon filled the login area. Joomla 6 prints that icon as an inline SVG with no size, so it grew to the width of its container (about 270 px) as a large black shape. Inline button icons without a set size are now capped to icon size and drawn in the button’s text colour.
• The Previous and Next buttons on articles showed bare text. Joomla prints icon-chevron-left / icon-chevron-right there, and the template drew those from the IcoMoon font that Joomla 4 removed. They now show Font Awesome 6 chevrons.
• Fixes from a maintenance pass across our templates:
  • The @font-face in css/template.css pointing at the removed media/jui/fonts/ IcoMoon font is disabled; it requested files that no longer exist.
  • The Previous / Next / First / Last pagination buttons on article lists and blog layouts were blank, and the password show/hide button on the login and registration forms was an empty box. Joomla prints its own icon-* classes there; the compatibility stylesheet now maps them to Font Awesome 6.
  • Featured-article intro text in a one-column layout is no longer clipped to its title (.blog-featured .blog-items.columns-1).
  • The search button sits flush with its search box (#search-position .btn, .mod-finder__search .btn).
  With thanks to Michael Mullan, whose Expression bug report led to this maintenance pass across our templates.

Removed

Legacy scripts and stylesheets no longer loaded

• Scripts: superfish.js, supersubs.js and their inline .supersubs().superfish() call, jquery.mobile.customized.min.js (it threw an error under jQuery 3.7), the inline jQuery.browser shim, and the Internet Explorer scripts modernizr.js, selectivizr-min.js, imgSizer.js (with its addLoadEvent() helper) and the html5shiv from Google Code. The files that came with the template remain in js/ but nothing loads them. camera.min.js, camera.js, jquery.easing.1.3.js and selectnav.min.js still load.
• Stylesheets: the bundled Bootstrap 2 files css/bootstrap/bootstrap.min.css, bootstrap-responsive.min.css, bootstrap-extended.css and css/bootstrap.css, the MaxCDN Font Awesome 4.6.3 stylesheet, and the Internet Explorer files ie6.css and ie.css with their conditional comments in index.php. The local files remain in css/.

Files removed from the package

• Three archives left inside the template tree, 198,905 bytes in all: css/bootstrap.zip, js.zip and html/com_content/category/blog_item.zip.
• The old colour picker utils/js_colourchanger/ (jscolor.js, arrow.gif, cross.gif, hs.png, hv.png) and the hidden colours_handlers field that called it.

Retired social services

• Five social slots removed with their switches: Google+ (gplus), MySpace, StumbleUpon, Digg, Blogger.

Security

• 74 places in index.php where a template setting is written into the page now go through the new helpers, where the original code printed them raw: 73 through phEsc() (HTML escaping), including the 13 social link URLs, the site-name and slogan text, images and alt text, the colours, positions, sizes and fonts in the page’s inline CSS, the slideshow caption settings, the colour preset name and the favicon links. These are administrator-only settings, so this is hardening: an unexpected character in a setting can no longer break the page or add markup to it.
• phCssDim() accepts the header height setting (topheight) only as a number with a CSS unit.
• The site name and slogan text fields (H1Title / H2Title) are escaped, so HTML typed into them now shows as text.
• Social links open in a new tab with rel="noopener", so the opened page cannot control the one that opened it.

Quickstart Installer

The Quickstart is a complete Joomla 6.1.3 site with Diversity installed as the active template and the demo content. It is now a standard Joomla installation package, so you create your own administrator account during installation and no user accounts are shipped; the previous Quickstart was an Akeeba backup archive (.jpa) that needed Kickstart.

• Bundled extensions: Akeeba Backup 10.3.7, MCP For J 2.5.0, Weblinks 5.1.0, StageIt 5.7.3. The templates/ folder holds cassiopeia, cassiopeia_extended, diversity and system.
• A leftover template style, “expression - Default”, carrying another template’s settings with no template behind it, is removed; there are four template styles.
• Joomla’s legacy Search component, module, package and its six search plugins are disabled. They are Joomla 3 code; the “Search” menu item now opens Smart Search, with the same label and position.
• The Login, Login Form and Registration pages show the form itself: the seven promotional Custom Module blocks in top-2, top-3, top-4, top-7, top-8, top-9 and top-10 no longer appear above it (they stay on the other 120 pages), and the Login module in position-7 is shown on every page except those four, so the login page has one login form instead of two.
• A clean starting state: Joomla’s Statistics plugin is switched off and all 15 post-install messages are dismissed.

Package format

• Standalone template: pkg_diversity-6.1.3.zip, a Joomla package (pkg_diversity.xml) that installs the diversity template and registers it in the package manager. Before, the download was a bare template zip (diversity-J5.zip). It declares method="upgrade", so an existing Diversity updates in place, and <blockChildUninstall>true</blockChildUninstall>, so the template is removed through the package rather than on its own.
• Quickstart bundle: Diversity-6.1.3-Quickstart.zip, a complete Joomla 6.1.3 install with Diversity pre-loaded as the active template.