How to change avatar border/circle colour by member type?

[Pablito]

Hi, I would really appreciate your help to modify the colour of user avatar border (white circles around the user profile image), and preferably depending on the member type (for example yellow for users with “teacher” member type and blue for “student” member type). thanks for your great support and best regards

[Laura]

Hello, that si not available right now, i can help you change the border color but not based on the member type

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 🙂

[Pablito]

ok I understand. Can you please let me know how to change the colour? for example to green. Thanks a lot

[Pablito]

And I would also appreciate your help to change the colour of the small circle at the bottom-right of the profile picture (it is now grey if online, and blue if online). Is it possible to change its position, for example to the top-left?
Thanks in advance and best regards

[Laura]

Hello, to change the border color use this css
add to style.css of child theme

COPY CODE

.buddypress #item-header-avatar {
    border-color: green !important;
}

For the online button position

COPY CODE

.buddypress .kleo-online-status {
    /* right: 0; */
    bottom: 20px;
    width: 16px;
    height: 16px;
    right: 4px;
    left: 4px;
    top: 15px;
}

For the online button color: if online

COPY CODE

span.kleo-online-status.high-bg {
    background: white !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 🙂

[Pablito]

Thanks Laura,
it worked. The online circle is now well located in the member profile picture. However, the position of the online circle in the page of search member directory results is not good yet (as you can see in the attachment). Can you help us with it? Muchas gracias

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, can you share a link to the page so i can check it out? I will be happy to help you 🙂

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 🙂

[Pablito]

This reply has been set as private.

[Laura]

Hola 🙂
Prueba añadiendo el siguiente código en style.css del child theme

COPY CODE

span.kleo-online-status.hover-tip.click-tip {
    margin-left: -12% !important;
    margin-top: -25% !important;
}

No soy española pero vivo en españa 🙂

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 🙂

[Pablito]

This reply has been set as private.

[Laura]

Hola, prueba con este código

COPY CODE

.directory span.kleo-online-status.hover-tip.click-tip {
    margin-left: -12% !important;
    margin-top: -25% !important;
}

Dime si funciona 🙂

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 🙂

[Pablito]

This reply has been set as private.

[Laura]

Me alegra que funcione 🙂
Dime si necesitas ago mas, es un placer ayudar 🙂
Oh si no es molestia nos ayudaría mucho si pudieras votar con 5 estrellas al tema en themeforest

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 🙂

[Pablito]

This reply has been set as private.

[Laura]

Hola, funciona correctamente o aun lo ves mal?
Avisame para revisarlo 🙂

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 🙂

[Pablito]

This reply has been set as private.

[Laura]

Hola, prueba con este código 🙂

COPY CODE

span.kleo-online-status.hover-tip.click-tip {
    margin-left: -7px;
    margin-top: -15px;
}

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 🙂

[Pablito]

This reply has been set as private.

[Laura]

Hola, prueba a reemplazar el ultimo código por este

COPY CODE

.groups span.kleo-online-status.hover-tip.click-tip {
    margin-left: -7px;
    margin-top: -15px;
}

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 🙂

[Pablito]

This reply has been set as private.

[Laura]

Siempre es un placer ayudar 🙂

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