New to Telerik Reporting? Start a free 30-day trial

Styling the Web Report Designer with ThemeBuilder

The ThemeBuilder is a powerful web-based tool designed to help you style Telerik and Kendo UI components effectively.

It offers a user-friendly visual interface to customize colors, fonts, and various styling properties. Since the Web Report Designer and its Report Viewer rely on such components internally, you can use ThemeBuilder to create a cohesive theme that extends to them.

Creating a Theme

To create a theme using ThemeBuilder, follow these steps:

Navigate to the ThemeBuilder website.
Sign in with your Telerik account.
Click Create New Project to open the project creation dialog.
Enter a project name, choose Font Icons as the icon type, select a version and a base theme (e.g., Default), and click Create New Project to finalize your selections.

The Web Report Designer and its internal HTML5 Report Viewer use font icons, so it is essential to select the correct icon type. This ensures that your changes are correctly applied in the application later on.

Customizing the Theme

Modify Theme Variables

Adjust predefined variables to affect global changes across colors, fonts, and other styling aspects. This approach is ideal for maintaining consistency and quickly applying broad changes.

The Kendo UI Design System documentation is the recommended place for learning about the inner settings of the themes, and how to edit them:

Colors - Relative Colors in the Telerik and Kendo UI Design System
Spacing - Spacing in the Telerik and Kendo UI Design System
Iconography - Visual Adjustments for Icons in the Telerik and Kendo UI Design System
Typography - Typography in the Telerik and Kendo UI Design System
Border Radius - Border Radius in the Telerik and Kendo UI Design System
Elevation - Elevation in the Telerik and Kendo UI Design System
Motion - Motion in the Telerik and Kendo UI Design System

Customize Component Properties

For more granular control, you can directly tweak the styling properties of specific components. This approach allows for precise design adjustments without altering the overall theme. For example, you can customize parameter editors, which use Kendo components like ComboBox, ListView, MultiSelect, and DatePicker, directly in ThemeBuilder.

Additionally, you may want to modify other components such as the modal dialogs (which are essentially Window components), or the flat base variant of the Button component, which is used to define the toolbar buttons.

For more details on the properties customizations, check Exploring the Component Properties.

Customizing Existing Themes

Another approach for using a custom theme is customizing one of the existing ones. The following documentation articles are recommended as a starting point when such an approach is used:

Meridian - Telerik and Kendo UI Meridian Theme Customization
Bootstrap - Telerik and Kendo UI Bootstrap Theme Customization
Material - Telerik and Kendo UI Material Theme Customization
Fluent - Telerik and Kendo UI Fluent Theme Customization
Default - Telerik and Kendo UI Default Theme Customization
Classic - Telerik and Kendo UI Classic Theme Customization

Using the Theme

After finalizing your customizations, you can export your theme. Click Export All in the upper-right corner of the ThemeBuilder app. This action will download a ZIP package containing the CSS and Sass files, which you can reference in your project.

For example, copy the CSS file from the css folder in the exported package and add it to your project. Load the css stylesheet on the page with the Web Report Designer, or on a shared page, or in the root of the application if the project type is a Single Page Application.

Besides loading the custom stylesheet, the useExternalTheme property of the Web Report Designer widget must be set to true during its initialization.

HTML

<!--<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/14.3.0/default/default-ocean-blue.css" id="theme-css" />-->
<link rel="stylesheet" href="/css/tb-theme.css" />

<div id="webReportDesigner">
    Loading...
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $("#webReportDesigner").telerik_WebReportDesigner({
            useExternalTheme: true, // Enable custom theming
            toolboxArea: {
                layout: "list"
            },
            serviceUrl: "api/reportdesigner/",
            report: "Product Catalog.trdp",
            startMode: "design"
        }).data("telerik_WebReportDesigner");
    });
</script>

In JavaScript-based projects, if preferred, you can instead utilize the files from the scss folder as an NPM package. Further information on this approach can be found at Using the ThemeBuilder Output as an NPM Package.