The Edit File screen is opened from the JEM CSS Manager when you edit a standard or custom CSS file. It provides a source editor, file metadata, quick navigation back to CSS Manager and Settings, and a built-in CSS syntax check.
For update-safe changes, edit a custom CSS file. Standard JEM CSS files can be inspected from this screen, but direct edits to standard files can be overwritten by a JEM update.
Where to Find This Screen
Open Components → JEM → CSS Manager, then click Edit on a custom file or open a standard file from the CSS Manager workflow.
The edit screen also provides buttons back to CSS Manager and Settings, so you can edit a file and then enable or assign it under Settings → Layout.
When to Use Edit File
| Scenario | Recommended use | Why |
|---|
| Change JEM styling safely |
Edit a custom CSS file copied from the matching standard file. |
Custom files are not overwritten by normal JEM updates. |
| Inspect the default styling |
Open the standard CSS file without changing it. |
Useful for understanding selectors before writing custom CSS. |
| Fix a small CSS syntax problem |
Use the editor and run Check CSS. |
The checker can catch common broken braces, comments, and strings. |
| Work on active custom CSS |
Check the Active badge before saving. |
Changes affect live output when the custom file is active. |
File Header and Status Information
At the top of the edit screen, JEM shows file information so you know what you are editing.
- File name: the CSS file currently open in the editor.
- File type: Standard CSS or Custom CSS.
- Active status: shown when a custom file is currently assigned in Settings.
- Size and modified date: useful when checking whether a file changed recently.
- Source file and version: shown for custom files created through CSS Manager.
If the file is marked as Standard CSS, copy it as a custom stylesheet before making persistent site-specific changes.
Standard CSS vs Custom CSS
| File type | Use it for | Update safety |
|---|
| Standard CSS |
Inspecting JEM default CSS and creating custom copies. |
Not update-safe for direct edits. |
| Custom CSS |
Site-specific JEM styling changes. |
Preferred update-safe workflow. |
Check CSS
The Check CSS button performs a simple syntax check before or after saving. It is designed to catch common editing mistakes.
- Unexpected closing braces.
- Missing closing braces.
- Unclosed CSS comments.
- Unclosed quoted strings.
The check is not a full CSS validator. It helps catch common structural errors, but browser developer tools are still useful for checking selector priority and actual loaded styles.
Edit and Save Workflow
- Open the matching custom CSS file from CSS Manager.
- Make a small, focused change.
- Click Check CSS.
- Save the file.
- Confirm the file is enabled in Settings → Layout.
- Clear Joomla cache and browser cache if the old style remains visible.
- Test the affected JEM page on desktop and mobile.
Copy as Custom
When a standard CSS file is open, the edit screen provides a Copy as custom action. This creates a custom file from the standard file and opens it for editing.
- The custom file must use the
.css extension.
- CSS Manager stores metadata in the custom file header.
- The custom file must still be enabled and selected in Settings → Layout before it affects output.
Delete Custom File
When a custom CSS file is open, the screen can show a delete action if the user has permission. Deleting a custom file removes it from media/com_jem/css/custom.
Do not delete an active custom file until it has been disabled or replaced in Settings → Layout. CSS Manager blocks deletion when the file is still assigned.
Editor Requirements
The edit screen uses the Joomla editor system. If the editor cannot load, check the editor plugins in Joomla.
- Enable the CodeMirror editor plugin for a code editing interface.
- Enable the None editor plugin if CodeMirror is not available.
- Check user permissions if the edit or save buttons are not available.
- Check filesystem permissions if saving fails.
After Updating JEM
After a JEM update, compare active custom CSS with the current standard CSS file. The edit screen helps by showing the custom file source version and source file information when available.
- Open the active custom file and note its source version.
- Open the matching standard file to inspect current JEM CSS.
- Create a fresh custom copy if the standard file changed significantly.
- Move only the needed custom rules into the fresh file.
- Run Check CSS before saving.
Troubleshooting
The file does not save
- Check Joomla user permissions for editing JEM.
- Check write permissions on the CSS file and folder.
- Check whether Joomla asks for FTP credentials.
- Make sure the filename is valid and ends with
.css.
The saved change is not visible
- Confirm that the custom file is active in Settings → Layout.
- Check that the edited file matches the stylesheet used by the page.
- Clear Joomla cache and browser cache.
- Use browser developer tools to confirm the CSS file is loaded.
The page layout breaks after editing
- Run Check CSS and fix any syntax warning.
- 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 metadata and safer edit workflow.
- #1708 records a Joomla 5 error when saving CSS in CSS Manager.
- #1677 is another CSS Manager saving issue reported during Joomla 5 testing.
- #1367 relates to file edit and writable/unwritable state handling in CSS Manager.
- #1488 relates to line-number behaviour in the CSS editing screen.
Related Documentation
