1 2 3 4 5 Previous Next 73 Replies Latest reply on May 5, 2020 6:36 AM by Toby Erkson Go to original post Branched to a new discussion.
      • 60. Re: Changing color top bar tableau server
        Toby Erkson

        Very helpful, thanks Tyler MArtin

        This will help those who love self-flagellation.

        • 61. Re: Changing color top bar tableau server
          Mark Wu

          Thanks Tyler MArtin for the Windows Brotli.exe. For those who use Mac,  here is alternative approach to create compression files .br using Brotli algorithm.


          1. Download the attached Python banner.py

          2. Copy vizportal.css, vizportal.js, and vizportal.min.js to a directory where banner.py is (they can be in different directories but it is simpler to put them in the same dir)

          3. Run the following commands to get .br files:

                        $ python banner.py --input vizportal.js --output vizportal.js.br

                        $ python banner.py --input vizportal.css --output vizportal.css.br

                        $ python banner.py --input vizportal.min.js --output vizportal.min.js.br


          4. Run the following commands to get .gz files (Mac should have gzip utility installed, if not, read https://www.gzip.org/ )

                        $ gzip -k vizportal.js

                        $ gzip -k vizportal.css

                        $ gzip -k vizportal.min.js

          • 62. Re: Changing color top bar tableau server
            Mark Wu

            Tableau V2019.2 completely changed banner layout and design. Whatever banner change process worked in previous versions does not work for V2019.2 anymore. It took me a while to figure out the following V2019.2 banner changes that can change the following 4 things:

            1. Left banner background color change

            2. Label color change

            3. Icon color change

            4. Current menu background color change




            Those changes involve the following files and their .gz and .br files @ \opt\tableau\tableau_server\packages\vizportalclient.2019*.*.*.*\public

            or Windows \Program Files\Tableau\Tableau Server\packages\vizportalclient.2019*.*.*.*\public

              • vizportal.js
              • vizportal.css
              • vizportal.js.gz
              • vizportal.css.gz
              • vizportal.js.br
              • vizportal.css.br
              • \img\ space_navigation_admin_groups.svg
              • \img\ space_navigation_admin_schedules.svg
              • \img\ space_navigation_admin_settings.svg
              • \img\ space_navigation_admin_site_status.svg
              • \img\ space_navigation_admin_tasks.svg
              • \img\ space_navigation_admin_people.svg
              • \img\ space_navigation_home.svg
              • \img\ space_navigation_explore.svg
              • \img\ space_navigation_favorites.svg
              • \img\ space_navigation_recents.svg
              • \img\ space_navigation_sites.svg
              • \img\ space_navigation_me.svg


            A. Vizportal.js file change


            • Change rgb(250,250,250) to rgb(xxx, yyy, zzz) -- this is for left banner backgrounder color change #1 in screenshot above
            • Change rgb(102,102,102) to rgb(x, x, x) -- this is label text color (like Home, Explore, etc) change #2 in screenshot above
            • Change rgb(241,241,241) to rgb(y, y, y) -- this is current menu background color change #4 in screenshot above


            B. Vizportal.css file change


            • Change line 3348 from #fafafa to #new_hex  - - this is for left banner backgrounder color change #1 as well. #fafafa is the hex# code of default rgb(250,250,250). After you decide new color, get the hex# and use it here. For example, if Vizportal.js new rgb is rgb(85,190,244), then new_hex will be used here is #55bef4


                      3346 .tb-app-banner {

                      3347  height: 70px;

                      3348  background-color: #fafafa;

                      3349  min-width: 300px;

                      3350  overflow: hidden;

                      3351 }

            Note: There are many other places where you will find #fafafa in the vizportal.css file. If you care about left banner background color change only, change the line 3348 should be good enough.

            • Change line 3367 from #e1e1e1 to #new_hex -- this is optional for custom logo border color. It makes sense to be the same color as banner background color.

                      3365  -webkit-border-radius: 8px;

                      3366  -khtml-border-radius: 8px;

                      3367  border: 1px solid #e1e1e1;

                      3368  -moz-box-shadow: 0;


            • Change line 3379 from #666 to #222 -- This is again for the label text color (like Home, Explore, etc) change #2. Short Hex code  #666 is the same as long Hex #666666 which is for default text color rgb(102,102,102). When background color is darker, the label text does not step out anymore. So change it to darker color make more sense, like #333, #222, or #111

                      3374 .tb-app-banner-text-area {

                      3375  float: left;

                      3376  font-size: 13px;

                      3377  font-family: Benton Sans, Arial, Helvetica, sans-serif;

                      3378  margin: 13px 0px 13px 0px;

                      3379  color: #666;

                      3380  line-height: 1.35;

                      3381  text-decoration: none;

                      3382 }


            C. Icon color change -- Default theme is very light. When banner background color is changed to other color, you will notice the icons (#3 in the screenshot)  does not step out anymore. So you may want to change the icon to darker color. It is not simple here anymore since all icons are SVG (Scalable Vector Graphics) files. You will need to change them one by one - at least 12 of them.  In my screenshot above, you noticed that the Schedules icon was changed to darker color vs. other default color.


            Use text editor to open each of the SVG file, like spaces_navigation_home.svg, you will notice the following section


            <style type="text/css">




            Change #666666 to #191919 or whatever other colors.  Hex #666666 is the same as short code #666 which is for default text color rgb(102,102,102).


            D. Create .gz and .br for each changed file.


            F. Copy changed files (.js, .css, .br, .gz) back to above folders, overwrite original files (backup already) and test. Make sure to clear browser cache to load new changes - no need to restart the server for changes to be effective.



            • Pls always backup those files before make any changes.
            • After each server upgrade, you will need to apply those changes again
            • For each file above, you will also need to rename the original .gz and .br files, and recreate each of those separately.  Like vizportal.js, vizportal.js.gz, vizportal.js.br. If you have difficulty to create .br or gz, Tableau sever will work  without them although .br and .gz are supposed to improve performance.
            1 of 1 people found this helpful
            • 63. Re: Changing color top bar tableau server
              Sagar Sidhpura

              Tyler Martin , you nailed it.. I was searching on how to create a .br file and was unable to find any clear information until I landed to this post. Thank you once again for the detailed explanation.

              • 64. Re: Changing color top bar tableau server
                Sagar Sidhpura

                @Deepak Reedy Mogulla - Thank you for the detailed information on how to create a .gz file. I was struggling to find this information and finally landed to this post. The steps suggested by you works like a charm!

                • 65. Re: Changing color top bar tableau server
                  Hans Huisken

                  Below is a way how to change the dark-grey/black topbar when a dashboard is displayed.


                  Original look:


                  Changed into our company green (#51b548):


                  Only one (1) file to change : <install-path>\packages\vizportalclient.<version-build-number>\public\index.html

                  Ex. D:\Program Files\Tableau\Tableau Server\packages\vizportalclient.20194.19.1105.1444\public\index.html


                  Line 8 starts with “<meta name=” and ends with “</head>”.

                  Change this to (where red is original content) :

                  <meta name="vizportal-config" data-buildId="2019_4_88_2k1nik14ttn" data-staticAssetsUrlPrefix=""><link href="vendors~vizportal.css? …… 31f5078a41dcaa"></script>


                    .tb-main-content span[props=pageHeaderProps] div[class^="PageHeader_container-viz-"],

                    .tb-main-content span[props=pageHeaderProps] div[class^="PageHeader_container-viz-"] > span  {

                        background-color: #51b548;


                    button[data-tb-test-id="favorites-menu"] img {

                        background-color: #51b548;





                  This works in version 2019.4.x

                  For the topbar color, it works as well in 2019.2 and 2019.3. But for these versions the favorite star-icon background might be tricky.

                  Not tested yet for 2020.1 (beta at this moment).

                  1 of 1 people found this helpful
                  • 66. Re: Changing color top bar tableau server
                    Karthik Semban

                    Hi All,


                    Although, Mark Wu have given a clear understanding on how to make changes inside css files, I have come up with a simple way for v2020.1.



                    This is how it looked, after I mage changes. Let me explain step by step, so it will be helpful for others. FYI, I did this only inside Windows. For Linux, I am not sure, where vizportal file sits, but once you find it, then rest all same.


                    Step 1: Get inside Server box, go to this location, C:\Program Files\Tableau\Tableau Server\packages\vizportalclient.20201.xx.xxx.xx\public

                    Step 2: Copy VIzportal.cssfile and put it in desktop or some safe place.

                    Step 3: Make a duplicate of same Vizportal.css and make all changes inside duplicate file, as we don't want to mess up anything in original source.

                    Step 4: Right click and edit Vizportal.css, I recommend to edit with Notepad++ as it is easy to save later.

                    Step 5: Go to last of Vizportal.css page and paste the below code.


                    /*custom changes below from My Company*/


                    .Navigation_left-panel_f29iywj {

                    background: url(https://i.pinimg.com/736x/7a/b5/41/7ab541cb70c4fe04a4160e81de73f6e8.jpg) !important;


                    .Navigation_left-panel-shown_f1a8etdo {

                    background: url(https://i.pinimg.com/736x/7a/b5/41/7ab541cb70c4fe04a4160e81de73f6e8.jpg) !important;


                    .site-picker_button_fivnwke {

                    color: rgb(255, 255, 255) !important;

                    font-weight: bold;


                    .tb-main-content {

                    background: url(https://images8.design-editor.com/95/9553498/3958%2FB8941A25-F0B3-BA0A-6B8B-E14F2CCD8271.jpg_650) !important;

                    color: #ffffff !important;


                    .Navigation_nav-list_fsesztj li div a div.Navigation_nav-link-text_f1yp75l2 {

                    color: #FF9800 !important;

                    font-weight: bold;


                    .no-content_secondary_fyf20li {

                    color: white !important;


                    .no-content_primary_f151asi0 {

                    color: white !important;


                    .ContentExplorer_toolbar_flpi71c {

                    color: white !important;


                    .ContentExplorer_toolbar_flpi71c {

                    color: white !important;


                    h1,h2 {

                        color: white !important;


                    .tb-scroll.tb-tabs-banner-subplace-settings-banner.tb-scroll-settings {

                        color: white !important;

                        background: url(https://images8.design-editor.com/95/9553498/3958%2FB8941A25-F0B3-BA0A-6B8B-E14F2CCD8271.jpg_650);


                    .tb-settings-group-name {

                      font-size: 15px;

                      font-weight: bold;

                      padding-bottom: 12px;

                      color: #FF9800;


                    .SpaceContainer_space-tab-container_fmm897k {

                        align-items: flex-end;

                        box-sizing: border-box;

                        display: flex;

                        flex-direction: row;

                        font-size: 15px;

                        height: 26px;

                        justify-content: flex-start;

                        padding-bottom: 6px;

                        color: #ffffff !important;


                    .tb-settings-banner {

                      height: 35px;

                      padding-left: 85px;

                      background: url(https://images8.design-editor.com/95/9553498/3958%2FB8941A25-F0B3-BA0A-6B8B-E14F2CCD8271.jpg_650) !important;

                      border-bottom: 1px solid #FF9800;



                    Remember, you should have a little CSS edit knowledge and need to know, how to play with browser developer tool.


                    Step 6: Once you paste the above content in the css file, save it and close the notepad++.

                    Step 7: Download 7-Zip and install in same machine, where you have this css file. You can download and install it it from https://www.7-zip.org/

                    Step 8: Now, right click on edited css file and select 7-Zip and Select "Add to Archive"



                    Step 9: Make sure, you have similar as what I pasted below and click OK.



                    Step 10: After compressing to .gz format now lets download Brotli.exe from https://textslashplain.com/2015/09/10/brotli/

                    Step 11: Paste brotli.exe file in some location and also vizportal.css in same folder and open command prompt and navigate to same location where Brotli is pasted. See screenshot below.



                    Step 12: Past the following command, to convert vizportal.css to vizportal.css.br . It will automatically export a .br file and now you have both vizportal.css and vizportal.css.br and you have already created vizportal.gz using 7-Zip.

                                     --in vizportal.css --out vizportal.css.br




                    Step 13: Now, go to C:\Program Files\Tableau\Tableau Server\packages\vizportalclient.20201.xx.xxx.xxx\public and replace these 3 new files (.css, .gz, .css.br) with existing files. Make sure, you already have backed up the original.


                    You no need to restart the server. Just a refresh of page should work.


                    Now let me give some explanation about above CSS coding.


                    1. background: url(https://i.pinimg.com/736x/7a/b5/41/7ab541cb70c4fe04a4160e81de73f6e8.jpg) !important;


                    1. This URL, i randomly took from google. You can replace with any you want. If you don't want to trust an URL, then get a high resolution image file and paste it inside D:\Program Files\Tableau\Tableau Server\packages\vizportalclient.20201.xx.xx.xxx\public\img folder.

                    2. Instead of using above code, use this --> background: transparent url("https://<Your Server Adress>/img/Context-Background.jpg") !important;


                    I would recommend, work with a web developer in your company, who can help you better, if you are not sure about the coding above. You can reply to my post, if you find difficulty in sorting out. Happy to help



                    Karthik Semban

                    • 67. Re: Changing color top bar tableau server
                      Brent Schebel

                      OMG this is incredible! This is so much needed inside companies with a lot of their own branding! Thank you so much for your efforts here.

                      • 68. Re: Changing color top bar tableau server
                        Toby Erkson

                        Just remember to have your QA/TEST/WHATEVER environment with the same changes so when a new version comes out you can see if anything breaks.  Most likely you will need to perform this process all over again with the next version.  Also remember this is unsupported by Tableau so if anything breaks because of this you are on your own.


                        Not fun to state the above but there are a lot of server admins who are new to this and we really don't want them to have unexpected and unpleasant surprises

                        • 69. Re: Changing color top bar tableau server
                          Karthik Semban

                          You're welcome! Thought to include couple more corrections from mt previous post and I am using this chance to include it here, so others might get benefited.


                          Step 12: The command is "Brotli.exe --in vizportal.css --out vizportal.css.br"


                          Attached Screenshot of code, for better understanding.







                          • 70. Re: Changing color top bar tableau server
                            Karthik Semban

                            Well said @Toby Erkson! It is always good to do first in POC server machine and once when everything looks good, we can put in in Dev/QA/Prod. Even, being a Server Admin, I hate to do this, which is an added work to me. But, the business needs their branding and theme to be included, as they really depend on it. If we say, it's not supported by Tableau, they are ready to change the BI Tool, despite, thinking, what benefit they are getting from tableau. So, for this purpose we are forced to take this move and that is what happening in most of the company.


                            I wish, Tableau, in their future release, make some option to set a theme for web page, like how, they have "tsm customize set --blah --blah". These days, dark theme, night mode are getting trended and all application moving towards it. Would be good, if Tableau, being a visual analytics platform, focus a little bit on theme of web page. These days, even gmail and other web pages have custom theme option.

                            • 71. Re: Changing color top bar tableau server
                              Toby Erkson

                              I agree.  A simple customization editor would be nice that doesn't rely on having to know CSS, HTML, Java, etc.


                              Site Note

                              For Chrome I highly recommend this extension to darken web pages (too much white bothers my eyes), I love it!

                              • 72. Re: Changing color top bar tableau server
                                Sagar Sidhpura

                                Hello All, I had followed steps suggested in this thread and till date all my customization was working fine. Recently I upgraded my DEV server to 20201.2 and the customization was working fine without any issues. So planned to do the upgrade of our QA server however started observing a strange behaviour. No matter what I do, my custom modified file are not being picked up by Tableau. I created .br and .gz version of the modified Vizportal.Js file however still no luck.


                                Just to avoid any issue due to upgrade, I did the complete upgrade again after uninstalling Tableau using Obliterate command, upgrade went fine. Again I tried to do the customization and same issue . To troubleshoot further, Little to my knowledge I understand the home page which renders on the site, it refers information from vizportal.js file. So In my DEV server, I went ahead and deleted the file called vizportal.js, vizportal.js.br and vizportal.js.gz and then tried to access the site and got a blank screen, which I feel is an expected behaviour. I placed the three file (vizportal.js, vizportal.js.br and vizportal.js.gz) again in public folder and refreshed the browser and my DEV site was up.  So I went ahead and did the same step in QA server ( Problematic server) and what I noticed is, even after deleting the three files (vizportal.js, vizportal.js.br and vizportal.js.gz) from public folder, the site still works for me. I tried restarting the server, clearing browser cache, etc but nothing works. My question is


                                1) Is there any cache for vizportal.js, vizportal.js.br and vizportal.js.gz stored on server?

                                2) If the three files vizportal.js, vizportal.js.br and vizportal.js.gz are not present in Public folder, shouldn't we get a blank screen?

                                3)If the expected behaviour is to get a blank screen, then can you plz suggest what I can do more to identify from where our server is taking the reference of the three file (vizportal.js, vizportal.js.br and vizportal.js.gz) even when they are not present on any of the server in Public folder.


                                NOTE: I did opened a case with Support and they were of no help and was redirected to community.

                                • 73. Re: Changing color top bar tableau server
                                  Toby Erkson

                                  Sagar Sidhpura wrote:




                                  NOTE: I did opened a case with Support and they were of no help and was redirected to community.

                                  And, like I say in every thread where people want to do this, Tableau support never will be able to help.


                                  Early on I, too, liked to change my QA environment a different color so it would be visually obvious compared to PROD.  After several upgrades and more convoluted tweaking of too many files I gave up.  Good luck in finding a solution but don't expect it to last when a new version comes out.

                                  1 2 3 4 5 Previous Next