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

Views: 728

Replies to This Discussion

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

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

Thanks for the feedback. Happy you like it!

=)

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.

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

 

Very nice! Thanks a bunch for sharing.

=)

Hi Robert,

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

Best,

Jen

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

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

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!

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.

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.

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

RSS

Members

© 2019   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips