Activity Feed Font Size and Font Colors

[Jen]

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!

[Alex 小正正]

WOW, Jen, you are so COLORFUL~~~~

Do you find how to change the halo color of the status box yet? I still can't.

[Jen]

Alex,

Can you clarify what you're calling the halo?

Best,

Jen

[Robert]

AMAZING TIP

[Jen]

=) Robert! Glad you like it.

Thanks for the positive feedback.

Hope you're doing well,

Jen

[Jen]

Glad you like it Diane!

[Jen]

Glad you like it Diane!

[Brian Floe]

Good tip Jen - thanks for sharing. Do you also know how we can change "x comments" to "x comments - post a comment" ?

The current link does an excellent job if keeping the new comment feature a closely guarded secret only a few nominated insiders know of.

[Jen]

Brian,

Not sure. Did you try language editor?

Best,

Jen

[Brian Floe]

If it's there I can't find it :(

 

Why would anyone think "5 comments" means "click here to comment" ? If you miss the baseball by an inch, you miss it entirely.

[Jen]

Hi Brian,

We can do this with CSS. But here's the problem. Any text we add before or after "comments" (technically the 1st element of this class) with code like below, would show up next to all cases where this CSS class is used. For example, whatever "text" you add, it will also show in places like when a new member joins and the "Welcome Them" link is displayed.

 

Code below - - Don't use both:

.xg_widget_main_index .feed-reactions a:nth-child(1):before {content:"Click for more...";}

OR

.xg_widget_main_index .feed-reactions a:nth-child(1):after {content:"...Click for more.";}

 

Best,

Jen

[Brian Floe]

This is pure awesome sauce Jen!

 

Thanks a million !