Once you fine-tune an appealing layout design, save it to your library. You can then apply the same visual recipe to other compatible elements.
What you will learn
- Prepare an element for saving as a skin.
- Choose a safe and clear name.
- Save an appearance preset to the My skins section.
- Recognize elements that cannot be saved as a skin.
First, make an actual change
Select a supported row, position, or module and modify at least one of its visual properties. You can adjust background, padding, border, border radius, or shadow. The editor tracks whether changes have been made to the element. A completely unmodified element cannot be saved as a new skin because it would not produce any useful preset in the library.
A skin stores only safely serializable visual styling. It does not store module content, its title, or live Joomla data. This is an advantage: you can apply the exact same appearance elsewhere without unintentionally copying text.
Saving a custom skin
- Select a supported element and fine-tune its appearance in the inspector.
- Inspect it on desktop and mobile viewports. A skin can also store supported responsive values.
- In the Actions section, choose Save skin.
- Enter a concise name between 2 and 48 characters. Plain letters without diacritics, numbers, spaces, and hyphens are most reliable—for example, Soft Card Blue.
- Confirm the save. The application automatically categorizes the skin based on its target, such as layout, navigation, content, commerce, or module.
- Open Select skin and verify that the new entry appears under My skins.
What cannot be saved as a skin
Skins are available only for registered targets that use allowed CSS settings. The special main content container (mainbox) is not saved to this library. Custom HTML modules also do not use the skin library; save their reusable structures as snippets instead. If the Save skin button is missing, it usually indicates an unsupported selection type rather than a system error.
Caution regarding special characters in names
The interface ultimately accepts only safe ASCII characters in skin names. For instance, use "Modra karta" instead of "Modrá karta" to avoid unexpected naming rejections.
What to check before saving
A saved skin can also appear in other templates associated with your account, so it should not rely on the accidental context of a single specific row. Test it on both light and darker backgrounds to ensure sufficient contrast. Note that background images themselves are not transferred during export.
Include the purpose and key variation in the name—for example, "Card Dark Compact". Avoid including specific page names unless the design is strictly meant for that page alone. If you create a significantly different variant later, save it under a new name. For minor one-time tweaks, leave the changes directly on the element to keep your library clean and organized.
After saving, we recommend testing the skin on another compatible element. This verifies that the skin contains the intended values and that its appealing look is not merely the result of the surrounding row's context.