JenSocial: Social Web Directory and Ning Tips

Social Web Directory :: Social Network Directory :: Ning Tips and Ning Support

Activity Feed Font Size and Font Colors

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!

2 members favorited this

Replies to This Discussion

Permalink Reply by Haitians United for Haiti on June 25, 2011 at 9:13am

will try it an let you know:) Thank you!

Permalink Reply by Haitians United for Haiti on June 25, 2011 at 9:20am

Works like a charm! Thank you Jen!

Permalink Reply by JenSocial on June 25, 2011 at 11:49am

Great! Thanks for the feedback.

Jen

Permalink Reply by JenSocial on June 25, 2011 at 11:47pm

Hi Lunatics,

For any of the elements that are color-coded, if you want to change the font-size, use this line of code and adjust the size:

Example

.feed-story .feed-story-body, .content-comment, .status-update {font-size:12px!important;}

Best Regards,
Jen

Permalink Reply by Guled Breakrecordings Alister on June 27, 2011 at 3:53am

Hi there Jen, hope all is well.

what a nice tip but the thing is, i've tried to insert the code on my website and it is showing up the same still? also sorry i know its not the same post, i also inserted the code for the activity feed and it to is not working.

I shall be joining the V.I.P Group hopefully not this Wednesday, but the one after as i'm looking to completely overhall my site.

My Site

Thanks Jen ;)

Permalink Reply by JenSocial on June 28, 2011 at 12:43am

ahhh, here's what is happening to you. You have an error in your CSS. I couldn't find it via Firebug though. Look for missing ending curly brackets }, or comments with comment delimiters /* comment */ - - or any type of CSS error.

How do I know this? I added this code to top of your CSS, and it works fine.

Let me know,

Jen

Permalink Reply by JenSocial on June 28, 2011 at 12:44am

Love to have you in the VIP Group! You'll enjoy it.

Permalink Reply by Guled Breakrecordings Alister on June 29, 2011 at 4:29am

Hi there Jen.

I half understood what you were translating but my coding is very basic, i'm not sure if i done it right, could you help me out, if not, not to worry, i shall have to wait to join the VIP Group ;)

Permalink Reply by JenSocial on July 1, 2011 at 1:27pm

Hi GRA,

Did you try to add codes to top of CSS? I believe you have an error at bottom of your codes.

Best Regards,

Jen

Permalink Reply by Shannon Klipstein on November 27, 2011 at 8:39pm

Thank you! I wasn't sure about the orange for people with bad eyesight... it was a little bit bright! But i just changed the word orange to black and it looks good! Cute tip!

Permalink Reply by JenSocial on November 28, 2011 at 1:50pm

Agree. The example colors are just for you to know what you're changing. ;-)

Best,

Jen

Permalink Reply by Yehweh Not Yahweh on December 8, 2011 at 2:48pm