Creating Custom Themes

Platform includes several built-in themes that were built using Telerik Kendo UI. You can customize any of these themes to match the look and feel of your website using the Kendo UI ThemeBuilder, a tool that lets you modify Kendo UI themes.

Refer the Kendo UI ThemeBuilder documentation for details about modifying themes.

You can also customize built-in themes using custom CSS. When you add custom CSS to an application, you are overriding the defaults in the default Platform CSS files. You can view the contents of these files to gain insight into customizations you want to make. The CSS file location for the built-in themes are in[ROLLBASE_HOME]/prod1/css/newui/ . You can also see the CSS files used on a particular page by viewing the page source in your browser.

Note:
  • You can leverage a hosted File to implement a Tenant-wide theme (the hosted file is only an override since Platform v4.0.0)
  • You can leverage a Custom header or custom side bar to implement an App specific theme (or override some rules from your own tenant wide custom theme)

The CSS rules are split into two files - newuiStructure.css and newui.css. The newui.css contains the rules that you would likely want to override.The remaining is into the structure, thus providing a smaller file to focus upon. Platform also provides theme specific files. Both the full newui.css as well as the theme files are available in uncompressed format.

Use the utility function rb.newui.util.getThemeContentColors to access the current built-in theme color. You may also use this function for a more complex scenario to dynamically change some colors on elements.

Use the utility functionrb.newui.util.getContrastColor to compute a contrast color dynamically: The intent is to help write scripts where one needs to compute the color dynamically and assign it using jQuery on the fly. For example - a text color contrasted from a background color.

The new UI has the following CSS Inclusion order:

  1. newuiStructure.css
  2. newui.css
  3. newui.<theme-name>.css
  4. custom Header or custom Sidebar

Platform includes FontAwesome icons, which are scalable vector icons that can be customized for size, color, drop shadow, and anything that can be done with CSS. See the following resources for instructions and examples of using FontAwesome icons:

Perform the below steps to create a custom theme using hosted CSS files.

  1. Override specific Platform CSS rules based on your color palette and overall design.
  2. Create a Kendo UI custom theme CSS file using the Kendo UI Themebuilder.

    Note: This step is optional. Perform this step only if there is a need to change the overall design of the Kendo UI widgets. However, if the need is to override a few rules, for example the primary color, you can simply do that as part of step 1 above.

  3. Combine these into a single CSS file and attach it to your application environment as a hosted file:

    • Log under the tenant/customer to which you want to apply the custom theme

      Note: This is applicable to only a customer tenant.

    • Under App Setting and click Hosted Files.
    • Choose New Hosted File and give it a File Name (the name of your theme is recommended - you can create multiple themes this way).
    • Upload the CSS file.

  4. Assign CSS file to the tenant (Customer) for applying the theme to all your applications:

    • Go to Setup Home
    • Select Account Settings (only available if logged under non-master tenant)
    • In Appearance, for the CSS stylesheet, select the name of the style created previously