Change Activity Feed Colors

The example CSS code below styles the text colors for elements in your Activity Feed. I'm applying the colors using the color "names" instead of hexcode, to make it easier to follow.

I added numeric markers in the CSS and screenshot image. The example code is not good at all for design - - way too many colors. I use all the different colors in an attempt to explain the different elements. See color coded notes.

I advise that you not use more than two colors for all elements, or the Feed will be busy and confusing.

I'm a little hesitant to create this tip so soon. But, with so many Ning Network Creators requesting it, decided to create it. Hopefully things will not change.

Edit code below to your color preferences, and add to your Advanced CSS box, via:

My Network/Settings/Appearance/Advanced CSS

/* 1. Overall Feed Activity Text */
.feed-story .feed-story-body, .content-comment, .status-update {color:orange!important;}
/* 2. Posted By */
.feed-event-info .event-info-action {color:green!important;}
/* 3. Posted By Link */
.feed-event-info .event-info-action a {color:blue!important;}
/* 4. Timestamp */
.feed-event-info .event-info-timestamp {color:red!important;}
/* 5. Feed Reactions - Comments, Favorites, etc... */
.feed-reactions a {color:purple!important;}

Change Activity Font Size

You can also change the font size for each element.  If you want to change the font size for one of these elements to 10px, add: font-size:10px; to the code. I will use the exact same example code as above, and simply add the font-size attribute for a visual:

/* 1. Overall Feed Activity Text */
.feed-story .feed-story-body, .content-comment, .status-update {font-size:10px!important; color:orange!important;}
/* 2. Posted By */
.feed-event-info .event-info-action {font-size:10px!important; color:green!important;}
/* 3. Posted By Link */
.feed-event-info .event-info-action a {font-size:10px!important; color:blue!important;}
/* 4. Timestamp */
.feed-event-info .event-info-timestamp {font-size:10px!important; color:red!important;}
/* 5. Feed Reactions - Comments, Favorites, etc... */
.feed-reactions a {font-size:10px!important; color:purple!important;}

Enjoy!