In this blog post, we continue to customize the TeamPulse Ideas & Feedback Portal. It is important to have a deep understanding of JavaScript and CSS before taking on the examples that are shown here. However, if something were to go amiss, the TeamPulse team has made it easy to revert your changes and restore the site to the original JavaScript and CSS.

This post only shows some of the power behind the advanced settings. Feel free to experiment to create your own unique design. After all, you are only one click away from restoring the Portal if you make a mistake.

Advanced Settings on the Customize TeamPulse Ideas & Feedback Portal page

As a review, to get to the customization page, 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.

image_thumb4_thumb

Figure 1 – Accessing the customization page for the Feedback Portal

To change the CSS or add custom JavaScript, we will be working with the Advanced Settings.

image_thumb1

Figure 2 – Advanced Settings area of the customization page for the Feedback Portal

After clicking on the “Apply custom CSS & JavaScript” link, the page will present two text areas. The button on the bottom labeled “Reset to Default” will clear out these text areas, but leave the basic customizations (colors, image, etc) intact. It is a convenience button, since you can also just delete anything that you entered and achieve the same effect.

image_thumb31

Figure 3 – Text Areas for adding custom CSS and JavaScript

The custom CSS text area injects a style tag into the Portal page, overriding the default CSS that is contained in the CSS files referenced by the page.

Note: Please do not include the <style> open and close tags, as the page will include them for you.

Change the CSS on the Portal

Changing the Search Buttons and Search Text Box

The first change we will make is to left align the search buttons and the search text box, as well as change the images used for Search and Suggest New. For reference, Figure 4 shows the default appearance.

image_thumb5

Figure 4 – Default icons and location for Search, Suggest New, and the Search Text Box

The CSS that we will apply is list in Listing 1.

