CSS manager

CSS Manager provides a safe workspace for reviewing JEM stylesheets, creating custom replacement files and maintaining optional user override layers. JEM also supports Joomla template CSS overrides for component views, administrator pages, modules and the JEM List Events content plugin.

Do not edit standard JEM CSS files for site-specific changes. Files supplied by JEM can be replaced during an update. Use a custom replacement, a Joomla template CSS override or one of the user override stylesheets described below.

Open the CSS Manager

In the Joomla administrator, go to Components → JEM → Control Panel → CSS Manager.

The screen separates two types of customisation:

Method	Purpose	Loading behaviour
Custom replacement stylesheet	Replace one standard JEM stylesheet completely.	Loaded instead of the selected standard or template stylesheet when enabled in JEM Settings.
Template CSS override	Let the active Joomla template replace a component, module or plugin stylesheet.	Automatically selected when its path and filename match the requested stylesheet.
User override stylesheet	Add small site-specific rules without copying a complete standard file.	Loaded after the normal JEM stylesheets for its frontend component or module scope.
Layout colour settings	Set supported colours from the JEM configuration interface.	JEM generates inline CSS for the configured colour values.

CSS Loading Flow

A view, module or plugin requests a logical stylesheet name. It does not need to hard-code the final file path. JEM resolves the active layout variant and the available customisation before registering the selected file with Joomla's Web Asset Manager.

1. Request

A component view calls JemHelper::loadCss(), a module calls JemHelper::loadModuleStyleSheet(), or the plugin invokes its stylesheet loader.

2. Resolve

JEM selects Legacy or Responsive, checks configured replacements and template overrides, and falls back to the distributed stylesheet.

3. Register and order

Joomla's Web Asset Manager registers each asset once and observes dependencies so user override layers are emitted after their normal JEM styles.

Request stylesheet → determine layout variant → resolve custom or template file → register with Joomla → load additive user CSS

Where Stylesheets Are Requested

Area	Request origin	Resolver
Frontend component views	The applicable `site/views/.../view.html.php`, shared view class, output helper or specialised layout requests `jem`, `calendar`, `print`, map or feature-specific CSS.	`JemHelper::loadCss()`
Administrator component	`administrator/components/com_jem/jem.php` requests the common `backend` stylesheet once. Individual views request only additional styles such as attachments, links, geolocation or Help modal CSS.	`JemHelper::loadCss()`
Frontend modules	The module entry file requests the selected layout, colour and icon styles. A module template may request an additional feature stylesheet such as Leaflet or Lightbox.	`JemHelper::loadModuleStyleSheet()` for module CSS and `JemHelper::loadCss()` for shared component assets
JEM List Events content plugin	The plugin requests `jemlistevents.css` when it renders an event list inside content.	The plugin's template-aware Web Asset Manager loader
Frontend user CSS	The JEM site entry point requests `jem-user-front.css` after the component has executed. Each JEM module requests `jem-user-module.css` after its output and normal module styles.	`JemHelper::loadFrontendUserCss()` and `JemHelper::loadModuleUserCss()`

The view still chooses what it needs. Centralisation does not load every CSS file on every page. A view requests only its required logical styles; the helper decides which physical file supplies each style.

Component CSS Resolution Priority

For styles requested through JemHelper::loadCss('name'), JEM uses the following priority:

Enabled CSS Manager replacement: the explicitly selected file in media/com_jem/css/custom/.
Matching conventional custom file: the active variant in the custom directory, followed by its base filename.
Active template variant: for example templates/cassiopeia/css/com_jem/jem-responsive.css.
Distributed active variant: for example media/com_jem/css/jem-responsive.css.
Template base file: for example templates/cassiopeia/css/com_jem/jem.css, when a requested responsive variant is not available.
Distributed base file: for example media/com_jem/css/jem.css.
Additive user layer: when present, media/com_jem/css/custom/jem-user-front.css is loaded after the component styles.

Exact responsive overrides are recommended. When Responsive layout is active and JEM supplies jem-responsive.css, create templates/YOUR_TEMPLATE/css/com_jem/jem-responsive.css. A base jem.css override is only the fallback when no matching responsive file is available earlier in the chain.

Legacy and Responsive Filenames

Logical style	Legacy filename	Responsive filename
Main frontend	`jem.css`	`jem-responsive.css`
Administrator	`backend.css`	`backend-responsive.css`
Calendar	`calendar.css`	`calendar-responsive.css`
Geolocation forms	`geostyle.css`	`geostyle-responsive.css`
Google map	`googlemap.css`	`googlemap-responsive.css`
Print	`print.css`	`print-responsive.css`
Day timetable	`timetable.css`	`timetable-responsive.css`

Feature styles without a distributed responsive counterpart, such as Leaflet, Lightbox, event links or attachments, fall back to their base file unless the active template supplies a matching responsive variant.

Frontend Template CSS Overrides

