CSS magic tricks with Embedded Tableau Server views

Tableau 9.2 is right around the corner and one of the biggest changes on the Server side will be an updated toolbar. There is now an Undo and Redo button, and everything has been rearranged in a logical manner. The buttons that appear or disappear based on permissions are now on the right. And all of the export and download buttons are now combined together into a Download drop down menu.

9_2 toolbar

Also, it’s gray. The toolbar has been white for a long time but it’s 100% gray in Tableau 9.2

What isn’t changing? The Download/Save As permission is still one single permission, so if you are exposing Tableau to the outside world and want to allow Web Edit but not Downloading, you’ll still need to hide the toolbar and recreate all of the functionality you want to enable. But with a little ingenuity, we can pinpoint exactly what we’d like to hide and really control what we keep and what we hide.

Note: Everything after here is unsupported by Tableau Support. If you make any changes to files, expect them to be overwritten with each update you do, so create a process for saving and then reintroducing your changes to subsequent upgraded versions. Also, these could change at any time with further changes to Tableau Server.

If you don’t see changes you’ve put in place, you may need work around caching — see this guide.

Tableau Server Essentials

When you look at a Viz in Tableau Server, and it is not embedded, you are actually seeing two different processes:

  1. vizportal : This is all of the UI (menus, toolbars) that you do not see when you have embedded a viz. It was introduced in 9.0 as the replacement for the earlier wgserver process (wgserver is still running though doing other things)
  2. vizqlserver: The server version of vizql. It renders everything you see when the viz is embedded (and the same portion when not embedded), and the Web Edit view. This includes the toolbar on top of the viz and all of the UI of the Web Edit.

Why does this matter? The directories where the CSS files live for the two processes are different.

vizqlserver’s CSS directory will look something like:

C:\Program Files\Tableau\Tableau Server\9.2\vizqlserver\public\v_92001510281752\css\

Obviously the ‘v_…’ portion changes with each upgrade.

vizportal’s CSS directory looks like:

C:\Program Files\Tableau\Tableau Server\9.2\vizportalclient\public\

You’ll notice in both of these directories that there is a .gz version of almost each file. Tableau Server is configured to serve up the .gz version of the files if they exist. So when you are editing and trying to test your changes, you’ll want to rename those .gz files to end with .gz.original, and then eventually create a new .gz file from your modified CSS file. You should also always copy out the original .css files by appending .original to a copy.

The rest of this post will concern vizqlserver – the viz and web edit. A second post will cover changes in vizportal.

Embedded Viz (not Web Edit) Modifications

The CSS of the viz is stored in vqlweb.css in the vizqlserver css directory. This CSS file is in the format of a single long line of CSS selectors. Throw on word wrap in your text editor, go to the bottom and start appending new rules to change what you don’t like. I find Chrome’s developer tools to be the most convenient for identifying the actual areas on the page and the CSS rules that affect them, but it’s possible to do the same research with the other browsers as well.

Toolbar Color

Let’s say the gray toolbar greatly clashes with the rest of your colors and you’d like to try your chance with white or a nice beige. The necessary selector i:

.tab-toolbar

And the text next to all the icons is controlled with

.tabToolbarButtonText

Hiding Parts of the Toolbar

You’ve always been able to hide the whole toolbar, either through the URL parameter ‘:toolbar=none’ or through the ‘toolbar : no’ option in the options object you use when initiating the Viz object through the JS API. You can then create your own UI for any of the features using JS API methods.

None of that changes in 9.2, but there are additional Undo and Redo buttons that exist in 9.2 that do not have any JS API methods. So if you remove the toolbar entirely, you lose out on that new functionality. What if we only wanted to hide the left side? The left side of the toolbar is contained in a div with the “tab-nonVizItems” class, but the actual selector you need in the CSS file is (in that order, including the space between the two class selectors):

.tab-toolbar .tab-nonVizItems{visibility:hidden;}

Hiding the whole left side is the best we can do, because the sections for each button within this side of the toolbar do not have distinctive class names that would allow individual buttons to be turned off. Each just has ‘.tabToolbarButton .tab-widget’ as class selectors, so doing any modification would apply to all of them.

Update: With some more advanced CSS selectors, you can hide elements from left to right in this menu using the following pattern:

.tab-nonVizItems > div + div + div + div + div{visibility:hidden;}

Basically, this says the fifth element (which happens to be the “Download” menu DIV), should be hidden. You can keep taking away the “+ div” to hide more and more.

