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 JenSocial on June 18, 2011 at 12:09pm

Honestly, I don't know why. Most of us can probably see it on your site. You could do what Solo from Creators did. It took off the .status-bar part, and added the background color behind the entire area (the wrapper), which includes being behind the avatar. I prefer just behind the box, but I think he liked it better the way he did it. I'm pretty sure this is what he did.

/* Special Status Update Box Style */
/* Regular Background Color */
.status-bar-wrapper {
-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 */
.status-bar-wrapper:hover {
    background-color: #82C7FF!important;
}
/* Active effect, click and hold to see in action */
.status-bar-wrapper:active {
    box-shadow: 0 0 8px #000000 inset;
}

Best Regards,

Jen

Permalink Reply by Nos Ayudamos on June 22, 2011 at 10:26pm

Hi Jen,

I just added this to my site this evening after the update. I'm having the same issue. The primary color ends up being transparent and the hover one shows up on hover. When I put the code in and click preview, it looks right, but then after I hit publish, it goes transparent.

Permalink Reply by JenSocial on June 22, 2011 at 10:33pm

Can you do this for me? Remove that last line of code:

.status-bar-wrapper:active {
    box-shadow: 0 0 8px #000000 inset;
}
And tell me if this helps.
Best,
Jen

Permalink Reply by Writer Chick on July 7, 2011 at 10:24am

I am having this issue too. The color only shows when you hover. Does it make a difference that it's in a scroll? (I'm using Google Chrome)

Permalink Reply by JenSocial on July 7, 2011 at 12:07pm

Did you try removing the code above?

Permalink Reply by Daisy Lois on June 23, 2011 at 9:10am

Hi all

I too feel the same that POZROB. I put the code as explained and give Lueder clickpreview and it seems everything is fine, but when I publish the colo disappears, not seen. I did what you responded to pozrob, removed the portion of code that contains thehover affect. (specifically this was the part that moved out of code:

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

But still when I click to publish it as you do apply colo background is lost, not seen.
Jen could you please help me with this? I'm doing wrong?
Acquires the code on page: http://www.colorsontheweb.com/colorwizard.asp
That will have to do? if so I could spend a page where you can acquire a valid colorcode. Thanks thanks thanks a lot!

Permalink Reply by Daisy Lois on June 23, 2011 at 10:03am

Jen just remove this part of the code that you leave now explained in the commentary ofHaitians United for Haiti, but is still the problem may be?
I'm pasting in code abanzado CSS and the new design editor.
This is the part that clear:

.status-bar-wrapper:active {
box-shadow: 0 0 8px #000000 inset;
}

This is an example of what I say:

preview.....

published......

I can do to fix it? Thank you, God bless

Permalink Reply by JenSocial on June 24, 2011 at 1:31am

Vanesa,

I'll try to get to the bottom of this finally, tomorrow. Was really bombarded today.

Best,

Jen

Permalink Reply by JenSocial on June 24, 2011 at 1:37am

oops Vanesa. I just looked at your screenshot. I did not test this in developer mode. This is only for regular Advanced CSS box. So sorry. If I can test in developer mode in future, I will be sure to inform. I say this because sometimes the dev mode will override code, and it's difficult to stop this from happening.

Best Regards,

Jen

Permalink Reply by Daisy Lois on July 4, 2011 at 1:13am

hi jen! Thanks anyway. Since I changed the old editor has more Facilides for all jejeje!Now if I am giving me a banquet with all your tips! lol many thanks. God bless you

Permalink Reply by JenSocial on July 7, 2011 at 11:12am

Thanks Clive, very nice addition!

Permalink Reply by Fire-Tech on July 12, 2011 at 11:08pm