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: 849

Replies to This Discussion

That's very strange. Almost sounds like there's a conflict with something else running on your main page. Both versions worked for me once I removed the .xg_theme. I have a 3 column layout like you and the code is right in the middle of my other code. Didn't need to be on the top or bottom to play nice with others. Here's my actual code if it helps at all:

 

/* Special Status Update Box Style *//* Regular Background Color */.xg_widget_main .xj_status {-moz-transition: all 0.1s ease 0s;    background-color: #0d1962!important;/* Border */    border: 1px solid #c5c5d1 !important;/* Rounded Corners */    border-radius: 12px 12px 12px 12px;    box-shadow: 0 0 1px #333333 inset;    padding: 12px 20px !important;}
/* Hovered Background Color */.xg_widget_main .xj_status:hover {    background-color: #14258f!important;}/* Active effect, click and hold to see in action */.xg_widget_main .xj_status:active {    box-shadow: 0 0 8px #000000 inset;}/* End Special Status Update Box Style */

 

 

 

RSS

Members

© 2024   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips