css styling for buddybar-widget in Elegant themes template WordPress

Doug Montgomery comments:

Well, that's a little better but a far cry from the look I'm going for...

Something a little closer to layout, including pages, on this page?
http://slushman.com/plugins/buddybar-widget

idt comments:

Ok, on it.

idt comments:

Replace the one I sent you earlier with this:

#bbw-avatar li, #bbw-profile li, #bbw-activity li, #bbw-friends li, #bbw-groups li, #bbw-messages li {
background: none transparent;
}

#bbw-avatar, #bbw-profile, #bbw-activity, #bbw-friends, #bbw-groups, #bbw-messages {
height: 100px;
}
#bbw-activity, #bbw-friends, #bbw-groups, #bbw-messages {
width: 115px;
}
#recent-posts-2 {
clear: both;
}

idt comments:

Ooops sorry. This line:


#bbw-avatar, #bbw-profile, #bbw-activity, #bbw-friends, #bbw-groups, #bbw-messages {

height: 100px;

}

SHould be


#bbw-avatar, #bbw-profile, #bbw-activity, #bbw-friends, #bbw-groups, #bbw-messages {

height: auto !important;

}

idt comments:

So the final CSS you add should be this:

#bbw-avatar li, #bbw-profile li, #bbw-activity li, #bbw-friends li, #bbw-groups li, #bbw-messages li {
background: none transparent;
}
#bbw-avatar, #bbw-profile, #bbw-activity, #bbw-friends, #bbw-groups, #bbw-messages {
height: auto !important;
}
#bbw-activity, #bbw-friends, #bbw-groups, #bbw-messages {
width: 115px;
}
#recent-posts-2 {
clear: both;
}

idt comments:

It seems, that styles needs to be important.

Use this instead:

#bbw-avatar {
width: 85px !important;
}
#bbw-avatar li, #bbw-profile li, #bbw-activity li, #bbw-friends li, #bbw-groups li, #bbw-messages li {
background: none transparent !important;
}
#bbw-avatar, #bbw-profile, #bbw-activity, #bbw-friends, #bbw-groups, #bbw-messages {
height: auto !important;
}
#bbw-activity, #bbw-friends, #bbw-groups, #bbw-messages {
width: 115px !important;
}
#recent-posts-2 {
clear: both;
}

Sorry for the mistakes. Please use this one.

Doug Montgomery comments:

Somethings not right...look at that....

idt comments:

Obviously the CSS that I gave you was not there. I saw it work earlier for both FF and Chrome. If you removed the styles I gave you then add it back.

Doug Montgomery comments:

Ok...I got the code back...I sent another message but to the wrong person..I'm working on 2 problems at the same time....

Is it possible to put a box around it using the short codes that come with theme?
http://www.elegantthemes.com/preview/Chameleon/shortcodes/
It needs to have a frame of some sort like the on on the other page...and bold text...

idt comments:

Did you mean a rounded corner border around the whole widget?

Doug Montgomery comments:

No, Like number 2 on [[LINK href="http://www.elegantthemes.com/preview/Chameleon/shortcodes/"]]this page... [[/LINK]]

Doug Montgomery comments:

BUT the short form....without the pages.... The first small box with only extended profiles... Just needs to be the basic information and a background...one of the these backgrounds from the shortcodes would be nice.

idt comments:

I don't understand what you mean. What I see there is basically just a box with rounded corners.

But using the shortcodes, no, I don't think you can use the shortcodes with the widget. But if it was the rounded corner borders you are referring to then it can be done.

Basically what you wanted to achieve with this question is already answered I suppose. Though I'm willing to extend my help if you can be clearer with what you want to achieve. A screenshot/image will be helpful.

Doug Montgomery comments:

If you can get it to look like the last box of number 2 on that page... the grey color with a shadow with css that would be fantastic

idt comments:

OK. Try this:

.slushman-buddybar-widget #sidebar-me {
background: none #F1F1F1;
border: 1px solid #CCCCCC;
border-radius: 10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
padding: 10px;
width: 250px;
-moz-box-shadow: 3px 3px 11px 1px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 3px 3px 11px 1px rgba(0, 0, 0, 0.1)0;
box-shadow: 3px 3px 11px 1px rgba(0, 0, 0, 0.1);
}

If would be wonderful if you can up the prize to $10.

Thanks,
idt

Doug Montgomery comments:

I'm a fair guy I can throw in a couple extra bucks.

Somethings still up though...check it out...
Also we want to not show all the extra info. Is there a way to css out all the messages, pages, groups and the mailbox?

Also, can you pull the lines of text a little tighter? They are a bit too far apart. The edit profile,change picture,change password lines.

idt comments:

Please try this:

.slushman-buddybar-widget #sidebar-me {
background: none #F1F1F1;
border: 1px solid #CBC4C4;
border-radius: 10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
padding: 10px;
width: 250px;
-moz-box-shadow: 3px 3px 11px 1px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 3px 3px 11px 1px rgba(0, 0, 0, 0.1)0;
box-shadow: 3px 3px 11px 1px rgba(0, 0, 0, 0.1);
height: 245px;
}

#bbw-messages,
#bbw-groups {
display: none;
}

#bbw-friends,
#bbw-activity
margin-top: 15px;
}

.slushman-buddybar-widget #sidebar-me li {
padding-bottom: 1px;
}

idt comments:

On the CSS I sent above, please reeplace this:

.slushman-buddybar-widget #sidebar-me li {
padding-bottom: 1px;
}

With this:

.slushman-buddybar-widget #sidebar-me li {
padding-bottom: 1px !important;
}

Doug Montgomery comments:

Looks Great! I made it a bit wider but can't get it centered. I know there's a margin or padding I'm supposed to put in but I don't know where.

Doug Montgomery comments:

I have to step out for a moment...I'll be back in about 10 minutes. I surely do appreciate your help.

idt comments:

To center the box , add this:

.slushman-buddybar-widget #sidebar-me {
margin-left: -30px; /* Adjust to your liking */
}