move avatar position

[doorscomputers]

My avatar  isnt looking nice if placed at the center. Is there a way to move down the avatar like facebook. I even put into transparency all the meta content on the profile header because if i display:none it will shrink the header.I even turned off in the group section the avatar uploding because its covering the background and isnt nice to look at. can someone help with this problem?thanks much

[Laura]

Hello, please try by adding this to style.css of child theme 🙂

COPY CODE

.bp-user #buddypress #item-header-avatar {
    margin-top: -20px !important;
    position: absolute !important;
    margin-left: -45% !important;
}
.buddypress div#item-header {
    padding-top: 140px !important;
    padding-bottom: 50px !important;
}

Let me know if it helps 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[doorscomputers]

I tred but didnt work.anyay its okay ill just let it stay that way.thanks for the help. I just have one question on the avatar group. I disabled already the avatar for groups in budypress. But I want still to let users upload avatar, I just dont want to show the group avatar in the groups cover profile.but I want to show the avatar on the widget.I dont want to disable the group to upload avatars I just dont want it to show anymore on the groups profile cover coz its covering the cover.Thank you so much

[Laura]

Hello, please try by adding this to style.css of child theme 🙂

COPY CODE

.groups #item-header-avatar {
    display: none !important;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[doorscomputers]

thanks but its not working

[doorscomputers]

when I add the code it makes the group cover smaller.it will make the height smaller cutting the group cover. how can i retain the size of the cover while using this code mam?thanks much

[doorscomputers]

Im sorry, i just did something already, added a code on css
#item-header > #item-header-avatar, #item-header > #item-header-content {
border-color: transparent;
height: 290px;
}
and its now okay. Thank you so much for your help and your time.One more question regarding the groups profile cover and the members profile over, why its not responsive on mobile.it should make the covers smaller and not cut the images

[doorscomputers]

im sorry but i thought its working fne but it made the cover shorter and cut the image, I added the css #item-header > #item-header-avatar, #item-header > #item-header-content {
border-color: transparent;
height: 290px;
}
it worked fine o the group but not on the members profile.it made the members profile larger.ho can i fix this?thanks mam

[Laura]

Hello, for the groups use

COPY CODE

.groups #item-header-avatar #item-header  #item-header-content {
border-color: transparent;
height: 290px;
}

For the profile page, how do you want it?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[doorscomputers]

hello can I ask another question on the profile avatar, I am using a boxed layout can you help me reposition the avatar as it is blocking the profile cover.maybe put it down to the left side like the other plugin bp cover https://wordpress.org/plugins/bp-cover/
and would also be good on the mobile.thank you so much

[doorscomputers]

I added this code and I was able to move it but on mobile the avatar disappears,. please help. Thank you

[doorscomputers]

I added this code and I was able to move it but on mobile the avatar disappears,. please help. Thank you

.buddypress #item-header-avatar.rounded img.avatar {
border-radius: 0;
position: relative;
top: 215px;
left: -650px;
}

[Laura]

Hello, please try by replacing the last code you added with

COPY CODE

@media screen and (min-width: 800px) {
   .buddypress #item-header-avatar.rounded img.avatar {
border-radius: 0;
position: relative;
top: 215px;
left: -650px;
}
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[doorscomputers]

thank you for the code it worked but is there a way we can let the avatar stay on that position blow so not to cover the profile header?thanks much laura for the codes

[Laura]

Hello, do you mean move it outside of the header? That could be a bit more complicated, let me know exactly how do you want it to look like 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[doorscomputers]

its nice on desktop but on some tablets the avatar is gone, on smaller phones the avatar goes into the center. if theres a way that the avatar wont change its position and stay on the left and bottom of the profile cover just like its position on the desktop.thank you so much

[doorscomputers]

its okay ill just have to find another way.thanks

[Laura]

Hello, i understand the issue but that is made so the website is responsive for every device, all elements change for a better user experience 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Author]

Posts