With some experimentation, different combinations can be added to decide just what you would like to show:

.tab-nonVizItems > div + div + div + div + div{visibility:hidden;}

.tab-nonVizItems > div + div + div {visibility:hidden;}

.tab-nonVizItems > div + div + div + div {visibility:visible;}

This has the effect of showing “Subscribe”, “Customer Views” and “Share”.

Hiding Elements of the 9.2 Download Menu

In 9.2, the “export image / pdf” button has been combined with Download workbook into a single menu that pops up under “Download”. Each of these items is defined well enough to hide via CSS.

The link “Tableau Workbook”

.tabDownloadWorkbook

“PDF”

.tabDownloadPdf

“Crosstab”

.tabDownloadCrosstab

“Data”

.tabDownloadData

“Image”

.tabDownloadImage

Web Edit Modifications

As seen in the guide to embedding Web Edit into an iframe, Web Edit mode was really intended to stand alone, and it holds on to some aspects of Tableau branding beyond the other embedded views.

The CSS file for Web Edit lives in the same directory as that for the regular embedded view:

C:\Program Files\Tableau\Tableau Server\9.2\vizqlserver\public\v_92001510281752\css\vqlauthoringweb.css

Remember to change the name of the .gz version and save your originals for reference.

Tableau Icon in Top Left

The most blatant branding break is the small Tableau icon in the top left. There is currently no command to change this image. However, it is simply served from

C:\Program Files\Tableau\Tableau Server\9.2\wgserver\public\images\tableau-icon.gif

so you can make changes there, perhaps replacing it with a small version of your own logo.

Alternatively, you can hide the icon entirely via

.tabAuthMastheadLogo{visibility:hidden;}

Help and Drop-down Menu in Top Right

The other piece of web edit that we often hear requests to hide is in the top right. There is a help menu and another drop down that shows the name of the user. This drop-down menu has two options “User Preferences” and “Sign Out”. Since often you are managing user credentials and login from the overall web application rather than Tableau, giving users these options can be confusing and lead to a poor user experience.

To remove the whole section:

.tabAuthMastheadUserLinks{visibility:hidden;}

There is no way to distinguish between the Help and the Drop-Down, or the individual items. If you’re going to hide, you’ll need to hide the whole thing.

If you are embedding this view into an iframe, it is possible that the color scheme of the title bars might not fit into your design very well. There are two bars, which I am going to call the ‘Top Bar’ and the ‘Toolbar’. Internally, it seems the Top Bar is called the “Masthead’, so the CSS classes related to it have the word Masthead in their name.

Top Bar

The overall Top Bar div has the class

.tabAuthMastheadArea

from which you can control the color with the background-color property.

Within this area, the text links (Save, Save As, Done) are controlled via:

.tabAuthMastheadLink

These buttons all have a hover-over effect as well, which are set via:

.tab-masthead-toolbar-button:hover

The first text in the Top Bar is the name of the workbook. Its font settings can be set via:

.tabAuthMastheadWorkbookAreaName

Toolbar

If you are completely disabling download functionality, you need to add the following so that the button won’t appear (note the lack of spacing, this is essential):

.tabToolbarButton.tab-widget.export {visibility: hidden;}

The Toolbar area’s main CSS selector, where you can change the background color

.tabAuthToolbar

If you do change the toolbar color, then you will still see the grey hover-over action when someone mouses over a button. This color is controlled via:

.tabAuthToolbar .tabToolbarButton.hover

I don’t advise changing any of the text color within the actual buttons, but the selector for it is:

.tabToolbarButtonText

Other Elements

I really don’t advise these, but here they are if you want to experiment.

When you click on Save or Save As, the buttons in that popup box have the nice Tableau orange color. If you feel the need to change this, there are actually there spans to used create each button:

.tab-styled-button-left
.tab-styled-button-middle
.tab-styled-button-right

There are likely other selectors to deal with too, on the hover and select, so you’ll have to do more to get it looking clean.

There is also a gray area around the edges of the web edit area when looking at a Dashboard (new in 9.2). This seems to actually be from the body tag, so you can just straight up set a new selector on body to change that color, but it also changes some of the background when editing a sheet. As I mentioned, not really advised but these are the paths to go down if you do want to try more advanced modifications.

I’ll repeat again, as always, this is unofficial and could change with any given upgrade, without warning. You should always reintroduce your changes into the newly created CSS from the most recent version of Tableau after an upgrade, rather than moving your changed file from one version to the next. 

Advertisements

2 comments

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s