Place a replacement component stylesheet in the active site template:

templates/YOUR_TEMPLATE/css/com_jem/FILENAME.css

Examples for Cassiopeia:

templates/cassiopeia/css/com_jem/jem-responsive.css
templates/cassiopeia/css/com_jem/calendar-responsive.css
templates/cassiopeia/css/com_jem/eventsmap.css
templates/cassiopeia/css/com_jem/leaflet.css
templates/cassiopeia/css/com_jem/jem-attachments.css

A template CSS override is a replacement. Copy the original file first if the view still needs all standard JEM rules, then customise the copy. If only a few declarations need changing, the additive jem-user-front.css method is usually easier to maintain.

Administrator Template CSS Overrides

The common backend stylesheet is requested once for all JEM administrator views. Place its override in the active administrator template:

administrator/templates/YOUR_ADMIN_TEMPLATE/css/com_jem/FILENAME.css

Examples for Atum:

administrator/templates/atum/css/com_jem/backend-responsive.css
administrator/templates/atum/css/com_jem/jem-attachments.css
administrator/templates/atum/css/com_jem/geostyle-responsive.css
administrator/templates/atum/css/com_jem/help-modal.css

Use the filename that corresponds to the active JEM layout mode. The active administrator template name is resolved automatically; it is not assumed to be Atum.

Module CSS Overrides

JEM modules can request several styles, such as the selected structural layout, a colour scheme and an icon mode. For each requested filename JEM checks these locations in order:

templates/YOUR_TEMPLATE/css/MODULE_NAME/FILENAME.css
templates/YOUR_TEMPLATE/html/MODULE_NAME/FILENAME.css — legacy-compatible location
media/MODULE_NAME/css/FILENAME.css
modules/MODULE_NAME/tmpl/FILENAME.css

The recommended CSS override location is the template's css directory:

templates/cassiopeia/css/mod_jem/responsive.css
templates/cassiopeia/css/mod_jem_teaser/blue.css
templates/cassiopeia/css/mod_jem_banner/iconfont.css
templates/cassiopeia/css/mod_jem_map/mod_jem_map.css

The existing templates/YOUR_TEMPLATE/html/MODULE_NAME/FILENAME.css path remains supported for compatibility. New customisations should normally use templates/YOUR_TEMPLATE/css/MODULE_NAME/ so PHP layout overrides and CSS overrides remain clearly separated.

JEM List Events Plugin Override

The JEM List Events content plugin searches for its stylesheet in this order:

templates/YOUR_TEMPLATE/css/plg_content_jemlistevents/jemlistevents.css
templates/YOUR_TEMPLATE/css/jemlistevents.css — legacy-compatible location
media/plg_content_jemlistevents/css/jemlistevents.css

Use the first, extension-specific path for new overrides. The legacy root-level template path remains available for existing websites.

Using Custom Replacement Stylesheets

Use a replacement when you need to maintain a complete modified copy of a standard component stylesheet.

Open Components → JEM → Control Panel → CSS Manager.
Find the required standard stylesheet.
Select Copy as custom and enter a descriptive CSS filename.
Edit the new file in media/com_jem/css/custom/.
Open JEM Settings → Layout → Custom Stylesheets.
Enable the custom stylesheet for the applicable Legacy or Responsive CSS entry and select the copied file.
Save, clear caches and test every view that uses that logical stylesheet.

The CSS Manager displays whether a custom file is available, active or unassigned. An assigned file cannot be deleted until its Settings assignment is disabled or changed. Depending on permissions, administrators can edit, download and delete custom files.

A replacement must be complete enough for its scope. The standard or template stylesheet is not also loaded. Missing rules in the replacement can therefore remove styling from every view that requests that logical CSS file.

Using Additive User Override Stylesheets

Use the user files for small overrides that should be loaded after normal JEM CSS:

File	Scope	When it loads
`media/com_jem/css/custom/jem-user-front.css`	JEM frontend component views	Once, after the component's requested JEM stylesheets.
`media/com_jem/css/custom/jem-user-module.css`	JEM frontend modules	After the normal styles of the rendered JEM modules.

In CSS Manager, find User override stylesheets and select Create. The file becomes active by existing; it does not need to be assigned in JEM Settings. Edit only the rules that must differ from the normal stylesheet.

/* Example: a small frontend-only adjustment */
#jem .jem-event {
    border-radius: .5rem;
}

#jem .jem-event .jem-event-title {
    font-weight: 600;
}

These user files are additive and do not replace the standard CSS. They are therefore normally the safest option for a small number of site-specific declarations.

Practical Examples

Example 1: Replace Responsive Frontend CSS in Cassiopeia

Confirm that JEM Settings → Layout style is set to Responsive.
Copy media/com_jem/css/jem-responsive.css.
Save the copy as templates/cassiopeia/css/com_jem/jem-responsive.css.
Edit the template copy and clear Joomla, template and browser caches.
Inspect the page source or browser developer tools and confirm that the template path is loaded instead of the media path.

Example 2: Make One Small Change Across Frontend Views

Create jem-user-front.css from CSS Manager.
Add only the required selectors and declarations.
Do not enable a custom replacement in Settings.
Verify that the user file appears after the normal JEM component stylesheets.

Example 3: Override a Module Layout CSS File

Open the Joomla module and note its selected layout, for example responsive.
Copy modules/mod_jem/tmpl/responsive.css.
Save it as templates/cassiopeia/css/mod_jem/responsive.css.
Edit the copy and confirm that the module loads the template CSS path.
If all JEM modules need one small final adjustment, use jem-user-module.css instead.

Example 4: Customise JEM Administrator Pages

Check whether JEM uses Legacy or Responsive layout.
Copy media/com_jem/css/backend-responsive.css for Responsive mode, or backend.css for Legacy mode.
Save it under administrator/templates/atum/css/com_jem/, using the same filename.
Open several JEM administrator views, including lists, edit forms, CSS Manager and modal selectors.
Confirm that the administrator template copy is loaded once and that specialised CSS remains present where required.

Troubleshooting

Symptom	What to check
The template override is ignored.	Confirm the active site or administrator template, exact directory, filename and letter case. For Responsive mode, prefer the exact `-responsive.css` filename.
The media CSS still loads.	Check whether the override is in `templates/YOUR_TEMPLATE/css/com_jem/`, not in the PHP layout override directory. Also check whether a child template is active.
A CSS Manager file has no effect.	A replacement must be enabled and selected under Settings → Layout → Custom Stylesheets. User override files are different: they become active when the correctly named file exists.
Responsive changes do not appear.	Verify the active JEM Layout style and whether the requested view uses the responsive variant. Check both the normal and responsive CSS settings.
A module ignores the component override.	Module layout CSS uses its own module path and selector. Use `templates/YOUR_TEMPLATE/css/MODULE_NAME/` or `jem-user-module.css`.
The final user CSS appears too early.	Confirm that it is named exactly `jem-user-front.css` or `jem-user-module.css`. Remove old manual template tags or system plugins that inject a different copy.
Rules are visible but do not win.	Inspect selector specificity and `!important`. JEM colour settings can also generate inline rules, so disable the conflicting colour option or use an appropriately specific selector.
Changes appear intermittently.	Clear Joomla cache, template cache, CDN or reverse-proxy cache and browser cache. Check minification or CSS-combination plugins after testing with optimisation disabled.

Technical Notes for Developers

JemHelper::loadCss() is the central resolver for JEM component and shared feature styles.
The global frontend layout setting supplies the optional -responsive suffix. A stylesheet already requested with that suffix is not suffixed a second time.
The common administrator stylesheet is requested once from the JEM administrator entry point; specialised views request only their additional CSS.
All resolved files are registered through Joomla's Web Asset Manager instead of mixing direct document stylesheet insertion with managed assets.
Stable asset names prevent the same logical stylesheet from being emitted more than once in one response.
Module layout values are normalised from both template:layout and plain layout formats. Empty legacy values fall back to default.css.
jem-user-front.css declares the component styles requested during the current component execution as dependencies. This keeps it after those styles even when Joomla sorts the asset graph.
jem-user-module.css is moved to the end of the active module style order as JEM modules render, keeping the additive module layer after normal module styles.
Map, Lightbox, links, attachments and other shared CSS now use the same component resolver and can therefore be overridden through css/com_jem/.
The legacy module CSS override path and legacy JEM List Events plugin path are retained for existing installations.

Safe Customisation Checklist

Choose replacement CSS only when the whole standard file needs to be maintained.
Use an exact template filename for the active Legacy or Responsive mode.
Use jem-user-front.css or jem-user-module.css for small additive changes.
Keep a backup of custom files and record why each override exists.
Test normal, responsive and print output where applicable.
Test component pages, administrator pages, modules and content-plugin output separately.
Use browser developer tools to verify the final URL and order of loaded stylesheets.
Retest after changing the Joomla template, JEM Layout style, module layout or optimisation plugin configuration.

CSS manager

Open the CSS Manager

CSS Loading Flow

1. Request

2. Resolve

3. Register and order

Where Stylesheets Are Requested

Component CSS Resolution Priority

Legacy and Responsive Filenames

Frontend Template CSS Overrides

Administrator Template CSS Overrides

Module CSS Overrides

JEM List Events Plugin Override

Using Custom Replacement Stylesheets

Using Additive User Override Stylesheets

Practical Examples

Example 1: Replace Responsive Frontend CSS in Cassiopeia

Example 2: Make One Small Change Across Frontend Views

Example 3: Override a Module Layout CSS File

Example 4: Customise JEM Administrator Pages

Troubleshooting

Technical Notes for Developers

Safe Customisation Checklist

Related Documentation

Related GitHub Issues