trellispark come with a default theme that is simple, clean, and adaptable to most applications. However, if custom styling is needed to differentiate the application, align with specific branding, or support certain functionalities, trellispark offers various styling options to modify and/or enhance the default styling.
Styling Hierarchy
There are four main styling options when it comes to adding custom styling in trellispark.
- trellispark theme
- app.css
- Form styling
- Field styling
The styling is applied in a cascading hierarchy, from the trellispark theme, to the field’s styling. This means that any styling specified at a level below another will override the styling at the level above, if there are conflicting styles.
For example, if button styling is applied at all levels, the field styling will be the styling that the button will take.
The last styling applied down the hierarchy overrides styles applied to any of the previous levels.
trellispark Theme
The trellispark theme is the main theme responsible for styling the bulk of the application, and is created by the Telerik Style Builder. Styling should be applied to this level as much as possible, to ensure consistent styling throughout the application. Styling at this level should also be used to configure various themes, if multiple themes are offered to the user (for example: a light and dark mode).
The trellispark theme is designed to configure the base styling that should be consistent throughout the application. Additional styles that should be specific to certain components and/or elements can be configured at lower levels such as app.css, the form and/or the field.
Refer to the Using Themes to Rebrand Your Workspace article to learn more about creating themes. All CSS theme files are located in the wwwroot folder in the UX-WASM-Components project.
Note: Any styles applied at the app.css, form, and/or field level that conflict with styles applied at the trellispark theme level, will override the styles at the trellispark theme level.
App.css
App.css is a CSS stylesheet file with the purpose of storing any styles that are outside the scope of what the trellispark theme provides, or of parts of the trellispark theme need to be overwritten.
The app.css file should be used for styling that needs to be applied across the entire application when the trellispark theme cannot provide the required customization. The styling will be applied to the application as a whole and/or override any conflicting styles that have been applied at the trellispark theme level.
A common example of when app.css would be used to style the description content of all fields across the application, ensuring consistent formatting throughout.
The app.css file is located in the wwwroot folder in the UX-WASM-Components project.
Note: Any styles applied at the form and/or field level that conflict with styles applied at the app.css level, will override the styles at the app.css level.
Form Styling
To apply styling specific to a single form within the application, form-level styling can be used.
Form styling should be used when a specific form in the application requires custom styling that is different than what has been applied at the trellispark theme and app.css level. Adding styling at the form level will ensure that the styling is only applied to that form.
Each form has a dedicated styling tab where custom styling can be applied to the form. To learn how to apply form styling, see the Styling Form Definitions article.
Note: Any styles applied at the field level that conflict with styles applied at the form level, will override the styles at the form level.
Field Styling
To apply styling specific to a single field within the application, field-level styling can be used.
Field styling should be used when a specific field in the application requires custom styling that is different than what has been applied at the trellispark theme, app.css, and form level. Adding styling at the field level will ensure that the styling is only applied to that field. A common example of field-level styling is applying a specific margin to a field to improve its positioning.
Field styling is applied to fields the same way form styling is applied to forms. Each field has a dedicated styling tab where custom styling can be applied to the field. In addition, field styling can also be applied directly to the description fields on the field.
To learn how to apply field styling, see the Styling Form Definitions article.
Note: Any styles applied at the field level that conflict with styles at any other level, will override the styles at all other levels.