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

[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

[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

[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

[Pablito]

hola, esta es la pagina: https://www.inartist.org/people/type/artists/
tienes que entrar como indicado en my ticket “How to change avatar border/circle colour by member type?”
eres espanola, no? de donde? 🙂
gracias

[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

[Pablito]

Hola,
bueno, ahora el circulo esta bien posicionado en la directory (https://www.inartist.org/people/type/artists/) pero sale mal en la pagina del perfil (https://www.inartist.org/people/admin/), mira el attachment, gracias
No eres espanola, pero escribes muy bien en espanol 🙂

[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

[Pablito]

Funciona! eres la mejor :))

[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

[Pablito]

Hola Laura,
he visto ahora que el circulo no esta bien posicionado en la directory de la pagina de los miembros de cada grupo. Mira por favor el attachment. Puedes ayudarme, mil gracias

[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

[Pablito]

Hola, funciona corretamente excepto que por la pagina de los miembros de cada grupo, por ejemplo: https://www.inartist.org/groups/verdi-group/members/

[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

[Pablito]

Hola, funciono’ por el group member 😉
pero ahora el online circulo de cada profile member no esta de nuevo bien posicionado (see attachment) ;(
Espero tus noticias, gracias

[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

[Pablito]

perfecto, funciono’ 🙂 mil gracias por tu ayuda y paciencia 🙂

[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

[Author]

Posts