Tweaking the TFS Web Access Client

Recently Microsoft released a great usability tweak to the Web Access Client on Visual Studio Online. It allows users to use the rich text editor in full screen mode. This allows users to utilize the most out of their big screens and allows users to have a better editing and reading experience for large text fields, especially when combining images and text. More of these new features can be read here: Work item Improvements

While these features are to be expected to be in the next on premise TFS release, you may like to have similar functionality in your on-premise TFS right now!

Let me start with a disclaimer: The customization’s in this post are not supported by Microsoft. These changes can break any updates and will be undone by any update installations to your TFS environment. 

For all of you accepting this disclaimer the following adjustments will allow you to use the most of your available screen size.

When you currently open a work item from the task board (or most other locations) you will see the following behavior. As the red arrows indicate, there is allot of space available at the edges and the rich text fields do not utilize the space available.

Default Work Item Experience

The steps below guide you to change the default behavior.

1. Download the FullDialog.css from my DropBox. FullDialog.css or

The CSS changes to UI Dialog to be positioned 45px from the top, and to utilize 98% of the available width. For the height it will use 85% of the View Port. Caution this may / will not work on ‘old’ browsers.

Work Item Experience CSS

2. Add the FullDialog.css file to the following directory on your TFS server.

%ProgramFiles%\Microsoft Team Foundation Server 12.0\Application Tier\Web Services\_static\tfs\12\App_Themes\Default\

3. Open the Main.Master file

%ProgramFiles%\Microsoft Team Foundation Server 12.0\Application Tier\Web Services\_views\Shared\Main.Master

4. Add the following line to the indicated location

<link href=”<%:Url.Themed(“FullDialog.css”) %>” type=”text/css” rel=”stylesheet” />

Changes to Main.Master Page
The marked line indicates the location to add the custom CSS file.

5. Execute an IISReset from the commandline. (Mind your step when doing this in a production environment!)

6. Test results! You’re workitem experience is now almost fullscreen and you’re rich text fields will utilize much more space.

Full Screen Work Item Experience
Full Screen Work Item Experience

Additional options, TFS has two UI settings modes available; Default and High contrast. If you do not wish to adjust the Default behavior for all your users you might want to implement this in the High Contrast profile only. This way you provide your users with a choice. These settings can be reached through your User Profile page.

TFS User Profile UI Settings