widget for mmbers

[doorscomputers]

Hello is there a way to display a widget for a member where in If I will click a member on the site it will display the avatar of that member. Because I want to hide the avatar and will not have a full width header because the position of the avatar on the plugin profile cover is covering the header. And the only thing I can think of is a widget that will display a members avatar when their profile is clicked.thank you

[doorscomputers]

I tried to move the avatar on the right side by adding this code and tried to move down the sidebar to have a space for the avatar

.sidebar-right, .sidebar-main.sidebar-3rr, .sidebar-extra.sidebar-3rr {
margin-left: -1px;
top: 200px;
}
@media screen and (min-width: 800px) {
.buddypress #item-header-avatar.rounded img.avatar {
border-radius: 0;
position: relative;
left: 475%;
}
}

but my problem is on the sidebar because on the profile page its okay but on the menus where the avatar is no longer displayed, the sidebar has an empty space on the upper area and the bottom is cut. Is there a way I can fix this?
also the problem is on mobile the avatar is gone. please help, if theres a widget/plugin that will display the members avatar because the buddypress profile shortcode plugin isnt what I needed, it only displays the user but when clicked on other mmbers it wont display their avatar. Please help thank you so much

please check http://www.liasian8.com

Attachments:

You must be logged in to view attached files.

[doorscomputers]

This reply has been set as private.

[Laura]

Hello, try by using this css instead of the one you have for the sidebar

COPY CODE

.bp-user .sidebar.sidebar-main.col-sm-3.sidebar-right {
    top: 200px !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]

wow you’re that was awesome. thank you so much Laura, I have one more problem. I moved the avatar to the right side and its okay to the desktop but everytime I resize my browser the avatar is gone, means that my code on mobile is not working
.buddypress #item-header-avatar.rounded img.avatar {
position: relative;
left: 500px;
}
How will I permanently let it stay there on that position even on mobile or tablets. thank you so much again. I apologize for this lots of questions.thank you so much again

[doorscomputers]

also on the groups section, the sidebar code not working, only on the user profile, can you help me please?thank you again

[Laura]

Hello, i suggest to use that only for desktop as its better to keep mobile responsiveness css
To have only desktop css wrap your css inside this

COPY CODE

@media screen and (min-width: 800px) {
    // this css will only be used when the screen size is min 800px
}

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 for the code as always Laura. Its great on the mobile the avatar, but the problem now is on the sidebar. Because of the code used to reposition the avatar on the sidebar

@media screen and (min-width: 800px) {
.buddypress #item-header-avatar.rounded img.avatar {
border-radius: 0;
position: relative;
left: 475%;
}
}
.bp-user .sidebar.sidebar-main.col-sm-3.sidebar-right {
top: 200px !important;
}
the problem no is on the mobile sidebar. There is a big empty space on top of the sidebar. But on desktop its okay. only on the mobile, i think im missing something for the mobile version. Thank you so much

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, just move this code

COPY CODE

.bp-user .sidebar.sidebar-main.col-sm-3.sidebar-right {
    top: 200px !important;
}

Inside the media code, so it looks like this

COPY CODE

@media screen and (min-width: 800px) {
.buddypress #item-header-avatar.rounded img.avatar {
border-radius: 0;
position: relative;
left: 475%;
}
.bp-user .sidebar.sidebar-main.col-sm-3.sidebar-right {
    top: 200px !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 🙂

[Author]

Posts