A skin is a reusable appearance preset. Think of it as a saved recipe for a card, row, or column.
What you will learn
- Understand the difference between a skin and content.
- Recognize system versus custom skins.
- Identify appropriate situations for reuse.
- Avoid applying a skin to an incompatible element type.
Appearance without copying content
A skin (or visual style preset) stores allowed styling properties of an element. For example, it can include background, padding, border radius, border, shadow, or alignment. It does not store actual text, products, or live data from Joomla. Therefore, when you apply a card skin to another element of a supported type, you transfer its visual rules, not its content.
This differs from a snippet. A snippet is a content block designed for the Custom HTML module and can include safe HTML and custom CSS. A skin primarily defines how an element looks; a snippet also defines what is inside it.
System and custom skins
| Type | Purpose | What you can do with it |
|---|---|---|
| System | Pre-built appearance provided by the application. | Apply it, but cannot delete it from the shared library. |
| Custom | Appearance saved from a modified element. | Reuse it, rename its details, or delete it. |
The library distinguishes target element types. A skin designed for a row is not the same as a skin intended for a column. This prevents transferring properties to an element that cannot process them.
A simple example
- Customize the first card: white background, subtle shadow, border radius, and generous padding.
- Save these settings as a custom skin under a chosen name.
- Select another compatible element and open the skins library.
- Apply the saved skin and verify the result on mobile displays as well.
When using a skin is truly worth it
Skins make sense for elements you plan to repeat: service cards, contact boxes, navigation blocks, or similarly styled rows. If you are modifying a single unique section, it may be faster to apply settings directly to it without cluttering the library.
Also, distinguish a skin from a global design token. A primary brand color belongs in global settings because it is used across many different components. A skin is best suited for a specific combination—such as a white background, border, shadow, and padding. Thanks to this separation, you can later change your brand color while keeping the structural design of your cards intact. A well-designed library thus consists of a few practical recipes rather than a copy of every minor tweak.
Always evaluate a skin in context after applying it. A style designed for a wide main content area might not fit a narrow sidebar, and a light skin on a white row might require a border for contrast.
A skin is not a linked master template
Applying a skin applies settings locally to the specific element. Editing a saved skin later will not automatically update elements to which it was previously applied. Always check each result individually.