JenSocial: Social Web Directory and Ning Tips

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

Status Update On Home Page - Make It Stand Out! UPDATED: September 1, 2011

This CSS will help make your "Status Update Box" stand out better. If you're a member of JenSocial, you can see it in action here: http://jensocial.com

These effects are added behind the box, not to the box itself. I wanted to keep it simple and elegant.

Instructions:

FIRST, if you used the old tip, access your Advanced CSS via:
My Network/Settings/Appearance (Design Studio icon/Advanced)
Search for: .status-bar-wrapper .status-bar
Either remove this code and start over (new code below). Or, edit this code and replace the full class name .status-bar-wrapper .status-bar with the new class: .xg_status_wrapper. Notice: Quickpost links code is new.
Starting over? Edit the code below, customizing the background color for regular and hovered, to suit your customization needs.
Edit the code below, customizing your Quickpost link colors to your preferred colors.
Add to your Advanced CSS, via My Network/Settings/Appearance
Save/Publish.

/* Quickpost Title Color and Font weight, Share */
.quickadd-options-links .list-title {
color:#ffffff;font-weight:bold;
}
/* Quickpost Links Color */
.quickadd-options a {
color:#003366!important;
}

.xg_status_wrapper {
-moz-transition: all 0.1s ease 0s;
    background-color: #5BBCDC!important;
/* Border */
    border: 3px solid #e6e6e6 !important;
/* Rounded Corners */
    border-radius: 12px 12px 12px 12px;
    padding: 12px 20px !important;
}

/* Hovered Background Color */
.xg_status_wrapper:hover {
    background-color: #82C7FF!important;
}

Optional - Adjust Member Avatar Padding:

If you need to adjust the padding for the Status Box Member icon, use this code and adjust for your padding needs.

div.xj_StatusAndShareLink div.xg_avatar {margin-left:-70px!important;}

Enjoy!

Jen

2 members favorited this

Replies to This Discussion

Permalink Reply by ISN (Yshatar) on June 15, 2011 at 11:34pm

Thank you!!!!!!! I was waiting for you to release this lol, it looks beautiful on my site :D so excited! Ty a trillion Jen :D

Permalink Reply by JenSocial on June 15, 2011 at 11:39pm

Would love to see it. Could you show us a screen shot?

Thanks for the feedback. Happy you like it!

Permalink Reply by ISN (Yshatar) on June 15, 2011 at 11:54pm

Sure Jen :)

Yw... I am thinking of doing some other tweaks to the activity feed but I'm going to do that in my test first.

Permalink Reply by ISN (Yshatar) on June 16, 2011 at 12:05am

I added some flair :D and am quite pleased with it! this new activity feed is wonderful, I love how it is so interactive.

Permalink Reply by JenSocial on June 16, 2011 at 12:13am

Very nice! Thanks a bunch for sharing.

Permalink Reply by JenSocial on June 16, 2011 at 11:36am

Hi Robert,

The code does have a hover color. Just remove that part of the code. Does that help?

Best,

Jen

Permalink Reply by Haitians United for Haiti on June 16, 2011 at 7:04pm

Hi Jen,

Thank you so much for posting this tip! I have one question: can you please let me know how to get it like yours. Your status color stays; however mine only shows when I hover it. Please let me know if I did something wrong. Thank you

Permalink Reply by JenSocial on June 17, 2011 at 1:42pm

I've had a few folks report this issue, and not sure why it's doing this. Can you send me a test sign-in via pm? Then I can sign-in to your site, and test via FireBug.

Thanks,

Jen

Permalink Reply by Haitians United for Haiti on June 17, 2011 at 7:21pm

Hi Jen,

Thank you for checking this out for us. Sure, feel free to sign in here. I am moderating members, so I am online now...I am not sure what you mean by test sign-in via pm?

Thank you!

Permalink Reply by JenSocial on June 17, 2011 at 9:51pm

I thought you might have a guest sign-in so I don't have to join. It's hard to join so many, so I try not to join sites unless a real emergency.

Permalink Reply by JenSocial on June 17, 2011 at 11:19pm

So far, I'm seeing dark blue before hover, and light blue on hover. Tested in FF and IE.

I have also tested Safari and Chrome. Sorry, but not seeing any problems.

Permalink Reply by Haitians United for Haiti on June 18, 2011 at 10:26am

Good Morning Jen,

Thank your so much for testing this for us Jen.

I am not sure what is going! Could it be my computer? I am using fire fox as well and I am able to see it fine on your site and not mine! This is weird, isn't it?

Agosthina