CSS manager

The CSS Manager helps administrators review, copy, edit, and maintain JEM CSS files. In JEM 5.0.0 it is designed to work together with Settings → Layout → Custom Stylesheets, so custom CSS can be managed more safely across updates.

The recommended workflow is to copy a standard JEM stylesheet as a custom file, edit the custom file, then enable and select it in Settings → Layout. Direct edits to standard JEM CSS files can be overwritten by updates.

Where to Find This Screen

Open the Joomla administrator and go to Components → JEM → CSS Manager. The screen is also available from the JEM control panel.

From the CSS Manager you can also open the JEM Settings page to enable or assign custom stylesheets.

When to Use CSS Manager

Use CSS Manager when you need to change JEM styling but want those changes to remain separate from JEM core files.

Scenario	Recommended use	Why
Small visual changes	Copy the relevant stylesheet as custom and edit the custom file.	Keeps changes update-safe.
Responsive frontend changes	Start from the matching responsive stylesheet, such as `jem-responsive.css`.	Prevents assigning CSS to the wrong layout scope.
Backend styling changes	Copy and edit `backend.css` or `backend-responsive.css`.	Keeps administrator styling separate from frontend styling.
Print layout changes	Use `print.css` or `print-responsive.css`.	Targets printed output without affecting normal pages.
Major HTML structure changes	Use Joomla template overrides instead of CSS Manager alone.	CSS Manager changes styling, not the generated HTML structure.

How the CSS Manager Is Organized

JEM 5.0.0 shows standard CSS files and compatible custom files in one comparison-style table.

Standard file: the original JEM stylesheet shipped with the package.
Standard version and size: helps identify which JEM version the source file belongs to.
Copy as custom: creates an editable custom copy.
Custom files: custom stylesheets grouped by their source stylesheet.
Status: shows whether a custom file is active, available, or missing.
Custom version, size, created, and modified: helps audit custom CSS files after updates.

Multiple custom files can exist for the same standard stylesheet. Only the files enabled and selected in Settings → Layout are active.

Standard and Custom CSS Files

Standard CSS files are stored under media/com_jem/css. Custom files are stored under media/com_jem/css/custom.

File group	Examples	Used for
Frontend legacy	`jem.css`, `calendar.css`, `geostyle.css`, `googlemap.css`	Legacy or non-responsive JEM output.
Frontend responsive	`jem-responsive.css`, `calendar-responsive.css`, `googlemap-responsive.css`	Responsive JEM output used by current layouts.
Backend	`backend.css`, `backend-responsive.css`	JEM administrator interface.
Print	`print.css`, `print-responsive.css`	Print-specific JEM output.
Support styles	`colorpicker.css`, `colorpicker-responsive.css`	JEM interface features such as colour picker support.

Create a Custom CSS File

Open Components → JEM → CSS Manager.
Find the standard stylesheet that matches the output you want to style.
Click Copy as custom.
Enter a custom CSS file name. The file must use the .css extension.
Edit the new custom file.
Save the file.
Go to Settings → Layout → Custom Stylesheets.
Enable Use custom for the matching source stylesheet and select the custom file.

A custom file copied from one source stylesheet should be assigned only to that matching source. For example, a custom file copied from jem-responsive.css should not be assigned to googlemap.css.

Custom File Metadata

When CSS Manager creates a custom file, it adds a short metadata header to the file. This helps JEM identify the relationship between the custom file and its source stylesheet.

Source stylesheet: the standard CSS file copied from.
Source JEM version: the JEM version installed when the custom file was created.
Source file size: the original source file size at copy time.

Older custom CSS files without this metadata can still be detected by filename matching when possible. Exact filename matches and source filename prefixes with - or _ are used as fallback matching rules.

Edit CSS Files

Custom files can be edited directly from CSS Manager. Standard files can also be opened, but direct edits to standard files are not recommended because updates can overwrite them.

Custom CSS: safe place for site-specific JEM styling.
Standard CSS: useful for inspection or emergency edits, but not update-safe.
Check CSS: checks for common syntax problems such as missing braces, unexpected closing braces, unclosed comments, or unclosed strings.
Fullscreen: helps when editing larger CSS files, depending on the editor interface.

If the CSS editor cannot open, make sure either the CodeMirror editor plugin or the None editor plugin is enabled in Joomla.

Statuses

CSS Manager shows the state of each custom stylesheet.

Status	Meaning	Action
Active	The custom file exists and is assigned in JEM Settings.	Edit carefully, because changes affect live output.
Available	The custom file exists but is not currently active.	Enable it in Settings → Layout if it should be used.
Missing	A custom file is configured but no longer exists on disk.	Restore the file, select another file, or disable the custom stylesheet setting.
Unassigned custom files	Custom CSS files exist but cannot be matched to a known standard source.	Review, rename, assign correctly, or delete if no longer needed.

Delete Custom CSS Files

Custom CSS files can be deleted from CSS Manager when the user has delete permission.

CSS Manager blocks deletion of a custom file that is still assigned in Settings. Disable or change the assignment first, then delete the file if it is no longer needed.

Recommended Workflow

Identify whether the page uses legacy, responsive, backend, or print CSS.
Copy the matching standard stylesheet as a custom file.
Make a small CSS change and save.
Run Check CSS.
Enable and select the custom file in Settings → Layout.
Clear Joomla cache and browser cache.
Test the affected frontend or backend page on desktop and mobile.

After Updating JEM

Review custom CSS files after updating JEM, especially when moving from JEM 4.5.0 to JEM 5.0.0. Custom CSS can remain valid, but it may no longer match changed markup or updated standard styles.

Compare old custom CSS with the current standard stylesheet.
Check the source version and source file size shown by CSS Manager.
Create a fresh custom copy when a standard stylesheet changed significantly.
Move only the custom rules that are still needed into the fresh file.
Review Settings → Layout to confirm each custom file is assigned to the correct stylesheet.

Troubleshooting

A custom stylesheet has no visible effect

Check that Use custom is enabled in Settings → Layout.
Check that the selected custom file matches the source stylesheet used by the page.
Clear Joomla cache and browser cache.
Use browser developer tools to confirm the CSS file is loaded.
Check whether the active Joomla template has stronger CSS rules.

A custom file is listed as missing

Restore the file to media/com_jem/css/custom.
Select a different custom file in Settings → Layout.
Disable the custom stylesheet if it is no longer needed.

The CSS editor does not save

Check Joomla permissions for the current user.
Check filesystem permissions on the JEM CSS folders.
Confirm that the file name is valid and ends with .css.
Check whether Joomla requires FTP credentials for file writes.

The page breaks after editing CSS

Run Check CSS and fix any reported syntax problem.
Temporarily disable the custom stylesheet in Settings → Layout.
Restore the previous custom CSS file from backup if needed.

Related Project Notes

#2211 documents the JEM 5.0.0 custom CSS management redesign and metadata workflow.
#1313 explains earlier confusion about where custom CSS files should be stored and shown.
#1052 relates to custom CSS selection not being saved in older list layout settings.
#1708 documents a Joomla 5 CSS Manager saving error that affected stylesheet editing.
#1488 relates to CSS editor line-number behaviour in the CSS Manager.