Changing the Report Builder’s theme to match your existing site’s theme is very easy, especially if your site uses Bootstrap for it’s theme or layout.
You can do it in 2 different ways. One is to add your site’s theme css file to the Report Builder’s layout file. The second and most common scenario for existing applications is to use your own site’s layout file for Report Views also.
First Option: Add your site’s theme css file to Report Builder’s layout file:
For the first option, after installing and setting up dotnet Report Builder’s Nuget Package, open up Report Builder’s Layout file, which should be in your “Views/Shared” folder. The file name is _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" />
And that should do it.
Second Option: Use your site’s layout file for Report Viewer:
This is what you would really want to do in most existing applications. This option is also very straight forward. dotnet Report Builder uses 2 View files:
- /DotNetReport/Index.cshtml
- /DotNetReport/Report.cshtml
Open each file, and replace the layout in the first lines to your layout file:
@{
ViewBag.Title = “Report Builder”;
Layout = “../shared/_Layout.Report.cshtml”;
}
To:
@{
ViewBag.Title = "Report Builder";
Layout = "../shared/_Layout.cshtml";
}
You have to make sure that you include all the script and css files in your layout file that are in Report Builder’s Layout, but not in yours. Usually common files like jQuery and Bootstrap will already be included.
Next add the route to dotnet Report Builder to your application’s menu, and you should be ready to test the layout.
Once you run your your application, dotnet Report Builder should look and feel like part of your application.
Here is an example:
