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

Home Forums KLEO Theme options & Demo content How to change avatar border/circle colour by member type?

This topic has 20 replies, 2 voices, and was last updated 8 years by Laura.

  • Author
  • March 23, 2017 at 23:44 #156540
     Pablito
    Participant

    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

    March 27, 2017 at 08:37 #156731
     Laura
    Moderator

    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
    March 27, 2017 at 22:24 #156867
     Pablito
    Participant

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

    March 27, 2017 at 22:28 #156868
     Pablito
    Participant

    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

    March 30, 2017 at 01:01 #157170
     Laura
    Moderator

    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
    April 13, 2017 at 12:02 #158407
     Pablito
    Participant

    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

    April 13, 2017 at 20:24 #158456
     Laura
    Moderator

    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
    April 13, 2017 at 21:24 #158470
     Pablito
    Participant

    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

    April 14, 2017 at 04:45 #158500
     Laura
    Moderator

    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
    April 14, 2017 at 10:46 #158522
     Pablito
    Participant

    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 🙂

    April 14, 2017 at 22:43 #158555
     Laura
    Moderator

    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
    April 15, 2017 at 10:51 #158583
     Pablito
    Participant

    Funciona! eres la mejor :))

    April 17, 2017 at 20:35 #158687
     Laura
    Moderator

    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
    April 22, 2017 at 10:26 #159308
     Pablito
    Participant

    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

    April 24, 2017 at 03:09 #159395
     Laura
    Moderator

    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
    April 24, 2017 at 09:13 #159405
     Pablito
    Participant

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

    April 25, 2017 at 20:27 #159570
     Laura
    Moderator

    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
    April 25, 2017 at 21:04 #159573
     Pablito
    Participant

    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

    April 26, 2017 at 22:46 #159713
     Laura
    Moderator

    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
    April 26, 2017 at 22:58 #159714
     Pablito
    Participant

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

    April 28, 2017 at 00:23 #159801
     Laura
    Moderator

    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
Viewing 21 posts - 1 through 21 (of 21 total)

You must be logged in to reply to this topic.

Support Hours Our support team is available from Monday to Friday during regular office hours ( East European Time ). Please allow up to 48hrs so we can review your request and respond.
License info One theme purchase allows you to use it only on one WordPress install, so each new install requires a new license. We thank and appreciate everyone for their purchase as it allows us to keep supporting and releasing new updates.
Support Hours Our support team is available from Monday to Friday during regular office hours ( East European Time ). Please allow up to 48hrs so we can review your request and respond.
License info One theme purchase allows you to use it only on one WordPress install, so each new install requires a new license. We thank and appreciate everyone for their purchase as it allows us to keep supporting and releasing new updates.

©2026 SeventhQueen - Powered by KLEO Theme

Terms & conditions | Privacy Policy

Log in with your credentials

Forgot your details?