Rounded admin / buddy bar corners? Css
-
Hi there I’m looking to style all of the corners of the buddypress admin bar that drops down in the top right hand corner, so they’re rounded. Can anyone help me with the css? I’ll paste in below what I’ve got so far: I patched the below together using firebug & a paste from somewhere (the change admin bar with more effects bit which gives me a white dividing line between dropdowns although none of the rest of it seems to do anything) Can anyone help? I’m really stuck! Many thanks
/*change admin bar color*/ #wp-admin-bar #wp-toolbar #wpadminbar #wp-admin-bar-user-actions #wp-admin-bar-my-account #wp-admin-bar-edit-profile .ab-sub-wrapper,.ab-submenu,.quicklinks,.ab-item,.menupop{ background: #63486e !important; font-weight: bold !important; font-family: "Lato" , sans-serif !important; color: #ffffff !important; } .menupop:hover, .quicklinks:hover, .ab-item:hover{ color: #fff200!important; } /*change username color* (under display name in drop down avatar in admin bar*/ .ab-sub-wrapper,.username { background: #63486e !important; font-weight: bold !important; font-family: "Lato" , sans-serif !important; color: #ffffff !important; } /*change display name in drop down avatar in admin bar so big*/ .display-name { font-size: 17px !important; font-weight: bold !important; } /*change admin bar with more effects*/ .ab-item{ background: #fff url(images/black_top.png) top left repeat-x; background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#111111)); background: -webkit-linear-gradient(top, #ffffff, #111111); background: -moz-linear-gradient(top, #ffffff, #111111); background: -ms-linear-gradient(top, #ffffff, #111111); background: -o-linear-gradient(top, #ffffff, #111111); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1); -moz-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1); box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1); }
-
Styling the WP Toolbar is not directly related to BuddyPress and a bit out of the scope of this forum.
Please ask better on a specialized CSS forum. 😉#id { border-radius: 5px; }
Will do what you need. You just have to look at the source code of the page and find the right selector. The link @danbp provided is a good place to get more info on how CSS works.
Also, here’s some more info on the
border-radius
CSS3 property:https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
- The topic ‘Rounded admin / buddy bar corners? Css’ is closed to new replies.