Изменяем внешний вид онлайн-индикатора

[Hope]

Hope добавил(а) новый ресурс:

Изменяем внешний вид онлайн-индикатора - Изменяем внешний вид онлайн-индикатора.

В шаблон extra.less добавляем:

.message-avatar-wrapper .message-avatar-online {
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border: 2px solid;
    border-left-color: #7fb90087;
    border-top-color: #7fb90087;
    border-right-color: #7fb90087;
    border-bottom-color: #7fb90087;
    border-radius: 3px;
    box-shadow: 0px 0px 10px 3px hsla(79, 99%, 36%, 0.16862745098039217)
}

Узнать больше об этом ресурсе...

 

[Mr_panica]

Как сделать такой же индикатор только для круглых аватаров?

 

[IlyaPep]

Как сделать такой же индикатор только для круглых аватаров?

Просто замените это в коде :)

border-radius: 50px; //50 пикселей это пример, нужно по месту подбирать

вот так выглядит

 

[Skaiman]

XELLADOLL, не нужно подбирать :) просто 50%

Мне здесь заинтересовал цвет указанный для бордюра :) #7fb90087

 

[nabster]

как сделать цвет по краям аватара больше , на подобии неона ?

 

[CrazyHackGUT]

nabster, c border играйтесь. Там размер в пикселях указан.

 

[nabster]

nabster, c border играйтесь. Там размер в пикселях указан.

все получилось , спасибо

.message-avatar-wrapper .message-avatar-online {
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 4px solid;
    border-left-color: #7fb90087;
    border-top-color: #7fb90087;
    border-right-color: #7fb90087;
    border-bottom-color: #7fb90087;
    box-shadow: 0px 0px 10px 3px rgba(125, 183, 1, 0.6);
}