Customizing the theme of Dotnet Report Builder to match your existing site’s design is simple, especially if your site uses Bootstrap. You can achieve this in two different ways:
- Preferred Option is by adding your site’s theme CSS file to the Report Builder’s layout.
- Alternate option is using your own site’s layout for the Report Builder views.
Use Your Site’s Layout for Report Views
This is the preferred method for most existing applications, as it provides a more integrated look and feel. To use your own site’s layout for the Report Builder views, follow these steps:
Dotnet Report Builder uses two main view files:
- /DotNetReport/Index.cshtml
- /DotNetReport/Report.cshtml
Open each file and update the layout reference in the first few lines from the default layout to your site’s layout. For example, replace:
@{
ViewBag.Title = "Report Builder";
Layout = "../shared/_Layout.Report.cshtml";
}With:
@{
ViewBag.Title = "Report Builder";
Layout = "../shared/_Layout.cshtml";
}Ensure that your layout file includes all necessary script and CSS references used by Dotnet Report Builder. Typically, common libraries like jQuery and Bootstrap will already be present in your layout. However, you may need to update the references or versions to match those used by Report Builder. Dotnet Report has all the includes that it uses in these partial view files:
- _DotnetReportHeaderPartial.cshtml – This file contains all the library includes that needs to go in the header section.
- _DotnetReportJsLibrariesPartial.cshtml – This file contains all the JavaScript includes that needs to be placed at the end of the page.
- _DotnetReportTemplatesPartial.cshtml – This file includes all the common HTML templates that Dotnet Report uses.
So be sure to add these partial views that are used in the default Report Builder layout to your site’s layout file.
Finally, add the route to Dotnet Report Builder in your application’s menu, and you’re ready to test.
Alternate Option: Add your site’s theme css file to Report Builder’s layout file:
This option is ideal if you want to quickly apply your existing CSS to Dotnet Report Builder. After installing and setting up the NuGet package, follow these steps.
Open this file and add your site’s theme CSS file to the <head> section, just below the Bootstrap reference. For example:
Navigate to the Report Builder’s layout file, which is located in the Views/Shared folder of your project. The file is named _Layout.Report.cshtml.
Simply add your site’s theme’s css file to head section, and dotnet Report Builder will match your site’s theme below “bootstrap.cs”.
<link href="/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/themes/mysite/mytheme.css" rel="stylesheet" />Save the file, and your Report Builder will now use your site’s custom theme in addition to Bootstrap.
Here is an example:
