How to customize the Ideas and Feedback Portal

With the latest release of TeamPulse, we now offer the ability to significantly update the look and feel for the Ideas & Feedback Portal.  This will allow you to brand the portal to seamlessly blend in with your own product branding, providing a more consistent user experience.  The team has created two different mechanisms for customization.  Based on customer feedback, the development team has created a new page that allows basic and advanced changes. This post will cover the basic customizations.

The Default Portal Look and Feel

For reference, here is the default, “out of the box” portal.  (Don’t worry, all of the data is fictitious). 

Figure 1 – Standard Feedback Portal

Accessing The Customization Page

To access the Portal customization page, simply click on “Settings” on the main menu, then “Portal Settings” on the submenu, and finally click the “Customize…” button on the “Manage Ideas & Feedback Portal Settings” screen.

Figure 2 – Accessing the customization page for the Feedback Portal

This will bring up the Customization page (shown below). The top half of the page allows for the most requested options (changes to the Portal’s colors, adding a custom logo, and removing the project title), and the development team has made it very simple to make these changes. 

It is important to note that you should use the Advanced Settings (covered in our next blog post), only if you are very familiar with CSS and JavaScript.

Figure 3 – Feedback Portal Customization Page

Adding Your Logo

Let’s begin by adding your own logo to the site.  To change the logo that is displayed, click on the “Select…” button in the middle of the page.  This brings up a standard File Open dialog, where you can select your image.  Please note the dimensions that the image will be resized to.  For optimal quality, make sure your custom image is within the limits as stated.

Figure 4 – Feedback Portal with custom image applied

After selecting your image, you will be presented a check box that will allow you to “Hide project name”.  By checking this checkbox, the project name will be removed from the portal.  

Figure 5 – Options for hiding the project name

After removing the project name, the header will adjust accordingly, lining up the custom logo with the user avatar, as in Figure 6.

Figure 6 – Feedback Portal with Custom image applied and project name hidden

Customizing the Colors

The Page background, Search background, as well as the links on the pages are all customizable.  To enter new colors for these items, use the top part of the “Customize TeamPulse Ideas & feedback Portal” page.  When entering colors, you can use either color names (e.g. blue, red, green) or the hex code (e.g. #FFFFFF) for the color you want to use.  As you enter the color codes (or names), the images to the right of the text boxes will update to the color that you have entered, giving you a live preview of the result of the change.

The “Page background” is the right and left rail of the page as well as the footer below the page itself.  The “Search background” is the bar that encases the search text box.  Using the sample colors entered in Figure 7 will result in the page changes that are shown in Figure 8.

Figure 7 – Sample colors

Figure 7 – Sample colors applied

Summary

With just a few quick settings, we’ve been able to significantly alter to appearance of the Portal. 

In our next post, we are looking at some CSS and JavaScript modifications that will allow you to make even more dramatic changes.

And here is your chance to get the portal for FREE. The company with most representatives at our R2 release webinar wins a TeamPulse Ideas & Feedback Portal license.

Sign up for the R2 release webinar

Philip Japikse

Microsoft MVP, Agile Practices Evangelist at Telerik

@skimedic