#SearchButtons { text-align: left; padding: 10px; }
#SearchControl { margin: 0; }
#SearchButtons a { color: #333; line-height: 34px; heght: 34px; display: inline-block; vertical-align: middle; padding: 0 0 0 40px; opacity: 0.6; }
#SearchButtons a.selected { color: #333; opacity: 1; }
#SearchButtons a#searchButton.selected,
#SearchButtons a#searchButton { 
background-repeat: no-repeat;
background-position: 0 3px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAfCAYAAAAfrhY5AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOnAAADpwBB5RT3QAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAAMNSURBVEiJrddBiFZVFAfw3x2ccpKCqT7aiEU1o4uoxSSho58tctM2CNpYkbvMTYuxhBSjnbUbkYJo1So3LQIFNy0saJHJFGVWZhZkZVBkRdp18c7ze/P53vfejPPg8bj3/M//f+95995zbso56/qklCYxjftxH27DH/gGZ3A65/x7Z8Kcc+uLWbyOk8gj3pM4iNkuvGnUzFNKD2A/noiuf/ERvsd5/IU1WIt7sAk3BfYI9uecF5Y8czyP/2JGp7ETG1oitAHPBT6H/65GfA3BOOYrodyL8S5hHOLYW+GYr+OocyyFf8C2pYjWcG0Lnoz5keLYFcCfMH0jwhXO6eDLw7+gCpqp/OMtKyFc4d5SWQMzdeLHA7BnJYUr/HuC//gicWwNw+ejdsAQ2e04gK9wAd/hNaxtwMNC6Gytih+Ozqc7Ct+NL8LnQkTtfKU90+C3IzCHywH1cBa/oddBeExx0GTsw0T0r8aL0X8Ga2p8e7gYUepVF8PRjrN+LPDvNNgPhn1Hg/1YuajHYpWLMHZ5Ho3vWw32t4dww0953D48hnXR+Lmj+Or4Xmqw/xPfWxvspc66MUVigL87in+sCNvjDfbtFdyowd0ypshMMNFR/BNcwVxKaXvVkFLajFdD4P0G/2uRW4Vz0birTTWldAfexSpFWI+llN7DKdyLZwK6M+f8dQNNqXMO+jqsdkziQ4NM9StOVNoZn+LJFp6jge3TYZ/jToO9nfELNobtIUWls5GiOBkh3Auds+i1nnAR4g+GZtypTGo94aKzDP0C16XZCfxZEd60TGEGZ3v/mngYy6w2V+P4FN7EI8sRDo45dVktjDO4jP+XG9YRwrPBe1ldPg/Q7hjdj5haIeGp4MvYvchWAz5kUMP1b1C4b1DDHbrOXuMwXhlAxsuWV72+FKHOwddevVYIXlAco2Xd/izWt4iuD1xZt18ZDnX1bbuxPIhXLL6xnFAcEnU3ls24ObBHcCDnfKpRYAn/7g3td7XPAtdprYyceU0kJhVXoilFIilvqd8qSqcvc84Xu/JdBa6g5SDBRXe7AAAAAElFTkSuQmCC);
}
#SearchButtons a#suggestButton.selected,
#SearchButtons a#suggestButton { 
background-repeat: no-repeat;
background-position: 0 3px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAfCAYAAAAfrhY5AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOnAAADpwBB5RT3QAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAAMdSURBVEiJpdfPbxVVFAfwzzxeUWyCQfJiSAwatS1Rowu60UJZ65alMdHoxohsQUkM0R0qu/IHuDXsjGHDVkxEBK1i8Cf4IzFETBTQ0tbjYs5Lp+O89+aVk0zuzNzv+X7n3Ln3nHuLiNDWiqLYhmk8jIewFX/iO3yLSxHxR2vCiBh5YQ7v4jxiyHUe72CuDW8xLPKiKB7DUezPV0s4g8v4GTcwifvwAJ7E5sSexNGIWBw7cryC5YzoEl7CrhEjtAsvJj7S/8BAfAPBBBYqQ3kEE22GscZxpMKx0MTR5NgX/gn7xhFt4NqXPIGFoeI4kMBfMX07whXO6eSL+i+ognZX/vGeFqTbsRM9yok7BLunMgd2N4mfTsDhlhF9iL/wMba0wB9O/tPrxLE3O74ctgJqZJ+kz4+YbIGHxfTZGxE6+fLZbI9VgKNsJdvlNuDkPVbT08uv/x29MSbSmYzimzaRp08P1/ADeh3M4H6cjYirbcPeiCX/WWU2nOkoZzl8NSZXf9hXI+LGGH79dDvbVS4X+K2OKopiB97GrVrXqnL9wo6iKN5T/vuigtmM4xFxrubb19nZVRYG+LvhK7erTI4BthXPDej7AHXxf7K9q6usTLClwfmWsl7/W3u/irvRzfvrialG3qlwV+3ObG92cSUf7m0AXlZmp9Xa+2W8jyeUpXU/btbENylXUd36Ole6+CwfHqmjImIJXzQQKIriet4uRcSnTZgB9mi25zq4qIxwtiiK3hgkm7LtFEUxORSZlvyzqXexk2vvFO7BM2OIb8SeTp1TEXG1n3nmldlqkda5fawMl9bP7fODqtqhluIXrNX+NuKHNFW1Sj1fUS6ZkbtPPI+38DK6I7BzybuiqZ4n6GB+3S+YaltkRghPJV/g4Lq+BvAJa3u4+dsUnre2hzvxv/4Gh4nKBwRet7Hd62s51JF8o3evFYJXlZmtv29/ATMjRGcS19+3r9aHunqNOrE8jjesP7F8pEybTSeWp3BHYk/izYj4fKDAGP/uuNFntQuJazVXhkbeMBLblEeiKTxo7ZT6vfKU+nVEXGvL9x/oz/e53oIKrwAAAABJRU5ErkJggg==);
}

Listing 1 – Changing the Search Icons and alignment

Changing the Suggest New Hint Text

