[4.2.x] подсветка аватара если пользователь онлайн/оффлайн/невидим

11-02-2015, 11:58 PM

для 3х есть хак: http://vbsupport.ru/forum/showthread.php?t=15911

Но я решил запилить все на CSS, может кому-то понравится? Итак инструкция.

В шаблоне postbit или postbit_legacy (в зависимости от того какой у вас постбит - горизонтальный или вертикальный) находим и удаляем

Code:

{vb:raw post.onlinestatus}

далее находим:

Code:

<vb:if condition="$show['avatar']">

и ниже меняем

Code:

<img src="{vb:raw post.avatarurl}" alt="{vb:rawphrase xs_avatar, {vb:raw post.username}}" title="{vb:rawphrase xs_avatar, {vb:raw post.username}}" />

на

Code:

<img src="{vb:raw post.avatarurl}" alt="{vb:rawphrase xs_avatar, {vb:raw post.username}}" title="{vb:rawphrase xs_avatar, {vb:raw post.username}}" id="postuseravatar_{vb:raw post.onlinestatus}" />

далее меняем ВСЕ содержимое шаблона postbit_onlinestatus на:

Code:

<vb:if condition="$onlinestatus==0">offline<vb:elseif condition="$onlinestatus==1" />online<vb:elseif condition="$onlinestatus==2" />invisible</vb:if>

ну и наконец, добавляем в шаблон additional.css

Code:

#postuseravatar_online {
	border: 4px solid #95C355;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: 0px 0px 4px #cce1b0;
	-moz-box-shadow: 0px 0px 4px #cce1b0;
	box-shadow: 0px 0px 4px #cce1b0;
}
#postuseravatar_offline {
	border: 4px solid #d4d4d4;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: 0px 0px 4px #4195fc;
	-moz-box-shadow: 0px 0px 4px #4195fc;
	box-shadow: 0px 0px 4px #4195fc;
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity:0.5;
	opacity:0.5;
}
#postuseravatar_offline:hover {
	opacity:2.0;
	-moz-opacity:2.0;
	-khtml-opacity:2.0;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=200);
}
#postuseravatar_invisible {
	border: 4px solid #BFDAE7;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: 0px 0px 4px #cedce3;
	-moz-box-shadow: 0px 0px 4px #cedce3;
	box-shadow: 0px 0px 4px #cedce3;
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
	-khtml-opacity:0.8;
	opacity:0.8;
}
#postuseravatar_invisible:hover {
	opacity:2.0;
	-moz-opacity:2.0;
	-khtml-opacity:2.0;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=200);
}

тут можете экспериментировать с цветами, прозрачностью и прочее и прочее ;)

ВСЕ ;)