Understanding Silk UI CSS
Silk UI Mobile CSS Structure
Silk UI Web CSS Structure
You can customize Silk UI patterns by writing additional CSS that changes their look and feel. Additionally, you can change the structure to be able to display something else or remove unwanted elements; you can even change the code and the pattern behavior — like adding swipe gestures or adding new events. Keep in mind that code customizations can make patterns behave unpredictably and are not officially supported.
By creating additional CSS on a new module, it is possible to override the look of most patterns, so this is the simplest way of customizing them.
Changing the structure of a pattern by, for instance, adding a couple of tabs, requires the pattern to be copied to a new eSpace and then adding the correct placeholders. The same rule applies to code changes. A copied pattern will not be upgraded with Silk UI versions that have code fixes.
Note: From OutSystems 10 onward, it's not possible to directly change Silk UI's modules. If you need to change a specific pattern, copy it and make the necessary changes in your cloned version.
Using Custom Designs with Silk UI
Silk UI themes are fully extensible with CSS. Your custom design should be implemented as you would do in any other UI framework: by overriding the default styles and adding new ones.
By following our conventions and rules to customize patterns, you are ensuring that you have an organized CSS structure easy to change and maintain.