One final change that we will make to the Search and Suggest New features is to change the hint that appears when a user clicks on “Suggest New”. The default style is centered with white text, as shown in Figure 5.

image_thumb9

Figure 5 – Default Suggest New Hint Text font color and alignment

To fit the new color scheme and styling, we want to change the font to grey as well as left align the text. The CSS for this is in Listing 2.

#SuggestHintText { color: #666; margin: 0; }

Listing 2 – Changing the Select New Hint font color and alignment

The resulting change is shown in Figure 6.

image_thumb11[1]

Figure 6 – Updated Suggest New Hint Text font color and alignment

Updating The Header

The next set of customization will update the header to align our custom logo. The current header is show in Figure 7.

image_thumb131

Figure 7 – Default alignment with Custom Logo

This CSS will change the alignment of the custom logo so it matches the left of the search box container as well as the avatar of the logged in user. The resulting change is shown in Figure 8.

#Header { margin: 0 10px; }
#Header #ProjectBranding { padding: 0; margin: 0 0 20px 0; height: 59px; }
#Header nav { clear: both; width: 100%; }
#Header nav ul { list-style: none; margin: 0; padding: 0; }
#Header nav li { float: left; }
#Header nav li a { display: block; color: #333; padding: 10px; }
#Header nav li a:hover { color: #999; }

Listing 3 – Changing the Select New Hint font color and alignment

image_thumb11

Figure 8 – Correct alignment for Custom Logo

Changing the Main Navigation Style

Our next change will move the main navigation to the right rail and update the style of the text. Again, for reference, the default layout is shown in Figure 9.

image_thumb3

Figure 9 – Default layout and style of the main navigation

The following CSS moves the grid containing the feedback items to the left side (eliminating the left rail) and creates a right rail for the navigation items. The style of the items is also updated. The CSS is shown in Listing 4 and the updated layout is shown in Figure 10.

#MainNavigation { float: right; padding-right: 0; }
#MainNavigation a { padding: 5px; color: #9ABE07; }
#MainNavigation .active a { background: #eee; }
.inner-page #MainNavigation { display: none; }
 
#Body { margin: 0 194px 0 0; }
.inner { background: none; border-left: 1px solid #eee; }
.sticky #SearchWrapper { margin: 0 0 0 -480px; width: 960px; }

Listing 4 – Changing the Select New Hint font color and alignment

image_thumb51

Figure 10 – Main navigation moved to the right with updated font styling

Removing the White Background

Our final change is to remove the White background from the content of the page. This is done with a single line of CSS, shown as the first line (starting with #wrapper) in Listing 5. The remaining lines in the listing update the Item Detail page style. The default style on the detail pages is designed to work best with the default white background, so a few changes are necessary.

#Wrapper { position: relative; background: none; border: none; }
.property-label { color: #fff; }
body {color: #fff;}
.inner .likes.votes-count-box {background-image: none;}
.inner .dislikes.votes-count-box {background-image: none;}
.back-link {margin-left: -55px; filter: alpha(opacity=50); }

Listing 5 – Removing the white background from the content area

Removing the background from the content area will make the entire page the same color as the Page Background (as set in the Basic Settings). To make the page more attractive, we need to change the customizations that we did in our previous post. These changes are shown in Figure 11, and the resulting page is shown in Figure 12.

image_thumb91

Figure 11 – Updated Basic Settings

image_thumb13

Figure 12 – Page with white background removed from content area and updated basic settings

Using JavaScript to Customize and Add Page Elements

Just as with the custom CSS text area, the JavaScript text area injects the correct tags into the Portal page.

Note: Please do not include the <script> open and close tags, as the page will include them for you.   If you need to add HTML Elements (as shown in the section "Adding Twitter and Facebook Links to Content Items"), you can close the automatically opened <script> tag as long as you open another one, as a closing </script>  will be added for you automatically.

Adding A Menu To The Portal

For the first change, we will use JQuery and JavaScript to add a custom menu to the Portal. For these changes, we use the second text area in the Advanced Settings portion of the Customization page.

The following code will add a series of links into the page. These are for example purposes only, and you will want to add the correct href attributes to your custom menu. The resulting menu is shown in Figure 13.

('#Header').append(''
+ '<nav class="clearfix">'
+ '<ul>'
+ '<li><a href="#">Home</a></li>'
+ '<li><a href="#">About Us</a></li>'
+ '<li><a href="#">Products</a></li>'
+ '<li><a href="#">Contacts</a></li>'
+ '</ul>'
+'</nav>');

Listing 6 – Adding custom Menu to the Header

image_thumb17

Figure 13 – Custom Menu added to the header

Adding a Divider

Next we will add a divider separating the header from the body for the page. The code for this is shown in Listing 7, and the resulting change is shown in Figure 14.

$('body').prepend('<div style="position: absolute; top: 0; left: 0; right: 0; height: 119px; border-bottom: 1px solid #ddd;"></div>');
if ( $('#Body').children('.inner').length > 0 ) {
     $('body').addClass('inner-page');
}

Listing 7 – Adding a divider between the header and the body of the Portal

image_thumb19

Figure 14 – Portal with divider

Adding Twitter and Facebook Links to Content Items

Our final change will be to add Twitter and Facebook “Like” buttons to the item detail pages. The Detail pages inherit much of the same styling updates that we have done to the main Portal page, and our customization are shown in Figure 15.

Figure 15 – Customized Item Detail page

To add the links for Twitter and Facebook, we use the JavaScript shown in Listing 8. Here is an example of adding a closing </script> tag since we need to add an HTML element into the page.  We then open a new <script> tag.  It is very important to make sure that there is an open <script> tag that is NOT closed, as the customization page will add a closing </script> tag automatically.

In addition to this change, we need to add one more CSS element to help with styling the location of the Twitter link. The single line of CSS used to do this is in Listing 9, and the final markup is shown in Figure 16.

</script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=115589899834";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<script>
$('.item-comments').before('<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>');
$('.item-comments').before('<div class="fb-like" data-send="false" data-layout="button_count" data-width="50" data-show-faces="false" data-font="segoe ui"></div>');

Listing 8 – Adding Twitter and Facebook

CSS Change for Twitter Link:

.twitter-share-button { float: left; }

Listing 9 – Styling the Twitter Link.

image_thumb25

Figure 16 – Customized Item Detail page with Twitter and Facebook Links

Adding Google Analytics into the Portal

If you are using Google Analytics (GA), that code will need to be placed in the <body> of the Portal.  Since the JavaScript text area inserts the custom code at the end of the <body>, this is a perfect place to add your GA code.  You must make sure that you are correctly closing and opening the <script> tags.

Summary

This blog post show just a few of the tricks that can be used to further customize the TeamPulse Ideas & Feedback Portal. Modifying CSS and JavaScript on the page is a very powerful feature that the development team has provided, and while it allows you to make major changes to the layout, it should only be undertaken by people who have a deep understanding of CSS and JavaScript. Fortunately, we have provided an “oops'” button that will restore that page back to the original starting point.

In case you are looking for the basic options for customizing the portal, check out our previous post.

Try as part of TeamPulse

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



Japikse
About the Author

Phil Japikse

is an international speaker, a Microsoft MVP, ASPInsider, INETA Community Champion, MCSD, CSM/ CSP, and a passionate member of the developer community. Phil has been working with .Net since the first betas, developing software for over 20 years, and heavily involved in the agile community since 2005. Phil also hosts the Hallway Conversations podcast (www.hallwayconversations.com) and serves as the Lead Director for the Cincinnati .Net User’s Group (http://www.cinnug.org). You can follow Phil on twitter via www.twitter.com/skimedic, or read his personal blog at www.skimedic.com/blog.

 

Comments

Comments are disabled in preview mode.