Skip to main content

Style your application

You can customize the look and feel of your application by applying CSS and/or adding a theme. This allows you to apply your organization's branding and style your application for your target users as required.

Grexx Platform uses CSS (Cascading Style Sheets) to control how your application is rendered on screen. You can use CSS to control your application's fonts, colors, spacing, alignment, button design, link format, and more.

You can also customize basic aspects of your application's styling using themes. Themes offer a low-code alternative to CSS for customizing your application's appearance. You can use themes on their own or in conjunction with CSS.

Add CSS​

You can add CSS at the platform level or for specific parts of your application. Both static CSS and CSS templates should adhere to CSS3 syntax.

When defining your application's CSS you can use all the standard HTML selectors, such as heading levels, list items, tables, images, and links. When creating templates (for example, to create a template widget) you can apply CSS classes to HTML elements. You can also apply CSS classes to specific elements (such as form fields, navigation bars, or widgets) from the Studio. You can then define styles for those classes in your CSS.

Static CSS​

Static CSS is designed for any styles that are not dependent on the context (such as the current case or user). This means the CSS can load faster, and provides a fallback if dynamic CSS is not applied for any reason. Static CSS is also used for error and loading pages.

To add or edit your static CSS, open Platform > Styling and enter or copy and paste your CSS into the Static CSS box.

If you do not specify any static CSS, the default Grexx Platform CSS is applied.

Dynamic CSS with templates​

Dynamic CSS is defined using templates. You can include functions in a template which are populated dynamically based on the context.

To apply a CSS template to the whole application, open Platform > Styling and select a template from the Dynamic CSS section. If you select multiple CSS templates, they are loaded in order, with later templates overriding previous templates.

You can also apply CSS templates to casetypes, views, and plugins:

  • Casetype CSS allows you to apply the same styling rules to all views of a casetype. For example, you might apply a CSS template to the User casetype in order to customize the styling of user profile pages.
    To apply a CSS template to a casetype, open the casetype and then click the edit icon to open the Edit casetype dialog. Select the Advanced tab and then select one or more templates from the CSS templates list.
  • View CSS allows you to apply styling rules to a specific view of a casetype. This can be useful if you have created an additional view for embedding in other casetype views (using a view widget) or if you have both a public-facing view of a page and one for logged in users.
    To apply a CSS template to a view, open the view, click the edit icon to open the Edit view dialog, and then select one or more templates from the CSS templates list.
  • Plugin CSS allows you to apply styling to a plugin that you have created, or modify the styling for a plugin that you have imported from Grexx Marketplace. For more information, see Widget plugin.

Add a theme​

You can use themes to configure styles for fonts, colors and borders using a WYSIWYG editor. You can use themes instead of or in addition to static CSS. Like static CSS, themes are not context-sensitive. This means you cannot configure different rules based on the cases being viewed, the user, or other details.

To add a theme:

  1. From your Studio, open Platform > Styling and select the Themes tab.
  2. Select an existing theme or click Create theme. The WYSIWYG theme editor is displayed.
  3. Use the Theme settings pane to customize the fonts, color and border settings. The effect of your changes is displayed on the left. Use the options at the top of the display to switch between standard elements from a view and the navigation preview.

To apply a theme, return to the Themes list, click Select active theme and then select a theme from the list. Note that any settings in your theme will override equivalent rules in your static CSS, but will be overridden by rules in your dynamic CSS and any CSS applied to casetypes or views.

Theme and CSS hierarchy​

Configuring CSS at multiple levels allows you to optimize some aspects of your CSS for faster loading while giving you the freedom to apply custom rules to specific areas of your application.

Themes and CSS are loaded in the following order, with those applied later overriding those that are applied earlier:

  1. Grexx Platform basic CSS (this is not editable)
  2. Static platform CSS
  3. Themes
  4. Dynamic platform CSS
  5. Dynamic casetype CSS
  6. Dynamic view CSS

The CSS for any widget plugins is handled separately. By default, any frontend libraries used to build the widget plugin define the appearance. You can override these settings by creating a CSS template and applying it to a specific plugin.

Customize styles for specific elements​

You may want to customize the style for only some instances of an element in your application. For example, you may want to change the size of form fields for forms included on public pages, or change the font size or color for grid widgets on a configuration page.

You can achieve this by defining styles for classes in your CSS and then adding those classes to specific elements in your application. For example, your platform CSS might define a class called public that applies various spacing and alignment rules. You can then add the public class to specific forms in order to customize the appearance of those forms. The classes that you apply to specific elements can be defined at the platform level or for specific casetypes or views.

You can apply CSS classes to the following types of element in your application:

  • Containers: For example, you may want to adjust the padding or spacing applied to some containers. In the view designer, select the container to display the properties pane and then add the class to the Extra classes field.
  • Widgets: For example, you may want to customize the appearance of tables (as used in grid widgets) or buttons in some places in your application. In the view designer, select the widget to display the properties pane and then add the class to the CSS classes field.
  • Forms: Open the form and click the edit icon to open the Edit form dialog. Select the Advanced tab and then add the class to the CSS classes field.
  • Form fields: In the form designer, select the field to display the properties pane and then add the class to the CSS classes field.
  • Navigation bars: Open the navigation bar and click the edit icon to open the Edit navigation dialog. Add the class to the CSS classes field.
  • Navigation items: From the Menu items tab for the navigation bar, click the edit icon to open the Edit menu item dialog and add the class to the CSS class field.
Tip:

If rules for the same class are defined in multiple places, the hierarchy described above determines which rules apply. For example, if you have applied a class to a specific widget, form, or navigation item, any rules in the CSS applied to a particular view will override the rules for the same class in the platform or casetype CSS.

Allow users to customize your application's styling​

You may want to provide multiple styles and allow users to choose between them. For example, you might want to make your application available in both light and dark styles, and allow users to save their preference. You can achieve this by adding an if then else function to the dynamic CSS template, and changing what is displayed based on the value stored in an attribute for the current user.

Note that Grexx Platform caches CSS to improve your application's performance. This means that if a user selects a different CSS template, they may not see the difference in style immediately. To address this, you can force a reload of the CSS cache when the user submits the activity that changes their choice of template:

  1. From the activity designer, select the On submit stage.
  2. Add a Context block to the activity, and set the Context type to Request context.
  3. From the Type list, select Reload caches.
  4. From the Value list, select from the following options:
    • Current user CSS: Avoid using this option where possible. Ensure that layout changes are based on class changes, not on the basis of CSS that is casedata dependent.
    • All CSS of all users: We recommend using this option where possible. Note that this option does not work when used in an event activity.
Note:

Where possible, avoid allowing users to customize your application's styling. Using dynamic CSS templates that are applied based on conditions can cause pages to take longer to load, with a negative impact on the user experience. It also makes your CSS more difficult to maintain.

Next steps​

Defining your own CSS requires some understanding of web development. If you want to style your application using CSS but require some support, please contact your Grexx Coach. For more information about resolving issues with styling, see Debugging CSS.