Applies to: JEM 4.5 beta 5 and JEM 5.0 beta 3, depending on the Joomla version used by the site.
This article explains the global frontend layout mode used by JEM component views: Legacy and Responsive.
Purpose
The global layout style controls how JEM frontend component views are rendered. It is designed to let administrators choose between the older table-oriented visual structure and the newer responsive structure used for modern Joomla templates.
This setting affects JEM frontend views such as event lists, calendars, categories, venues, event details, user event management views, and frontend edit forms. It does not replace the separate layout selector available inside each JEM module.
Where to Configure It
- Go to Components > JEM > Settings.
- Open the layout/display settings area.
- Find Layout style.
- Select either Legacy or Responsive.
- Save the JEM settings.
Available Global Layout Styles
| Layout Style | Default | Recommended Use | Behaviour |
|---|
| Legacy |
Yes |
Older templates, sites already customised around the classic JEM output, or installations that depend on table-based styling. |
Loads the standard JEM frontend templates and the standard CSS files, such as jem.css. |
| Responsive |
No |
Modern Joomla 4, Joomla 5, and Joomla 6 templates, mobile-first sites, Bootstrap-based templates, and new installations. |
JEM first looks for responsive templates and responsive CSS files, for example responsive/default.php and jem-responsive.css. |
How JEM Loads Responsive Views
When Responsive is enabled, JEM adds an additional frontend template path using the responsive folder. If a responsive template exists for the current view, JEM uses it. If not, JEM falls back to the normal layout file.
For example, when rendering the event view, JEM can use:
components/com_jem/views/event/tmpl/responsive/default.php- or a template override in
templates/YOUR_TEMPLATE/html/com_jem/event/responsive/default.php
If no responsive file is available, JEM continues with the normal layout file, for example:
components/com_jem/views/event/tmpl/default.php- or
templates/YOUR_TEMPLATE/html/com_jem/event/default.php
Frontend Views Commonly Affected
| View Area | Examples | Responsive Impact |
|---|
| Event lists |
Events list, day view, search results, category events, venue events |
Changes the list structure from classic/table-like output to responsive list/card-friendly output where available. |
| Calendars |
Main calendar, week calendar, category calendar, venue calendar |
Uses responsive calendar templates when present while keeping calendar-specific CSS. |
| Event detail |
Single event page, attendees block, registration form |
Improves the structure for mobile and modern templates. |
| Venue and category views |
Venue list, venue detail, categories, category detail |
Uses responsive alternatives for lists, detail blocks, and nested information where available. |
| Frontend editing |
Submit event, edit event, submit venue, edit venue |
Uses responsive form layouts where available, including tabbed editing views. |
| User views |
My events, my venues, my attendances |
Improves frontend management views for smaller screens. |
CSS Loading
JEM loads CSS according to the selected layout style. In Legacy mode it loads the normal CSS file. In Responsive mode it first tries to load the responsive CSS variant.
| CSS Type | Legacy Example | Responsive Example |
|---|
| Main JEM CSS |
media/com_jem/css/jem.css |
media/com_jem/css/jem-responsive.css |
| Calendar CSS |
media/com_jem/css/calendar.css |
media/com_jem/css/calendar-responsive.css, when available |
| Print CSS |
media/com_jem/css/print.css |
media/com_jem/css/print-responsive.css, when available |
Template Overrides
Responsive overrides should be placed in a responsive subfolder inside the template override path.
| Override Type | Example Path |
|---|
| Legacy event override |
templates/YOUR_TEMPLATE/html/com_jem/event/default.php |
| Responsive event override |
templates/YOUR_TEMPLATE/html/com_jem/event/responsive/default.php |
| Legacy events list override |
templates/YOUR_TEMPLATE/html/com_jem/eventslist/default.php |
| Responsive events list override |
templates/YOUR_TEMPLATE/html/com_jem/eventslist/responsive/default.php |
Important: Do not edit core JEM layout files directly on a production site unless you are developing JEM itself. For site customisations, use Joomla template overrides.
Recommended Configuration
| Scenario | Recommended Layout | Reason |
|---|
| New Joomla 5 or Joomla 6 website |
Responsive |
Best match for modern templates and mobile browsing. |
| Existing website with many old JEM overrides |
Legacy first, then migrate gradually |
Avoids breaking custom output already built around the old structure. |
| Website using Bootstrap 5 template classes |
Responsive |
Usually integrates better with modern frontend grids and spacing. |
| Highly customised table-based event list |
Legacy |
Preserves the expected markup and CSS selectors. |
Troubleshooting
| Symptom | Check |
|---|
| The frontend did not visually change after enabling Responsive. |
Clear Joomla cache, browser cache, and template cache. Also check whether the current view actually has a responsive layout file. |
| A custom override stopped being used. |
If Responsive is enabled, move or copy the override to the matching responsive override folder. |
| CSS changes do not appear. |
Check whether JEM is loading the responsive CSS variant. Also verify custom CSS settings in JEM Settings. |
| A module did not change when the global layout was changed. |
Modules have their own layout selector. Configure the module layout separately in the module Advanced tab. |
Related Development Notes
