The code dialog is designed for more precise editing of Custom HTML and restricted CSS. It is not an environment for executing JavaScript, PHP, or arbitrary web code.
What you will learn
- Open code editing only for supported elements.
- Distinguish between HTML structure and CSS styling.
- Work within the safety restrictions of the editor.
- Verify results without breaking the template.
Two layers of a single block
HTML defines the structure: headings, paragraphs, links, images, or groups of elements. CSS determines their appearance: colors, spacing, borders, or alignment. For the Custom HTML module, the Edit code dialog can offer both parts. For other supported elements, only restricted CSS is typically available.
If you are not familiar with HTML, start with system snippets and inline editing. Use code mode only for small tweaks that visual controls do not offer. A single missing closing tag can alter the layout of the entire block.
Recommended workflow
- Clone the module first if it contains an important finalized layout.
- Select a supported element and open Edit code in Actions.
- Modify as small a portion as possible. For text, edit only the content between tags rather than the structure itself.
- In CSS, use standard declarations and selectors specific to the block. For images, select a secure reference from the Image Bank.
- Save the dialog and monitor validation messages. Do not attempt to bypass filters if a construct is rejected.
- Check both clean Preview and mobile viewports. Wait for the configuration to autosave.
What the security filter blocks
HTML is sanitized on both the server and client sides. Executable scripts, event attributes such as onclick, unsafe protocols, and other risky constructs are rejected or stripped. Restricted CSS disallows features like @import, @font-face, JavaScript protocols, and unverified external image URLs.
The editor does not execute PHP, and a snippet is not a substitute for a Joomla plugin.
The filter is part of the final output
Code that disappears after saving was not in the safe set. Choose a simpler HTML structure or standard properties from the inspector.
A simple, safe example
To highlight a short note, a standard wrapper container with a class, a heading, and a paragraph is sufficient. In CSS, you then define the background, border, and padding. Such a block is clean, easy to sanitize, and simple to test.
If issues arise, revert to the last working version and add declarations one by one. Treat validation warnings and the console purely as technical guidance; the rendered clean preview is what matters. If you require interactive functionality that safe Custom HTML cannot deliver, use an appropriate Joomla extension with dedicated permissions and maintenance.
Before exporting, reopen the block to ensure that the sanitized, safe version displayed is what actually saved. Do not rely on code that was only temporarily typed into the dialog field.