{"id":119,"date":"2008-10-27T16:56:00","date_gmt":"2008-10-27T16:56:00","guid":{"rendered":"\/lisa\/post\/2008\/10\/27\/Walkthrough-Quick-branding-SQL-Server-Report-Manager-2005.aspx"},"modified":"2008-10-27T16:56:00","modified_gmt":"2008-10-27T16:56:00","slug":"walkthrough-quick-branding-sql-server-report-manager-2005","status":"publish","type":"post","link":"https:\/\/spacefold.com\/lisa\/2008\/10\/27\/walkthrough-quick-branding-sql-server-report-manager-2005\/","title":{"rendered":"Walkthrough: Quick-branding SQL Server Report Manager 2005"},"content":{"rendered":"<p align=\"left\">\nIt&#39;s been a month since my last post.&nbsp; I have some excuse; C and I have moved again, we&#39;ve found a place of our own in Marin (we&#39;ve been looking since we joined <a href=\"http:\/\/ecwise.com\" class=\"ecwLogoRef\"><span class=\"ecwLogoOrange\">EC<\/span><span class=\"ecwLogoGray\">|<\/span><span class=\"ecwLogoBlack\">Wise<\/span><\/a> last fall).&nbsp;\n<\/p>\n<p align=\"left\">\nWe&#39;re nicely settled in, now, thank you for asking, and I can dig my computer out of the rubble.\n<\/p>\n<p>\nWhat&nbsp;took so long to accomplish a simple local move, you ask?&nbsp; Why, the need to continue with real life (and real work) during this period. &nbsp;\n<\/p>\n<p>\nAs part of what went on during my Blog Hiatus, I did a presentation required me to envision, and display,&nbsp;a fully-realized Reporting Solution that didn&#39;t yet exist.&nbsp;\n<\/p>\n<p>\nI bet this has never happened to you. OK now I will SET&nbsp;SARCASM OFF.&nbsp;&nbsp;\n<\/p>\n<p>\nAs part of preparing it, I quickly and lightly &quot;branded&quot; a Reporting Services site &nbsp;to serve as the host for some demo reports I&nbsp;whipped up.&nbsp; In reality, we rarely use Report Manager as the vehicle for our reporting solutions, but this did the trick.\n<\/p>\n<p>\nAnd while I was doing this, I said to myself (with no&nbsp;sarcasm at all), &quot;I bet this is something a lot of people don&#39;t know how to do&quot;.\n<\/p>\n<p>\nIf you do know how to do it, read no further.&nbsp;\n<\/p>\n<p>\nOr maybe&nbsp;you, like me, generally host RS content in your own interface, in which case this walkthrough probably won&#39;t help you except in the aforementioned &quot;do this demo immediately&quot; scenario.\n<\/p>\n<p>\nOr maybe all of your clients have happily moved to RS 2008 already. Perhaps this is no big deal at all in RS 2008?&nbsp; You tell me &#8212; I haven&#39;t checked it out.&nbsp; (&quot;Come a day there won&#39;t be room for <a href=\"http:\/\/www.fireflyfans.net\/\" target=\"_blank\" title=\"Yes friends it's a Serenity quote\" rel=\"noopener\">naughty men like us<\/a> to slip about at all&#8230;So here is us, on the raggedy edge.&quot;)\n<\/p>\n<p>\nBut if I&#39;ve&nbsp;bet right, in your case &#8212;&nbsp;you don&#39;t know how to do this, and you might want or need to &#8212; keep reading, now you will.\n<\/p>\n<p>\nReady?&nbsp; This screen shot shows you what we start with.\n<\/p>\n<div style=\"text-align: center\">\n<img loading=\"lazy\" decoding=\"async\" style=\"width: 550px; height: 144px\" src=\"\/lisa\/wp-non\/migrated\/RSBrandBefore.PNG\" alt=\"Standard Report Manager interface\" title=\"Standard Report Manager interface\" width=\"550\" height=\"144\" \/>\n<\/div>\n<h4>&nbsp;&nbsp;<\/h4>\n<h4>Step 1: Fix the site name.<\/h4>\n<p>\nThis is really easy.&nbsp; You can do it through the ReportServer db, or you can do it through the Report Manager configuration pages.\n<\/p>\n<p align=\"center\">\n<img loading=\"lazy\" decoding=\"async\" src=\"\/lisa\/wp-non\/migrated\/RSBrandSiteNameThroughSiteSettings.png\" alt=\"Fixing the Report Manager site name, one way\" title=\"Fixing the Report Manager site name, one way\" width=\"540\" height=\"184\" \/>\n<\/p>\n<p align=\"center\">\n&nbsp;&nbsp;<img loading=\"lazy\" decoding=\"async\" style=\"width: 540px; height: 370px\" src=\"\/lisa\/wp-non\/migrated\/RSBrandSiteName.png\" alt=\"Fixing the Report Manager site name, another way\" title=\"Fixing the Report Manager site name, another way\" width=\"540\" height=\"370\" \/>\n<\/p>\n<h4 align=\"left\">Step 2: Fix the Report Manager styles.<\/h4>\n<p align=\"left\">\nThis one is not as easy, but almost.&nbsp;&nbsp;Adjust ReportingServices.css in the appropriate location :\n<\/p>\n<p align=\"left\">\n&nbsp;\n<\/p>\n<div style=\"text-align: center\">\n<img loading=\"lazy\" decoding=\"async\" src=\"\/lisa\/wp-non\/migrated\/RSBrandStep2.PNG\" alt=\"Finding the style sheet for Report Manager\" title=\"Finding the style sheet for Report Manager\" width=\"513\" height=\"388\" \/>\n<\/div>\n<p align=\"left\">\nTake a copy of the &quot;real&quot; style sheet first, and keep it safe, obviously! Don&#39;t bother trying to point the Report Manager to a file with a different name. You&#39;ll still have to do&nbsp;something similar&nbsp;later (see next step) but don&#39;t waste your energy here.\n<\/p>\n<p align=\"left\">\nAt this point in your work, things are starting to look a bit better in Report Manager land&#8230;\n<\/p>\n<div style=\"text-align: center\">\n<img loading=\"lazy\" decoding=\"async\" src=\"\/lisa\/wp-non\/migrated\/RSBrandStep2Result.PNG\" alt=\"Report Manager interface with Report Manager style sheet changes applied.\" title=\"Report Manager interface with Report Manager style sheet changes applied.\" width=\"520\" height=\"185\" \/>\n<\/div>\n<p align=\"left\">\n&#8230; but as you can probably see, especially when you demo reports,&nbsp;&nbsp;you still have a ways to go.\n<\/p>\n<div style=\"text-align: center\">\n<img loading=\"lazy\" decoding=\"async\" src=\"\/lisa\/wp-non\/migrated\/RSBrandStep2ResultReport.PNG\" alt=\"After step 2, report tool bar is not yet branded.\" title=\"After step 2, report tool bar is not yet branded.\" width=\"550\" height=\"203\" \/>\n<\/div>\n<h4>&nbsp;&nbsp;<\/h4>\n<h4>Step 3:&nbsp; Fix <em>ReportServer<\/em> CSS styles.<\/h4>\n<p align=\"left\">\nWhen Report Manager hosts a report, it&#39;s really getting some of its presentation&nbsp;information for the embedded report from ReportServer.&nbsp; We need to synch these things up.&nbsp; We&#39;ll start with the ReportServer CSS stylesheet.\n<\/p>\n<p align=\"left\">\nThis step is similar to the last one, but in my experience you have to do two things, and both are needed.&nbsp; If you don&#39;t do both, it looks like RS uses an internal version of its default HtmlViewer.css:\n<\/p>\n<ol>\n<li>\n<div align=\"left\">\n\tCreate your own CSS with a different name (say, MyHtmlViewer.css) based on the default HtmlViewer.css that ReportServer uses.<\/p>\n<div style=\"text-align: center\">\n\t<img loading=\"lazy\" decoding=\"async\" src=\"\/lisa\/wp-non\/migrated\/RSBrandStep3.PNG\" alt=\"Adjusting ReportServer style sheet\" title=\"Adjusting ReportServer style sheet\" width=\"391\" height=\"210\" \/>\n\t<\/div>\n<p>\n\t<\/div>\n<\/li>\n<li>\n<div align=\"left\">\n\tAdd a node referencing this new name to RSReportServer.config:<br \/>\n\t<strong>&nbsp;&lt;HTMLViewerStyleSheet&gt;MyHtmlViewer&lt;\/HTMLViewerStyleSheet&gt; <\/strong>\n\t<\/div>\n<\/li>\n<\/ol>\n<div style=\"text-align: center\">\n<img loading=\"lazy\" decoding=\"async\" src=\"\/lisa\/wp-non\/migrated\/RSBrandStep3Config.PNG\" alt=\"Pointing to the new ReportServer style sheet in RS configuration.\" title=\"Pointing to the new ReportServer style sheet in RS configuration.\" width=\"550\" height=\"242\" \/>\n<\/div>\n<p align=\"left\">\n&nbsp;\n<\/p>\n<p align=\"left\">\nNow we&#39;re getting somewhere. But we&#39;re clearly not done.\n<\/p>\n<p align=\"left\">\n&nbsp;\n<\/p>\n<div style=\"text-align: center\">\n<img loading=\"lazy\" decoding=\"async\" src=\"\/lisa\/wp-non\/migrated\/RSBrandStep3Result.PNG\" alt=\"After applying ReportServer styles, report interface is getting better but still not quite.\" title=\"After applying ReportServer styles, report interface is getting better but still not quite.\" width=\"537\" height=\"182\" \/>\n<\/div>\n<h4>&nbsp;&nbsp;<\/h4>\n<h4>Step 4: Fix the Report Manager images.<\/h4>\n<p>\nThe last screen shot shows you that ReportServer and Report Manager don&#39;t take care of everything by CSS.&nbsp; You need to clone a couple of images, too.\n<\/p>\n<p>\nIn this branding exercise I&#39;ve deliberately changed the toolbar color significantly, so I&#39;ll need to change the toolbar edge GIFs provided by Report Manager to match.&nbsp; I&#39;ll also change a few of the top-left icon images to match my vision for this site.\n<\/p>\n<p>\nThis screen shows you the location of all the images, and also all four images that I chose to edit for this walkthrough.&nbsp; There are two &quot;toolbar edge&quot; GIFs and two top-left icon JPG file:\n<\/p>\n<ul>\n<li>toolbar_edge_top.gif<\/li>\n<li>toolbar_edge_bottom.gif\n\t<\/li>\n<li>48folderopen.jpg<\/li>\n<li>48report.jpg<\/li>\n<\/ul>\n<p>\n&nbsp;\n<\/p>\n<p style=\"text-align: center\">\n<img loading=\"lazy\" decoding=\"async\" src=\"\/lisa\/wp-non\/migrated\/RSBrandStep4.PNG\" alt=\"Editing Report Manager images\" title=\"Editing Report Manager images\" width=\"540\" height=\"291\" \/>\n<\/p>\n<p>\nHow many of the top-left icon images you choose to edit (especially if, like me, you are not thinking about using this interface in Production) depends mostly on how many of the Report Manager pages you think you need to show in the demo.&nbsp; The two I&#39;ve chosen here are really the main two.&nbsp; Don&#39;t fuss too much about the administration and configuration page icons unless you know your customer has some specific need they address.\n<\/p>\n<p>\nIn this next screen shot, you can see the results as I showed them in the Report Manager&nbsp;report-navigating&nbsp;interface&#8230;\n<\/p>\n<div style=\"text-align: center\">\n<img loading=\"lazy\" decoding=\"async\" style=\"width: 513px; height: 207px\" src=\"\/lisa\/wp-non\/migrated\/RSBrandStep4Result1.PNG\" alt=\"ReportManager UI with edited images\" title=\"ReportManager UI with edited images\" width=\"513\" height=\"207\" \/>\n<\/div>\n<p>\n&#8230; and&nbsp;here you can see how&nbsp;they appeared when running a report:\n<\/p>\n<div style=\"text-align: center\">\n<img loading=\"lazy\" decoding=\"async\" style=\"width: 472px; height: 166px\" src=\"\/lisa\/wp-non\/migrated\/RSBrandStep4Result2.PNG\" alt=\"Running report in Report Manager with edited images in synch\" title=\"Running report in Report Manager with edited images in synch\" width=\"472\" height=\"166\" \/>\n<\/div>\n<p align=\"left\">\nSo.. we&#39;re done. See how easy?\n<\/p>\n<h4>OK, OK, it can be even easier. And a lot prettier.<\/h4>\n<p align=\"left\">\nFor this walkthrough, I deliberately changed the color of the toolbar. It looks pretty ugly, but&nbsp;the toolbar edge part&nbsp;happened to be the hardest part to figure out so I wanted to make sure you had that part in-hand.&nbsp;&nbsp; It&#39;s also difficult to do perfectly; for this walkthrough I haven&#39;t really blended the colors properly.&nbsp; (I did a better job in the real presentation.)\n<\/p>\n<p align=\"left\">\nBut you can do this a lot easier (and not touch the two toolbar edge GIFs! ) simply by keeping the default toolbar color&nbsp;its nice tawny light brown, and changing the <strong>active tab<\/strong> color to match it. Let&#39;s go back to the original &quot;before&quot; picture, and consider the dramatic difference that might make.\n<\/p>\n<div style=\"text-align: center\">\n<img loading=\"lazy\" decoding=\"async\" style=\"width: 550px; height: 144px\" src=\"\/lisa\/wp-non\/migrated\/RSBrandBefore2.PNG\" alt=\"Consider working with the Standard Report Manager interface colors\" title=\"Consider working with the Standard Report Manager interface colors\" width=\"550\" height=\"144\" \/>\n<\/div>\n<p align=\"left\">\nThe default interface contrasts between the active tab and the toolbar, for no good reason. Matching the two, especially if you can find a way to do it with your client&#39;s color palette, dramatically streamlines the look of Report Manager as well as reducing your &quot;branding&quot; work.\n<\/p>\n<p align=\"left\">\nHere&#39;s an example, from our last gig in Vegas:\n<\/p>\n<div style=\"text-align: center\">\n<img loading=\"lazy\" decoding=\"async\" style=\"width: 540px; height: 215px\" src=\"\/lisa\/wp-non\/migrated\/RSBrandActiveTabMatching.PNG\" alt=\"Results of working with the Standard Report Manager interface colors: a sophisticated interface\" title=\"Results of working with the Standard Report Manager interface colors: a sophisticated interface\" width=\"540\" height=\"215\" \/>\n<\/div>\n<p align=\"left\">\n&#8230; I think the result is much more sophisticated looking than the default RS colors and contrasts.&nbsp;\n<\/p>\n<h4 align=\"left\">What&nbsp;do you think? <\/h4>\n<p align=\"left\">\nHope you enjoyed this little look at the world of RS Branding.&nbsp; If not, drop me a line and tell me what else needs explication.&nbsp; I&#39;ll try to post more frequently in the future.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>It&#39;s been a month since my last post.&nbsp; I have some excuse; C and I have moved again, we&#39;ve found a place of our own in Marin (we&#39;ve been looking since we joined EC|Wise last fall).&nbsp; We&#39;re nicely settled in, now, thank you for asking, and I can dig my computer out of the rubble.<a class=\"more-link\" href=\"https:\/\/spacefold.com\/lisa\/2008\/10\/27\/walkthrough-quick-branding-sql-server-report-manager-2005\/\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,6],"tags":[],"class_list":["post-119","post","type-post","status-publish","format-standard","hentry","category-reporting","category-sql-server"],"_links":{"self":[{"href":"https:\/\/spacefold.com\/lisa\/wp-json\/wp\/v2\/posts\/119","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spacefold.com\/lisa\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/spacefold.com\/lisa\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/spacefold.com\/lisa\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/spacefold.com\/lisa\/wp-json\/wp\/v2\/comments?post=119"}],"version-history":[{"count":0,"href":"https:\/\/spacefold.com\/lisa\/wp-json\/wp\/v2\/posts\/119\/revisions"}],"wp:attachment":[{"href":"https:\/\/spacefold.com\/lisa\/wp-json\/wp\/v2\/media?parent=119"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/spacefold.com\/lisa\/wp-json\/wp\/v2\/categories?post=119"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/spacefold.com\/lisa\/wp-json\/wp\/v2\/tags?post=119"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}