i forget how to change Square Avatar to Circle Avatar [Help]

[ShieldX]

i just google and checked i didnt find working answer , my profiel still showing in Square after changing avatar border radius to 50px or 50% , do i need to do more...something i missing..?

 

[shqawe]

You can add below css code to extra.less template and it will change avatar to be circle

.avatar {
    border-radius: 50% !important;
}

 

[ShieldX]

You can add below css code to extra.less template and it will change avatar to be circle

.avatar {
    border-radius: 50% !important;
}

shqaweThanks your code Works.

 

[one_finger_man]

try this add to extra less

.messageUserBlock div.avatarHolder .onlineMarker
{
  display: inline-block;
  width: 16px;
  height: 16px;
/*  margin: 9px 0 0 9px; <- if you'd like it on top left */
  margin: 79px 0 0 79px;
  background: #fff;
  border: none!important;
  border-radius: 50%!important
}
.messageUserBlock div.avatarHolder .onlineMarker:before
{
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  margin: 3px 0 0 -5px;
  background: #7fb900;
  border-color: #7fb900;
  border-radius: 50%
}
.messageUserBlock div.avatarHolder .onlineMarker:after
{
  content: '';
  position: absolute;
  width: 32px;
  height: 32px;
  margin: -9px 0 0 -17px;
  border: 1px solid #7fb900;
  border-radius: 50%;
  box-shadow: 0 0 4px #7fb900, inset 0 0 4px #7fb900;
  -webkit-transform: scale(0);
  -webkit-animation: online 2.5s ease-in-out infinite;
  animation: online 2.5s ease-in-out infinite
}
@-webkit-keyframes online
{
  0% {opacity: 1;-webkit-transform: scale(0)}
  50% {opacity: .7}
  100% {opacity: 0;-webkit-transform: scale(1)}
}
@keyframes online
{
  0% {opacity: 1;transform: scale(0)}
  50% {opacity: .7}
  100% {opacity: 0;transform: scale(1)}
}

.avatar img,
.avatar .img,
.avatarCropper {
border-radius: 50px !important;
}

 

[BattleKing]

try this add to extra less

.messageUserBlock div.avatarHolder .onlineMarker
{
  display: inline-block;
  width: 16px;
  height: 16px;
/*  margin: 9px 0 0 9px; <- if you'd like it on top left */
  margin: 79px 0 0 79px;
  background: #fff;
  border: none!important;
  border-radius: 50%!important
}
.messageUserBlock div.avatarHolder .onlineMarker:before
{
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  margin: 3px 0 0 -5px;
  background: #7fb900;
  border-color: #7fb900;
  border-radius: 50%
}
.messageUserBlock div.avatarHolder .onlineMarker:after
{
  content: '';
  position: absolute;
  width: 32px;
  height: 32px;
  margin: -9px 0 0 -17px;
  border: 1px solid #7fb900;
  border-radius: 50%;
  box-shadow: 0 0 4px #7fb900, inset 0 0 4px #7fb900;
  -webkit-transform: scale(0);
  -webkit-animation: online 2.5s ease-in-out infinite;
  animation: online 2.5s ease-in-out infinite
}
@-webkit-keyframes online
{
  0% {opacity: 1;-webkit-transform: scale(0)}
  50% {opacity: .7}
  100% {opacity: 0;-webkit-transform: scale(1)}
}
@keyframes online
{
  0% {opacity: 1;transform: scale(0)}
  50% {opacity: .7}
  100% {opacity: 0;transform: scale(1)}
}

.avatar img,
.avatar .img,
.avatarCropper {
border-radius: 50px !important;
}

one_finger_manIt would be nice to see the result in a screenshot, like before the changes and after, so that everyone knows what will be changed! Thx

 

[ShieldX]

It would be nice to see the result in a screenshot, like before the changes and after, so that everyone knows what will be changed! Thx

BattleKingthanks first code works , so i dont need to test 2nd code.

 

[BattleKing]

thanks first code works , so i dont need to test 2nd code.

ShieldXI know that this works, it was more a hint to all who post code, to add pictures before and after, so that the users see the changes!