Current status of the Ning Platform is always available on the Ning Status Blog.

NC for Hire

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!

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Votes: 0
Email me when people reply –

Replies

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

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

    • NC for Hire

      Alex,

      Can you clarify what you're calling the halo?

      Best,

      Jen

  • AMAZING TIP
    • NC for Hire

      =) Robert! Glad you like it.

      Thanks for the positive feedback.

      Hope you're doing well,

      Jen

  • This reply was deleted.
  • 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.

    • NC for Hire

      Brian,

      Not sure. Did you try language editor?

      Best,

      Jen

      • 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.

        • NC for Hire

          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

          • This is pure awesome sauce Jen!

             

            Thanks a million !

This reply was deleted.
 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

LEO Mobile App Builder updated their profile
Tuesday
Aase Lillian replied to Aase Lillian's discussion
Community - activity page
"Ok, thank you. Please send me details as I have no idea on how to do it. "
Mar 19
Aase Lillian and ⚡JFarrow⌁ are now friends
NC for Hire
Mar 19
⚡JFarrow⌁ updated their profile photo
Mar 18
⚡JFarrow⌁ replied to Aase Lillian's discussion
Community - activity page
"Yes you can add emojis to your community pretty much anywhere you like.
If you need some help…"
Mar 18
Aase Lillian updated their profile
Mar 18
Aase Lillian posted a discussion
Hi all. Is it possible to add emojis to the community? I also wish the activity page to include…
Mar 18
Donna MacShoe updated their profile photo
Mar 6
Adul Rodri is now friends with ANGE.L LUAR and Margarida Maria Madruga
Feb 14
Shweta Sharma updated their profile
Jan 26
catherine martin updated their profile
Jan 16
Donna MacShoe updated their profile photo
Jan 15
More…

Meanwhile, you can check our social media channels