Иконки онлайна и оффлайна под аватаром

Для начала понадобятся соответствующие иконки:

Код:

http://i27.servimg.com/u/f27/14/67/67/89/kg13-513.png

Код:

http://i27.servimg.com/u/f27/14/67/67/89/kg13-515.png

Обратите внимание: Онлайн (On) будет закрывать собой иконку оффлайна (off), поэтому должна быть либо одинакового с ней размера, либо чуть больше.

---

Вариант для BB2 и PUN

1) Загрузите кнопку On обычным способом: через ПА > Оформление > Управление картинками > Продвинутый режим - Кнопки - online.

2) Откройте ПА > Оформление > Шаблоны > Общие настройки - viewtopic_body (Показ темы)
Найдите в коде и удалите строку

Код:

{postrow.displayed.ONLINE_IMG}

а вместо

Код:

{postrow.displayed.POSTER_AVATAR}

подставьте

Код:

<div class="ava">{postrow.displayed.POSTER_AVATAR}</div><span class="prfav">{postrow.displayed.ONLINE_IMG}</span>


Затем сохраните и опубликуйте измененный шаблон.

3) В CSS пропишите:

Код:

.ava {
text-align: center;
}
.prfav {
display:block;
position: relative;
width: 87px;
height: 13px;
background: transparent url("http://i27.servimg.com/u/f27/14/67/67/89/kg13-515.png") no-repeat;
margin: -7px auto 0;
}
.prfav img {
display:block;
position: relative;
}

Сохраните.

В свойства:
width: 87px - подставьте ширину Вашей кнопки
height: 13px - подставьте высоту Вашей кнопки

В строке background: transparent url("https://i.servimg.com/u/f27/14/67/67/89/kg13-515.png") вместо https://i.servimg.com/u/f27/14/67/67/89/kg13-515.png подставьте ссылку на Вашу кнопку Off.

В строке margin: -7px auto 0 вместо -7 указать подходящее отрицательное число (~ половина высоты иконки). Это расстояние, на которое иконка будет сдвинута вверх, на аватар.

---

Другие варианты кода

Полупрозрачные аватары в режиме оффлайн [все движки]

---

© Данный туториал создан пользователем Dana Domirani.  Любая публикация этого материала без разрешения администрации help.forum2x2.ru запрещается.