Tag: CSS

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.

The steps below guide you to change the default behavior.

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

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.

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” />

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.

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.