Ultra Slim NewsGator Activity Feed

As of version 2.6 you get an option in NewsGator to supply a custom style sheet. There’s one provided for a narrow activity feed (370px wide, to be precise).  However, that isn’t the narrowest it can be and if you want a really slim newsfeed, check this out…

My approach is to reuse the narrow CSS that is provided and update only that CSS file to produce the ultra-slim activity feed.

To set the new ultra-slim style as the overridable default for your site, you can copy this CSS into your site’s CSS file that you using for overall site branding. At that point you will need to add !important in a few places to override the NewsGator style sheet that will be loaded after the default.

The IT Leader's Guide to Multicloud Readiness

This guide provides practical key insights and important factors to consider to make informed decisions in your multicloud journey.

Download the Guide

Some takeaways

1. The minimum width for the newsfeed is around 290px. If you make it any slimmer, the actions and buttons stop lining up and it just looks bad. This guy here is the culprit:

   

   Also, with long posts the feed looks really bad!

2. To make the activity feed neater at its new width, the commenting area, the poll area, and the activity summary areas are all shifted to the left, rather than indented like they normally are:

   

3. The share box is quite tricky.
   1. Its position is set with JavaScript, so battling that with CSS is extra fun. In the CSS posted here, the Share box does not get positioned properly in IE. If I fix this later, I’ll update the post. If you fix it, please let me know and I’ll link to your fix here. 

      

   2. It uses the same classes as that box at the top of the feed from where you post microblogs, so obviously, if you are making changes to how one looks, make sure the other one is OK too.

      

Finally, the CSS

The CSS to be added on top of the CSS that you are using to brand your site:

(To use, save as a separate CSS file, deploy to SharePoint, and point the newsfeed custom CSS to your file. The Newsfeed setting can be found in the activity stream tool part.)

.ngNewsFeedPanel,.ngNewsFeedContent{width:285px}
.ngStatusHolder{min-width:285px;width:285px;}
.ngStatusHolder .ngInput{width:270px}
.ngStatusHolder .ngInput textarea{width:270px}
.ngMicroblogDialog .ngStatusHolder{min-width:275px;width:275px}
.ngMicroblogDialog .ngStatusHolder .ngInput{width:270px}
.ngMicroblogDialog .ngStatusHolder .ngInput textarea{width:270px}
#ngInputActions{width:280px}
.ngFilterHeader{display:none}
.ngActivityDate{display:block}
#ngEventNotificationDiv{width:280px}
.ngActivityProfileIconHolder{width:38px}
img.ngActivityProfileIcon{max-height:36px;max-width:36px}
.ngMicroblogDialog{width:253px}
.ngTextLength{margin-left:185px}
div.ngAttachmentHolder{width:280px}
img.x_NGActivityFeed{max-width:285px;max-height:160px}
.ngActivityMetaDiv img.x_NGActivityFeed{max-width:260px;max-height:140px}
.ngActivityMetaDiv div.ngAttachmentHolder{width:260px}
.ngActivityActionDiv, .ngPollOptionsDiv {width: 280px; clear: left; float: left; margin-left: -40px;}
#ngNewsControlDiv > UL {margin-top:5px;}
.ngActionBar {width:275px;}

 

The same CSS to be used in the site’s CSS file as the overridable default:

(To use, simply add this code to your custom SharePoint branding CSS and deploy.)

.ngNewsFeedPanel,.ngNewsFeedContent{width:285px}
.ngStatusHolder{min-width:285px;width:285px;}
.ngStatusHolder .ngInput{width:270px}
.ngStatusHolder .ngInput textarea{width:270px !important;}
.ngMicroblogDialog .ngStatusHolder{min-width:275px;width:275px}
.ngMicroblogDialog .ngStatusHolder .ngInput{width:270px}
.ngMicroblogDialog .ngStatusHolder .ngInput textarea{width:270px}
#ngInputActions{width:280px !important;}
.ngFilterHeader{display:none}
.ngActivityDate{display:block}
#ngEventNotificationDiv{width:280px}
.ngActivityProfileIconHolder{width:38px !important;}
img.ngActivityProfileIcon{max-height:36px;max-width:36px !important}
.ngMicroblogDialog{width:253px}
.ngTextLength{margin-left:185px}
div.ngAttachmentHolder{width:280px}
img.x_NGActivityFeed{max-width:285px;max-height:160px}
.ngActivityMetaDiv img.x_NGActivityFeed{max-width:260px;max-height:140px}
.ngActivityMetaDiv div.ngAttachmentHolder{width:260px}
.ngActivityActionDiv, .ngPollOptionsDiv {width: 280px; clear: left; float: left; margin-left: -40px;}
#ngNewsControlDiv > UL {margin-top:5px;}
.ngActionBar {width:275px;}
.ngCommentDiv, .ngMetaContainer{ width: 270px;float: left;margin-left: -40px;}

 

If you want to understand what all those classes are changing, exactly, check out my blog post that explains all the pieces of the activity stream.