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 Mr Schmooze™ on August 5, 2011 at 8:56am

anyone else notice that the latest ning update on the status box has messed up this tip?

Permalink Reply by The Dusk Spot on August 5, 2011 at 1:18pm

Yes I noticed that right away, but was too excited to see the quick add features I almost didnt care lol. My goal is to figure out how to add images for the activities next to them to make them stand out.

Permalink Reply by JenSocial on August 6, 2011 at 1:06am

Oh yeah, I see that. Let's try this. If you all report that all is well, I'll update the tip:

/* Special Status Update Box Style */
/* Regular Background Color */
.xg_theme.xg_widget_main .xj_status {
-moz-transition: all 0.1s ease 0s;
    background-color: #5BBCDC!important;
/* Border */
    border: 1px dotted #e6e6e6 !important;
/* Rounded Corners */
    border-radius: 12px 12px 12px 12px;
    box-shadow: 0 0 1px #333333 inset;
    padding: 12px 20px !important;
}

/* Hovered Background Color */
.xg_theme.xg_widget_main .xj_status:hover {
    background-color: #82C7FF!important;
}
/* Active effect, click and hold to see in action */
.xg_theme.xg_widget_main .xj_status:active {
    box-shadow: 0 0 8px #000000 inset;
}

Permalink Reply by Fire-Tech on August 6, 2011 at 6:58pm

Nope. New code doesn't work on mine (or JS). I tried on the top too. Certainly need it for my darker background....

Permalink Reply by Writer Chick on August 6, 2011 at 7:21pm

I never have been able to get this to work. Not the old code or this revised code. I've put it everywhere, top and bottom and it still won't activate.

Permalink Reply by JenSocial on August 7, 2011 at 12:03am

That's odd. This seems to be the only code ever that just doesn't work the same, everywhere.

Try removing this, in every case:

.xg_theme

So, for the first one:

.xg_widget_main .xj_status

If that doesn't work, I'll look even closer.

Best,

Jen

Permalink Reply by Mr Schmooze™ on August 7, 2011 at 12:10pm

it worked! you're awesome Jen! Love you loads!

Permalink Reply by Writer Chick on August 7, 2011 at 8:52am

Yep, taking out that xg theme worked!!

(In Design Studio it works. I can't try it w/old appearance editor and my live network yet, because we have that malicious, replicating CSS code problem at the moment.)

Now I'm off to tweak colors! THANKS JEN!

Permalink Reply by Fire-Tech on August 7, 2011 at 9:01pm

Ah Ha! Light bulb! You think I would have remembered from doing that with the scroll bars...duh. Works great now.

Thanks Jen :)

Permalink Reply by GirlRiders on September 2, 2011 at 4:51pm

The quickpost font change you added pushes the links on to two lines in a three column layout. I didn't mess with it too much, I erased it to work on it later, but must be the bold?

Permalink Reply by JenSocial on September 2, 2011 at 5:18pm

Nah, just remove the quickpost lines. Sorry about that. Or, remove the bold attribute. I did that because mine were getting lost on the background color. And I figured that could be true of a lot of sites.

Permalink Reply by GirlRiders on September 11, 2011 at 6:47am

I tried this again, got it perfect on my test network, then copied to the real network and it didn't work. Nothing changed. Weird, huh?