Layout

The Layout settings control how JEM list views are arranged on the frontend and how JEM stylesheets are loaded. In JEM 5.0.0 this area also includes a clearer custom stylesheet workflow connected with the CSS Manager.

These options affect JEM output globally. Individual menu items, modules, template overrides, and custom CSS can still change how a specific page or module is displayed.

Where to Find These Options

Open the Joomla administrator and go to Components → JEM → Settings. The settings are split across tabs. The layout-related options are mainly in:

Basic Settings → Style: frontend layout style and icon font usage.
Layout: frontend list columns, column widths, event image column, custom stylesheets, and colour options.

When to Use These Settings

Use the Layout settings when the same display rule should apply across JEM list views. They are best for global defaults such as the list layout style, visible columns, column widths, date display, and stylesheet selection.

Scenario	Recommended use	Why
Modern public event list	Use Default (Responsive Style).	Works better with current Joomla templates and smaller screens.
Older site with existing overrides	Keep Legacy (Table Style) until overrides are reviewed.	Old overrides or CSS may depend on the table-based output.
Compact list pages	Hide optional columns and reduce column widths.	Keeps the list readable when space is limited.
Visual event directory	Enable the event image column and choose a suitable image width.	Images help visitors scan events quickly.
Site-specific styling	Use CSS Manager and custom stylesheets.	Keeps custom CSS separate from JEM core files.

Layout Style

The Layout Style option chooses the general frontend layout style used by JEM.

Legacy (Table Style): older table-based output.
Default (Responsive Style): modern responsive output.

JEM 5.0.0 is focused on Joomla 6 compatibility, so the responsive layout should normally be preferred for current sites. Legacy layout can still be useful when a site depends on old overrides or old CSS.

If a site uses template overrides from older JEM versions, review them before switching layout style. Old overrides can prevent new responsive markup or new display options from appearing.

Use Icon Font

The Use Icon Font option lets JEM use icon-font based icons instead of image icons for actions such as print and similar frontend controls.

Frontend List Layout

The Layout tab controls columns shown in JEM frontend list views. These settings are most relevant for event list style pages.

Section	Main options
General Layout Settings	Table width for the frontend table layout.
Date Column	Date column width, time display, and one-line or two-line date layout.
Title Column	Show or hide the title column and set its width.
Venue Column	Show or hide the venue column, set its width, and choose whether venue names link to the venue view.
City Column	Show or hide the city column and set its width.
County Column	Show or hide the county/state column and set its width.
Category Column	Show or hide the category column, set its width, and choose whether categories link to category views.
Attendee Column	Show or hide the attendee column and set its width.
Event Image Column	Show or hide the image column and set its width.

Width values are percentage-based. When several columns are enabled, make sure the total layout still fits the available page width, especially on smaller screens.

Date Column Layout

The date column has two important options:

Time in Date Column: show event time information inside the date column.
Layout of Date Column: choose between single-line and two-line output.

The two-line layout is intended to show dates on one line and times on another line. If time display is disabled, the two-line layout may leave an empty second line, so it normally works best when Time in Date Column is enabled.

Event Image Column

JEM 5.0.0 includes an event image column option for frontend list views. When enabled, event list rows can show the event image in its own column.

Show Image Column: display event images in frontend list views.
Image Column Width in %: set the width of the event image column.

Image display also depends on event images being available and on the selected layout or template override supporting this output.

Custom Stylesheets

In JEM 5.0.0 the custom stylesheet area has been improved. The Layout tab now shows the JEM stylesheets in a table with their scope, whether a custom file is enabled, and which custom file is selected.

Custom CSS files should be created or edited in CSS Manager, then enabled and selected in Settings → Layout → Custom Stylesheets.

Stylesheet Scopes

Legacy: stylesheets used by legacy/table style output, such as jem.css, calendar.css, geostyle.css, googlemap.css, and colorpicker.css.
Responsive: responsive stylesheet variants such as jem-responsive.css, calendar-responsive.css, and related responsive files.
Backend: administrator stylesheet files such as backend.css and backend-responsive.css.
Print: print stylesheet files such as print.css and print-responsive.css.

The Use custom option is only available when a compatible custom CSS file exists. Create the custom file with CSS Manager first, then return to Layout settings to enable it.

Custom CSS Workflow

Open Components → JEM → CSS Manager.
Copy the standard stylesheet as a custom file.
Edit the custom file if needed.
Return to Settings → Layout.
Enable Use custom for the stylesheet.
Select the custom file.
Save the settings and clear cache if needed.

CSS Manager also helps identify standard files, active custom files, available custom files, missing files, and custom files that are not assigned.

Colour Options

The Layout tab also includes colour settings for common JEM table and content elements. These options are useful for small adjustments without creating a full custom stylesheet.

Background Colour: filter block, headings, JEM content area, table headers, table rows, alternate rows, hover rows, and featured rows.
Border Colour: filter block, headings, table headers, and table cells.
Font Colour: headings, table headers, table text, and table links.

Leave a colour field empty to use the default stylesheet value.

Menu Items, Modules, and Overrides

Layout settings are global defaults. They can be affected by other parts of the Joomla site:

Menu item options may override or refine the output for a specific JEM view.
JEM modules have their own layout and display options.
Template overrides can replace the HTML generated by JEM layouts.
Custom CSS can change visual presentation without changing the JEM settings.

After Updating JEM

Review Layout settings after updating or upgrading JEM, especially when moving from JEM 4.5.0 to JEM 5.0.0.

Check whether the site should use responsive or legacy layout style.
Review enabled columns and widths in frontend lists.
Check whether the new or updated event image column should be enabled.
Review custom stylesheet assignments.
Use CSS Manager to copy fresh custom files if old CSS no longer matches the current JEM markup.
Temporarily disable template overrides if a view does not match the current settings.

Recommended Configurations

Page type	Recommended options	Reason
Main event list	Responsive layout, date, title, venue, city, category, optional image.	Gives visitors the most useful information without making the list too dense.
Small agenda list	Responsive layout, date, title, venue, hide less important location columns.	Keeps short agenda pages easy to scan.
Traditional table list	Legacy layout or responsive table-like styling, with carefully checked widths.	Useful for sites that need a dense table view or have older styling.
Image-focused event directory	Responsive layout, show event image column, reduce optional text columns.	Prevents the image column from making the row too crowded.
Custom branded site	Responsive layout plus custom CSS copied through CSS Manager.	Separates site branding from JEM core CSS and makes updates safer.

Troubleshooting

A column setting does not appear on the frontend

Check whether the page is using a menu item option or template override.
Check whether the selected layout style supports the column.
Clear Joomla cache and browser cache.

The layout breaks after enabling many columns

Reduce the number of visible columns.
Adjust column widths.
Use the responsive layout style where possible.
Check custom CSS and template overrides.

The custom stylesheet option cannot be enabled

Create a compatible custom CSS file in CSS Manager first.
Return to Layout settings and select the custom file.
Check that the file exists under the JEM custom CSS folder.

A custom stylesheet is enabled but has no visible effect

Check that the correct stylesheet scope is enabled, for example responsive instead of legacy.
Clear Joomla cache and browser cache.
Use browser developer tools to confirm which CSS file is loaded.
Check whether the active template has stronger CSS rules.

Related Project Notes

#2211 documents the Custom CSS Management UX changes used by Settings → Layout and CSS Manager.
#2014 explains that the Load More button is only available in specific responsive layout modes, not in legacy layout.
#1981 clarifies the removal of old alternative-layout remnants, leaving Legacy and Default responsive styles as the relevant choices.
#2073 relates to responsive CSS file handling and is useful when checking custom stylesheet assignments after updates.