Skip to main content

Extended Product

 

OutSystems

Customizing Silk UI

Understanding Silk UI CSS

Silk UI Mobile CSS Structure

Silk UI Web CSS Structure

Customizing Patterns

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.

Contributing to Silk UI

You can contribute by providing feedback on your experience with the framework, sharing ideas and also reporting any issues you find while using Silk UI. Use the official Forums and get the Community involved.

  • Was this article helpful?