How to style OutSystems screens using the Theme Editor and custom CSS overrides?

Styling OutSystems Screens Using the Theme Editor and Custom CSS Overrides

 

Styling OutSystems screens can significantly impact the user experience and interface design of your applications. Using the Theme Editor and custom CSS provides flexibility and control over the visual aspects of your OutSystems application. This guide provides a comprehensive step-by-step approach to effectively styling your OutSystems screens.

 

Prerequisites

 

• An OutSystems account with access to an OutSystems environment.
• Basic understanding of CSS and web design principles.
• Familiarity with the OutSystems platform and its screen design tools.

 

Understanding OutSystems Theme Editor

 

• The Theme Editor is an integrated tool within OutSystems that allows developers to customize the look and feel of an application globally.
• It provides options to modify various style elements, including colors, fonts, and screen layout rules.
• Changes made in the Theme Editor apply across all screens using the same theme, ensuring consistency.

 

Using the OutSystems Theme Editor

 

• Login to your OutSystems environment and open your application in Service Studio.
• Navigate to the "Interface" tab and select "Themes".
• Choose the theme you want to edit, or create a new theme by duplicating an existing one.
• Use the properties panel to adjust the primary and secondary colors, fonts, and other basic style settings.
• To change more specific aspects, navigate through different sections such as "Forms", "Buttons", and "Lists".
• Preview changes in real-time in the preview window to verify the adjustments made.
• Save the theme and publish the application to apply changes.

 

Implementing Custom CSS Overrides

 

• If you require more granular control, you can implement custom CSS to override the styles provided by the theme.
• Begin by creating a custom style sheet that can be linked to your OutSystems application.
• Navigate to the "Data" tab, then "Resources". Add your CSS file to resources.
• Link your CSS file by editing the "Scripts" section in the "Interface" tab.
• Within the custom CSS, define styles using appropriate selectors targeting specific screen elements or class names used in OutSystems.
• Ensure you use specific or 'important' selectors to override the default styles effectively.

 

Writing Effective Custom CSS

 

• Understand the structure of the generated HTML to target elements accurately using classes and IDs.
• Use browser developer tools to inspect elements on the screen, identify HTML structures, and understand existing styles.
• Create responsive designs by utilizing media queries within your CSS for adapting different device viewports.
• Example CSS snippet for styling a button:

  <pre>
  .my-custom-button {
    background-color: #3498db !important;
    color: #ffffff !important;
    border-radius: 5px;
  }
  </pre>
  

• Always test CSS changes across different browsers and devices for consistent appearance.

 

Testing Your Theme and CSS Changes

 

• Test your application in different browsers to ensure consistency in styling and functionality.
• Use OutSystems's 1-Click Publish feature to deploy your changes and validate them in the configured environments.
• Examine applications with different screen resolutions and orientations for comprehensive testing.

 

Deploying Styled OutSystems Applications

 

• Once validated in your development environment, proceed to publish your applications in a staging or production environment.
• Ensure that all relevant stakeholders review the visual elements for adherence to brand guidelines.
• Continuously gather user feedback to iteratively improve and adjust styles over time.

 

By following these steps, you can successfully style your OutSystems screens using the Theme Editor for easy adjustments and custom CSS for more specific styling needs. This process ensures your applications not only look visually appealing but also provide a seamless user experience.