1 2 3 4 5 Previous Next 62 Replies Latest reply on Jun 23, 2019 3:38 PM by Mark Wu 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

             

            screenshot_343.png

             

            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">

            .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#666666;}

            </style>

             

            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.

             

            Important:

            • 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 2 3 4 5 Previous Next