Customizing Report Manager Home Page

Customizing Report Manager Home Page 

Reporting Services provides default cascading style sheets (.css) files that define styles for the report toolbar in HTML Viewer and for Report Manager’s homepage. In this post we are going to modify the default styles to change the colours, fonts, and layout of the tool bar or Report Manager.

1.       Before You Start

Please note that doing this is not supported, as neither the default style sheets nor instructions for modifying the style sheets are documented.

Another reason why this is not recommended is because modifying the style sheets incorrectly can result in errors when opening reports. If you do not know how to modify style sheets, you should use the default style sheets. If you choose to customize the style sheets, be sure to create a backup of all default .css files before making any modifications.

If you are worried about the appearance of published reports when editing the styles sheets, don’t be. In Reporting Services, reports do not reference style sheets. Ad hoc reports that are auto-generated by the report server use style information that is stored as an embedded resource in the report server program files. Reports that you create in Report Designer use the fonts, colours, and layout that you specify in the report definition. Styles are created inline with the rest of the layout.

2.       So how do you modify the style sheet?

What makes this a difficult task is that the SSRS HTML is poorly constructed and as mentioned before there are no documentation on how to modify the styles sheets. And the tags you would most likely need to customize don’t have ID’s or classes assigned. But once you get the hang of it, you can customize the Reporting Services page to suit your client’s environment.

Our end result will look like this:

I know it’s a lot of style changes, but it was only for the purpose of this post. When modifying the report manager home page for a client I would recommend keeping it simple. Like for instance just changing the icons:

For this post, I used FireFox WebDeveloper to edit the Report manager style sheet (C:\Program Files\Microsoft SQL Server\MSRS11.MSSQLSERVER\Reporting Rervices\ReportManager\Styles). You might know of another tool to use or if you have better HTML knowledge than I do you can just edit the style sheet in Notepad. Use whatever you feel most comfortable with. J

                But before we start with that lets change some icons first.

1.       On the server reporting services is installed on open the folder C:\Program Files\Microsoft SQL Server\MSRS11.MSSQLSERVER\Reporting Services\ReportManager\images

2.       Rename the file folder_32.gif to anything else (Ex. folder_32OLD.gif). Just note that the file name depends on the version of Report manager you are using. For older version the file name is 48folderopen.jpg

3.       Resize your logo to be 32 x 32 pixels gif file. You need to keep this aspect ratio. Also, again for older versions of Report Manager this size is 48 x 48 instead of 32 x 32.

4.       Rename it folder_32.gif

5.       Copy your logo to the folder C:\Program Files\Microsoft SQL Server\MSRS11.MSSQLSERVER\Reporting Services\ReportManager\images

        And…ta da….Magic.

But of course nothing is that easy and there are a few issues with changing the images in the folder:

1.       You're constrained to the images size

2.       Subsequent upgrades could overwrite it

3.       Those images do serve some use - they change depending on the current function you're performing in the site.

But there is a work around. You can add the image/logo to the header of the page. Like so:

Your logo doesn’t have to fill the whole header like the example. It can be something small and simple like this (which would be more appropriate for a business/professional look and feel):

 Here is the bit of css code that was changed:

table.msrs-topBreadcrumb { background-color: lightgray; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 84%; font-weight:normal; color: black; Height: 100px; background-image:url("../images/Logo.gif");Background-repeat:no-repeat;  }

Just note that if you do add a logo in the top bar make sure that you set the padding for the breadcrumbs correctly, or you might end up with this as soon as you drill down to a report:

To fix this, I went and set the top padding for the breadcrumbs:

I can go into detail about how to change the header colour and text colour ect ect, but this is a post for SSRS and not HTML, so best would be to go and fiddle around with it yourself. Just remember, and I know I’m repeating myself but you’ll get over it, keep it simple. Don’t make too many changes to the style sheets as it can cause errors, even if you are an HTML guru.