Re: Horizontal Userbar
Hi again everyone, thanks for all your pointers. I eventually ended up spending all day yesterday writing it by myself which took a very long tme! Here is the code in case it might help anyone else, it might not be prefect, I also had to do some editing in the userbar.php file to make it format how I wanted.
/*** User Navigation Bar *****************************************************/
#userbar {
width: 970px;
background: #FFFFFF;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
text-decoration: none;
padding: 3px 5px 5px 5px;
margin-bottom:5px;
height: 33px;
}
#userbar a { text-decoration: none; }
#userbar ul li {
margin-right: 0;
list-style: none;
float:left;
}
#userbar h3 {
font: normal 1em "Arial", Times, serif;
text-align: left;
padding: 0px 0 0px 0;
}
#userbar p.avatar {
text-align: left !important;
float: left;
margin-right: 1px;
}
#userbar img.avatar {
margin: 0;
width: 30px;
height: 30px;
float: none;
}
#userbar p#login-text {
margin-top:7px;
float: left;
vertical-align: middle
}
#userbar p#stuff {
margin-top:7px;
padding: 10px;
float: right;
}
#userbar form input#userbar_rememberme { width: auto; }
#userbar form input#wp-submit { width: auto; }
#userbar ul#bp-nav {
z-index: 0;
}
#userbar ul#bp-nav li.current {
background-color:#DDDDDD;
}
#userbar ul#bp-nav li a {
font-size:small;
color: #555;
padding: 0.55em 3em 0.55em 0;
display: block;
text-align: right;
margin-right: 1px;
font-family: Arial !important;
letter-spacing:-1px;
margin-left: 17px;
}
#userbar ul#bp-nav li.current a {
font-size:small;
margin-left: 17px;
color: #D6007F;
font-weight:bold;
font-family: Arial !important;
letter-spacing:-1px;
}
li a#user-profile, li a#my-profile {
background: url(../images/profile_bullet.gif) 67% 52% no-repeat;
}
li a#user-messages, li a#my-messages {
background: url(../images/messages_bullet.gif) 85% 52% no-repeat;
}
li a#user-blogs, li a#my-blogs {
background: url(../images/blog_bullet.gif) 64% 52% no-repeat;
}
li a#user-friends, li a#my-friends {
background: url(../images/friends_bullet.gif) 68% 52% no-repeat;
}
li a#user-groups, li a#my-groups {
background: url(../images/groups_bullet.gif) 70% 52% no-repeat;
}
li a#user-wire, li a#my-wire {
background: url(../images/wire_bullet.gif) 70% 52% no-repeat;
}
li a#user-activity, li a#my-activity {
background: url(../images/activity_bullet.gif) 70% 52% no-repeat;
}
li a#user-settings, li a#my-settings {
background: url(../images/settings_bullet.gif) 70% 52% no-repeat;
}
li a#wp-logout {
background: url(../images/logout_bullet.gif) 70% 52% no-repeat;
}
li a#group-home, li a#group-wire, li a#group-photos, li a#group-forum,
li a#group-members, li a#group-invite, li a#group-leave, li a#group-admin
li a#request-membership, li a#group-admin {
background: url(../images/groups_bullet.gif) 70% 52% no-repeat;
}
li a#group-forum {
background: url(../images/forum_bullet.gif) 70% 52% no-repeat;
}
li a#group-members {
background: url(../images/friends_bullet.gif) 70% 52% no-repeat;
}
li a#group-invite {
background: url(../images/invite_bullet.gif) 70% 52% no-repeat;
}
li a#group-leave {
background: url(../images/cross_bullet.gif) 70% 52% no-repeat;
}
li a#group-wire {
background: url(../images/wire_bullet.gif) 70% 52% no-repeat;
}
li a#group-admin {
background: url(../images/blogadmin_icon.gif) 70% 52% no-repeat;
}
li a#request-membership {
background: url(../images/request_bullet.gif) 70% 25% no-repeat;
}James
