Skip to:
Content
Pages
Categories
Search
Top
Bottom

Horizontal Userbar

  • Avatar of jamesyeah
    jamesyeah
    Participant

    @jamesyeah

    Hey Everyone,

    Currently working on a new theme and attempting to move the vertical userbar and options bar to being horizontal below the header. I’ve looked through all the CSS but cant for the life of me find how to do it, any ideas?!

    Thanks, james

Viewing 10 replies - 1 through 10 (of 10 total)
  • Avatar of 21cdb
    21cdb
    Participant

    @21cdb

    Replace the “float: left” on #userbar and #optionsbar with “float: none” change “width: 138px” to “witdh: 100%”.

    On #userbar ul#bp-nav and #optionsbar ul#options-nav remove “width: 148px.

    Add “float: left” on #userbar ul li and #optionsbar ul li

    Note: This is without any styling and should just point you in the right direction.

    Avatar of jamesyeah
    jamesyeah
    Participant

    @jamesyeah

    Thanks for that I will give it a go and let you know how I get on!

    Avatar of wpmubp.org
    wpmubp
    Participant

    @takuya

    There’re some old posts on the same topics, I believe. (only if 21cdb’s code doesn’t work) :)

    Avatar of jamesyeah
    jamesyeah
    Participant

    @jamesyeah

    Hey,

    Thanks again for the advice, I’m having still having some issues around this it is quite tricky, here is a picture of how it is rendering now.

    http://i34.tinypic.com/wklono.jpg

    Is there any release of the code used on this site, the way it’s styled on here looks great!

    It’s also at http://yeahetc.com on the member pages at the moment, still playing about.

    James

    Avatar of wpmubp.org
    wpmubp
    Participant

    @takuya

    This buddypress.org design is ONLY for buddypress.org.

    Some buddypress themes before 1.1 releases had horizontal menus. Maybe you should search and get some sample codes. Also check out gallery section, in case if our member already has done it on their site(s).

    Avatar of Xevo
    Xevo
    Participant

    @xevo

    Check the themes of Milo.

    http://3oneseven.com/wpmu-buddypress-themes/

    Change those, those have the bar like you want it.

    (You need an understanding of a bit more then css if you want it like your design right now though..)

    Avatar of Detective
    Detective
    Participant

    @detective

    Hi,

    Check out http://ryuuko.cl

    It uses a horizontal user bar at the top. Feel free to see the markup and the css (it displays in place of the login form).

    Avatar of jamesyeah
    jamesyeah
    Participant

    @jamesyeah

    Hey,

    Thanks for all your help, hopefully if I can get all this code together and working I will post it as I’m sure people will come accross this, I’m not that great at CSS yet though!

    Thanks for the link I like your site!

    Avatar of jamesyeah
    jamesyeah
    Participant

    @jamesyeah

    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

    Avatar of Catherine
    Catherine
    Participant

    @snapstart

    ty so much for this!

Viewing 10 replies - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.