Creating Workspace Themes

Creating a workspace theme is a simple process that only takes a few steps, this article will guide you through creating a new theme from scratch and implementing it.

Create Telerik Theme

The first step in the process is to create a new Telerik theme using their theme builder.

Use the Telerik Style Builder to modify the CSS Theme:

1. Go to the website Telerik Visual Style Builder
2. Select the “Telerik Theme Builder” link which will take you to: https://themebuilder.telerik.com
3. Pick the “UI for Blazor” link which will take you to: https://themebuilder.telerik.com/blazor-ui
4. Select the “Start Theming” link which will take you to a page where you can start to build a custom branded theme for your website
5. We recommend that you start with the “Default” theme and “Select All Components”
6. Scroll to the bottom and hit the “Create” button
7. Customize the selections on the left-hand side to set the colors you want for the various user experience elements
8. When you are satisfied, click the Download button on the top Right and enter the name of your theme.
9. Extract all the files from the zip folder.

Update app.css

Inside the UX-WASM-Components project’s wwwroot/css folder there is a file called app.css. This file is used to apply any custom styles that will take priority over the styles produced from the Telerik Theme Builder.

First you’ll need to make a copy of the app.css file and make any modifications you’d like to it, then save it in the same location as your Telerik Theme.

Add Theme to Workspace

Log into your trellispark workspace and navigate to the Workspace application under Systems Administration. Then select the Themes tab and select the Add new Theme button.

Next, pick a Name for your theme and upload your Logo, Theme CSS, and App CSS.

The Logo is used to display an alternate logo for the theme, if this field is left blank the default logo specified in the project will be used instead.

The Theme CSS is the CSS file that the Telerik Theme Builder produced.

The App CSS is the app.css file that should be saved in the same location as your Telerik Theme and modified.

The Font URL is the URL to the font that will be applied to the application. The font must also be defined in the app.css file to correctly be applied.

Once finished select the Done button.

Next, open the My Profile window and navigate to the Appearance tab. Your new theme will be available in the Theme dropdown list.

Your Theme will now update and is saved as a configuration parameter so next time you log in the selected theme will automatically be loaded.

Setting a Default Theme

In some cases you’ll want to specify a default theme that’s initially loaded that isn’t the one provided by GreatIdeaz. This theme would be applied starting at the login screen and would be the default theme loaded for new users.

To do this you’ll need to update the application/build variables that are located in different locations depending on the project type.

• UX-WASM-SA/B2B/B2C
  • wwwroot/appsettings.json
• UX-MAUI-SA
  • MauiProgram.cs

IMPORTANT NOTE: When you’re specifying a new default theme you need to ensure that the has been created in every workspace and portal. If you don’t do this and the user changes their theme in the profile window they won’t be able to go back to the default theme because it won’t be listed.

UX-WASM-SA/B2B/B2C

You will need to update the following items:

• DefaultThemeName
  • The value should match the name of the theme defined in the workspace/portal. E.g., “Light”.
• DefaultThemeTelerikURL
  • The value should be the URL to the CSS file produced by the Telerik Theme Builder
• DefaultThemeAppURL
  • The value should be the URL to the app.css file that should be in the same location as the Telerik Theme CSS.
• DefaultThemeLogoURL
  • The value should be the URL to the logo that will be displayed on the application.
  • This value is optional and can be left empty.
• DefaultThemeFontURL
  • The value should be the URL to the font that will be applied to the application.
  • This value is optional and can be left empty.

IMPORTANT NOTE: These variables should also be modified on your build pipelines.

UX-MAUI-SA

You will need to update the following items inside the jsonData string:

• DefaultThemeName
  • The value should match the name of the theme defined in the workspace/portal. E.g., “Light”.
• DefaultThemeTelerikURL
  • The value should be the URL to the CSS file produced by the Telerik Theme Builder
• DefaultThemeAppURL
  • The value should be the URL to the app.css file that should be in the same location as the Telerik Theme CSS.
• DefaultThemeLogoURL
  • The value should be the URL to the logo that will be displayed on the application.
  • This value is optional and can be left empty.
• DefaultThemeFontURL
  • The value should be the URL to the font that will be applied to the application.
  • This value is optional and can be left empty.

IMPORTANT NOTE: These variables should also be modified on your build pipelines.