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