New
PeoplePress is here. Community building for WordPress, reimagined. Fast, modern, and built for the communities you've always wanted to run.
See it live

BuddyDev

Search

Redesign of xprofile fields in members directory

  • Participant
    Level: Yogi
    Posts: 1117
    calu on January 1, 2019 at 8:07 pm #19840

    Hi Brajesh

    I have added some of the xprofile fields to the members directory with a code snippet from your directory, and it works very well.

    But I really having difficulties getting the design right. I have tried to change the float of the different elements, to get a more compact design than this:

    https://imgur.com/a/nHAGYwP

    What I am looking for is my four xprofile fields next to the avatar like the text field here:

    https://imgur.com/a/OjgY7eY

    Is there an easy css fix to this?

    Regards
    Carsten

  • Participant
    Level: Yogi
    Posts: 1117
    calu on January 1, 2019 at 10:18 pm #19841
    This reply has been marked as private.
  • Keymaster
    (BuddyDev Team)
    Posts: 25509
    Brajesh Singh on January 1, 2019 at 10:21 pm #19842

    Please link me to your page, Should be a minor css as you have amlmost done it.

    Regards
    Brajesh

  • Participant
    Level: Yogi
    Posts: 1117
    calu on January 1, 2019 at 10:39 pm #19844
    This reply has been marked as private.
  • Keymaster
    (BuddyDev Team)
    Posts: 25509
    Brajesh Singh on January 1, 2019 at 10:51 pm #19845

    Hi Carsten,
    Please add the following css and it should do it partially.

    
.bph_xprofile_fields {

    margin-left:0
    position: absolute;
    left: 0;
    bottom: 0;
}

#members-dir-list .bp-list li .item-avatar {
  margin-bottom: 100px;
}

    That should most probably do it.

    Please let me know if it works or not?

    Regards
    Brajesh

  • Keymaster
    (BuddyDev Team)
    Posts: 25509
    Brajesh Singh on January 1, 2019 at 10:55 pm #19847

    Also,
    If it looks bad, Please change margin rule in the above code from

    
margin-left: 0;

    to

    
margin-left: 0 !important;

    That should put the text under image.

    Regards
    Brajesh

  • Participant
    Level: Yogi
    Posts: 1117
    calu on January 1, 2019 at 11:20 pm #19848
    This reply has been marked as private.
  • Participant
    Level: Yogi
    Posts: 1117
    calu on January 1, 2019 at 11:25 pm #19849

    ‘user name* and last activity are within the height of the avatar ‘

    *of course with a much smaller font

  • Keymaster
    (BuddyDev Team)
    Posts: 25509
    Brajesh Singh on January 1, 2019 at 11:28 pm #19850

    You will need to target using media query. Simply removing position:absolute and the bottom margin for avatar will solve it for the mobile.

    As of the last design shared(3 cols or 2 cols), That will need template modification, mere css won’t be able to fix it.

    Regards
    Brajesh

  • Participant
    Level: Yogi
    Posts: 1117
    calu on January 2, 2019 at 12:23 am #19853
    This reply has been marked as private.

You must be logged in to reply to this topic.

This topic is: not resolved