Layouts

The layouts documentation explains how JEM output can be adapted to the design of a Joomla site. Most visual changes should be made with Joomla template overrides, module overrides, or custom CSS in the site template.

What Can Be Customized

JEM output is built from component views, module layouts, media files, and Joomla template styling. Depending on the change, different customization methods are appropriate.

Template Overrides

Joomla template overrides allow you to copy a layout file from JEM into your template and customize it there. This keeps your custom layout separate from the original JEM files.

• Component overrides are usually stored under templates/YOUR_TEMPLATE/html/com_jem.
• Module overrides are usually stored under templates/YOUR_TEMPLATE/html/mod_jem*.
• Overrides should be reviewed after every major JEM update.
• Old overrides can hide new JEM features if they are not updated.

Component Layouts

Component layouts control the main JEM pages displayed through Joomla menu items. These include event lists, event detail pages, calendar views, category views, venue views, maps, search, and user-area pages.

• Events: event lists, event details, submit event, and event maps.
• Calendars: day, weekly, monthly, category, and venue calendars.
• Categories: category lists and category event views.
• Venues: venue lists, venue details, submit venue, and venue maps.
• User Area: personal events, venues, attendances, timelines, and search.

Module Layouts

JEM modules can be displayed in Joomla module positions and may provide alternative layouts depending on the module. Module output can be adapted with module settings, alternative layouts, module class suffixes, and template overrides.

• Basic Module
• Wide Module
• Calendar Module
• Venues Map Module
• Teaser Module
• Banner Module
• Jubilee Module
• Types Module

CSS and Styling

Styling should normally be added through the active Joomla template, not by editing JEM files. This makes the design easier to maintain during updates.

• Use the template's custom CSS file when available.
• Use module class suffixes to target specific module instances.
• Use browser developer tools to inspect JEM classes and layout structure.
• Keep CSS changes scoped so they do not affect unrelated Joomla pages.
• Clear Joomla and browser cache after changing CSS.

Before Creating an Override

Many layout needs can be solved without an override. Check the existing configuration first.

1. Check JEM global settings.
2. Check the Joomla menu item options for the JEM view.
3. Check module options if the output comes from a module.
4. Check whether a language override can solve wording changes.
5. Use a template override only when the HTML structure really needs to change.

After Updating JEM

Template overrides are one of the most common causes of display issues after an update. If a JEM page looks wrong after updating, test without overrides before changing JEM settings.

• Temporarily disable the override by renaming the override file or folder.
• Compare your override with the new JEM layout file.
• Copy only the custom changes that are still needed into a fresh override.
• Check frontend views on desktop and mobile after updating overrides.
• Review custom CSS that targets old layout classes or old markup.

Troubleshooting

A page looks broken after an update

• Clear Joomla and browser cache.
• Temporarily disable JEM template overrides.
• Check whether the active Joomla template supports the current Joomla version.
• Compare old override files with the current JEM layout files.

A setting does not appear to work

• Check whether a template override is hard-coding the old output.
• Check whether the option is controlled by the menu item instead of global settings.
• Clear cache after changing settings.

Only one module instance looks wrong

• Check the module's selected layout.
• Check the module class suffix.
• Check whether there is a template override for that module type.
• Compare the module settings with another working module instance.

Related Documentation

• Frontend documentation
• Modules documentation
• Language overrides
• Updating JEM
• Upgrading JEM between Joomla major versions