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!

Views: 874

Replies to This Discussion

will try it an let you know:) Thank you!
Works like a charm! Thank you Jen!

Great! Thanks for the feedback.

=)

Jen

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

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 ;)

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

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

=)

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 ;)

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

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!

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

Best,

Jen

Great tip!

RSS

Members

© 2024   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips