Configure the structure of JEM frontend lists, their visible columns and widths, component stylesheet replacements, additional user CSS and global colour adjustments.
Version coverage: this article applies to JEM 5.0.1, JEM 5.0.2 Beta 1 and JEM 5.1.0 Beta 4. The main Layout controls are shared by all three versions. Differences in module CSS override handling are documented in the JEM 5.1.0 appendix.
Navigation and Access
In the Joomla administrator, select Components → JEM → Settings → Layout.
Opening or saving JEM Settings requires the applicable Joomla/JEM core.options permission. Saving validates the complete Settings form, not only the currently visible tab.
Layout at a Glance
List Mode
Choose modern cards or a compact table-like presentation.
Columns
Control dates, titles, venues, locations, categories and attendance.
Event Images
Add an optional image column to supported event lists.
Stylesheets
Replace individual JEM stylesheets with update-safe custom copies.
Colours
Adjust common backgrounds, borders, text and link colours.
Recommended Configuration Flow
1 Choose the frontend style Select Responsive or Legacy under Basic Settings.
2 Choose the list mode Leave Table Width empty for the modern responsive list or enter a width for the compact mode.
3 Select columns Enable only the information visitors need.
4 Adjust styling Use colour controls or create update-safe custom CSS.
5 Test all screen sizes Verify desktop, tablet and mobile output with real event data.
Relationship with Basic Settings
The frontend layout family is configured under Settings → Basic Settings → Frontend style, not on the Layout tab.
| Basic Settings field | Initial value | Effect |
|---|
Layout Style
layoutstyle |
Default (Responsive Style) |
Responsive uses JEM's flexible frontend layouts. Legacy uses the older table-based presentation and is mainly useful for sites that still depend on compatible legacy overrides. |
Use Icon Font
useiconfont |
Yes |
Loads the JEM icon font and Font Awesome assets used by supported frontend actions and information icons. |
If the site contains Joomla template overrides for JEM, those overrides can replace JEM's current HTML structure. Review them before changing the frontend style or assuming that a Layout option is not working.
How Table Width Changes the Responsive List
Table Width in % is more than a visual width setting. In Responsive Style, it also chooses between two event-list presentations.
| Frontend style | Table Width | Result |
|---|
| Responsive |
Empty |
Uses the modern responsive event-list layout. Items adapt as flexible event blocks, and the Events List view can use its Load More behaviour. |
| Responsive |
Non-empty, for example 100% |
Uses the compact responsive table-like layout. Configured column widths become especially important. The modern Events List Load More control is not used in this mode. |
| Legacy |
Empty |
Uses the legacy table layout with an effective table width of 100% in the shared event table. |
| Legacy |
Non-empty |
Uses the legacy table layout with the configured CSS width. |
Recommended for new sites: use Responsive Style and leave Table Width empty unless a dense table-like event list is specifically required.
General and Date Layout Options
| Field | Initial value | Purpose and behaviour |
|---|
Table Width in %
tablewidth |
Empty |
Controls the overall list width and, in Responsive Style, selects the modern or compact table-like presentation. Enter a valid CSS percentage such as 100%, not only 100. |
Date Column Width in %
datewidth |
20% |
Sets the preferred width of the date column in legacy and compact responsive lists. |
Time in Date Column
showtime |
Yes |
Includes the event start and end times in supported frontend list date output. |
Layout of Date Column
datemode |
Single line |
Single line keeps date and time in one continuous line. Two lines places dates on the first line and times on the second. |
The Two lines option works best when Time in Date Column is enabled. When time is hidden, the second line can remain visually empty in layouts that preserve the date structure.
Content Columns
Show and hide settings apply to supported modern, compact and legacy event-list output. Width values mainly affect compact responsive and legacy layouts.
| Section | Initial configuration | Behaviour |
|---|
| Title Column |
Show: Yes
Width: 20% |
Displays the event title. Whether it links to Event Detail also depends on Show Link to Event Page under Basic Settings. |
| Venue Column |
Show: Yes
Width: 15%
Link to venue: Yes |
Displays the assigned venue. The link option sends visitors to the venue view when an accessible venue route is available. |
| City Column |
Show: Yes
Width: 15% |
Displays the city stored in the assigned venue. |
| County Column |
Show: Yes
Width: 15% |
Displays the venue county, region or state value. |
| Category Column |
Show: Yes
Width: 15%
Link to category: Yes |
Displays the event categories. The link option makes accessible categories link to their category views. |
| Attendee Column |
Show: No
Width: 10% |
Displays registration information such as registered places and maximum places. Enable it only where public list-level registration figures are appropriate. |
| Event Image Column |
Show: No
Width: 10% |
Displays an event image in supported event lists. Image availability, JEM image settings and template overrides can still affect the result. |
Width Planning
When using the compact responsive or legacy table layout, the visible column widths should normally form a practical total close to 100%.
- Hidden columns do not need to be included in the total.
- Enabling the image or attendee column may require reducing other widths.
- Long translated labels, event titles and venue names may require more room.
- Mobile output can still stack or adapt according to the active responsive stylesheet.
- The modern responsive layout does not depend on these percentages in the same way as the compact layout.
A new installation uses Date 20%, Title 20%, Venue 15%, City 15%, County 15% and Category 15%. These visible columns total 100%. Enabling another column without adjusting the others can make the compact table crowded.
Custom Stylesheets
The Custom Stylesheets section defines replacements for individual JEM component stylesheets. Each row contains:
- The standard JEM stylesheet.
- Its frontend, backend, responsive or print scope.
- A Use custom switch.
- A compatible custom file selector.
| Purpose | Standard stylesheets |
|---|
| Backend administration |
backend.css |
| Legacy frontend |
jem.css, calendar.css, geostyle.css, googlemap.css |
| Responsive frontend |
jem-responsive.css, calendar-responsive.css, geostyle-responsive.css, googlemap-responsive.css |
| Print output |
print.css, print-responsive.css |
Do not edit the standard files directly. Standard JEM CSS can be replaced during an update. Create a custom copy with CSS Manager and assign that copy under Layout.
Custom Replacement Workflow
- Open Components → JEM → CSS Manager.
- Locate the standard stylesheet that needs to be customised.
- Select Copy as custom.
- Enter a clear custom filename and create the copy.
- Edit the custom file in CSS Manager.
- Return to Settings → Layout → Custom Stylesheets.
- Enable Use custom for the corresponding standard stylesheet.
- Select the compatible custom file.
- Save JEM Settings and clear Joomla or browser caches if required.
Custom replacement files are stored under:
media/com_jem/css/custom/
CSS Manager records the source stylesheet and JEM version in newly copied custom files. This lets JEM restrict each selector to compatible replacements.
When no compatible custom file exists for a stylesheet, the Layout page disables its Use custom: Yes option. Create the custom copy in CSS Manager first.
Replacement CSS and Additional User CSS
| Method | File or location | Behaviour |
|---|
| Custom replacement |
A compatible file selected under Layout |
Replaces one specific standard JEM component stylesheet. |
| Frontend user stylesheet |
media/com_jem/css/custom/jem-user-front.css |
Additional CSS loaded after the normal JEM component stylesheets. It is created in CSS Manager and does not require a Layout selector. |
| Module user stylesheet |
media/com_jem/css/custom/jem-user-module.css |
Additional CSS loaded after normal JEM module styles when at least one JEM module is rendered. |
| Component template CSS override |
templates/<template>/css/com_jem/<stylesheet>.css |
Template-specific replacement used when no CSS Manager replacement has priority for that stylesheet. |
| Module template CSS override |
templates/<template>/css/<module>/<layout>.css |
Overrides the stylesheet belonging to one module layout, for example mod_jem_teaser/default.css. |
| Joomla HTML override |
templates/<template>/html/<extension>/ |
Replaces PHP layout markup. This is different from a CSS-only override and must be reviewed after JEM layout changes. |
Component Stylesheet Priority
For a JEM component stylesheet, the effective order is:
- A compatible custom replacement enabled under Settings → Layout.
- A matching Joomla template CSS override.
- The standard stylesheet supplied by JEM.
- The optional additive
jem-user-front.css layer.
Because a CSS Manager replacement is checked before a template CSS override, avoid configuring both methods for the same stylesheet unless the resulting priority is understood.
Colour Options
The Layout tab can generate CSS for common JEM elements without requiring a complete custom stylesheet.
Background Colour
| Field | Initial value | Target |
|---|
| Filter |
#ffa500 |
JEM filter block background. |
| H2 |
Empty |
JEM level-two heading background. |
| JEM |
Empty |
Complete JEM content area. |
| Table-th |
Empty |
Table headings or their responsive equivalents. |
| Table-tr |
Empty |
Primary table rows or responsive event rows. |
| Table-tr entry2 |
Empty |
Alternating second rows. |
| Table-tr hover |
Empty |
Row under the pointer. |
| Table-tr featured |
Empty |
Featured event rows. |
Border Colour
| Field | Initial value | Target |
|---|
| Filter |
Empty |
Filter block border. |
| H2 |
Empty |
Level-two heading border. |
| Table-th |
Empty |
Table heading or responsive heading border. |
| Table-td |
Empty |
Table cells or responsive event-row borders. |
Font Colour
| Field | Initial value | Target |
|---|
| H2 |
Empty |
Level-two heading text. |
| Table-th |
Empty |
Table heading text. |
| Table-td |
Empty |
Event-row text. |
| Table-td a |
Empty |
Links inside event rows. |
Leave a colour empty to use the active stylesheet value. If extensive branding is required, a custom stylesheet is normally easier to maintain than configuring many individual colour fields.
Field coverage: the Layout tab contains 20 list-layout controls, 11 stylesheet replacement assignments and 16 colour controls.
Configuration Examples
Modern Mobile-Friendly Event Directory
- Layout Style: Responsive.
- Table Width: empty.
- Show: title, venue, city and category.
- Optional: show event images.
- Hide: county and attendees when horizontal information becomes excessive.
- Use
jem-user-front.css for small site-wide adjustments.
Compact Desktop Programme
- Layout Style: Responsive.
- Table Width:
100%.
- Date: 18%.
- Title: 27%.
- Venue: 20%.
- City: 15%.
- Category: 10%.
- Image: 10%.
- Hide county and attendee columns.
Registration Overview
- Layout Style: Responsive.
- Table Width:
100%.
- Date: 20%.
- Title: 25%.
- Venue: 20%.
- Category: 20%.
- Attendee: 15%.
- Hide image, city and county columns.
- Confirm that exposing registration totals is appropriate for the site.
Custom Branded Site
- Keep Layout colour fields empty except where a simple global value is sufficient.
- Copy
jem-responsive.css in CSS Manager.
- Enable the compatible replacement under Layout.
- Use
jem-user-front.css for small rules that must remain independent of the selected JEM layout stylesheet.
- Use
jem-user-module.css for rules shared by several JEM modules.
JEM 5.1.0 Beta 4 Appendix
Beta software: test JEM 5.1.0 Beta 4 on a staging site before using it on a production website.
JEM 5.1.0 Beta 4 keeps the same main Layout fields documented above. Its relevant change is stricter and more consistent handling of module stylesheet filenames.
| Version | Module CSS override behaviour |
|---|
| JEM 5.0.1 |
Use the current layout filename, for example templates/<template>/css/mod_jem_teaser/default.css. |
| JEM 5.0.2 Beta 1 |
Prefers current layout filenames but temporarily supports recognised older module stylesheet filenames. CSS Manager can detect and migrate those files. |
| JEM 5.1.0 Beta 4 |
Uses current layout filenames only at runtime. CSS Manager detects recognised legacy module overrides and offers an explicit migration to the current filename. |
Example: JEM Teaser
The preferred template CSS override is:
templates/my-template/css/mod_jem_teaser/default.css
An older override such as:
templates/my-template/css/mod_jem_teaser/mod_jem_teaser.css
should be migrated to default.css before relying on JEM 5.1.0.
CSS Manager Migration Safety
When recognised old module stylesheet filenames are detected, CSS Manager displays the current and proposed paths. Migration:
- Requires explicit administrator approval.
- Does not overwrite an existing destination file.
- Reports filename conflicts and non-writable directories.
- Leaves unsafe or conflicting files for manual review.
- Renames only recognised JEM module stylesheet mappings.
After Updating JEM
- Confirm that Responsive or Legacy Style is still appropriate.
- Check whether Table Width is empty or contains a valid CSS width.
- Review visible columns and their combined widths.
- Test lists with long translated titles, venue names and categories.
- Open CSS Manager and review missing, active, available and unassigned custom files.
- Compare custom stylesheets with their current JEM source version.
- Review any legacy module CSS warning shown by CSS Manager.
- Temporarily disable Joomla template overrides when diagnosing unexpected markup.
- Test desktop and mobile output before publishing the updated configuration.
Troubleshooting
The responsive list looks like a table
- Open Settings → Layout.
- Clear Table Width in % completely.
- Confirm that Layout Style is Responsive under Basic Settings.
- Save and clear Joomla and browser caches.
The Load More button is not displayed
- Load More is associated with the modern Events List presentation.
- Use Responsive Style.
- Leave Table Width empty.
- Confirm that the page is an Events List view and that more results exist.
- Check template overrides if the control is still missing.
Columns overflow or become too narrow
- Reduce the number of visible columns.
- Recalculate the widths of all visible columns.
- Reserve additional width when enabling images or attendees.
- Consider returning to the modern responsive mode by clearing Table Width.
A column setting has no visible effect
- Check whether the current view uses the shared JEM event-list layout.
- Check menu-item options that can hide or replace information.
- Temporarily disable relevant Joomla template overrides.
- Clear Joomla and browser caches.
Use custom cannot be enabled
- Create a compatible copy of the required standard stylesheet in CSS Manager.
- Return to Settings → Layout.
- Enable Use custom and select the new file.
- Do not assign a file copied from a different source stylesheet.
A custom stylesheet is enabled but not visible
- Confirm that the file exists under
media/com_jem/css/custom/.
- Confirm that the correct legacy or responsive source stylesheet was replaced.
- Check the active Layout Style.
- Use browser developer tools to inspect the loaded CSS files.
- Clear Joomla, proxy and browser caches.
- Check whether Layout colour settings or another rule has greater specificity.
A module CSS override is not loaded
- Use the active module layout filename, such as
default.css, responsive.css or cards.css.
- Use the preferred path
templates/<template>/css/<module>/<layout>.css.
- In JEM 5.1.0 Beta 4, open CSS Manager and review the legacy module CSS migration warning.
- Check that the override belongs to the active Joomla site template.
Related Project Notes
Related Documentation
