Здравствуйте! После того как я сделал свой
вид информера пользователе в разных тонах мне пришла идея для создания ещё одного вида в стили батла между двумя пользователями.
Ну и как обычно, я долго не стал думать и приступил к его реализации.
Теперь выкладываю на ваш суд!
Установка
Для начало нам нужно создать сам информер для этого просто перейдём в Панель управления затем Информеры и нажмём кнопку создать информер
Вид информера
Параметры информера
Пользователи · Материалы · Репутация · Материалы: 2 · Колонки: 1
и кнопочку создать!
В шаблон информера поместить код
Код
<?if($NUMBER$="1")?>
<div class="user_talantlev_block">
<a href="$PROFILE_URL$" title="Перейти в профиль $USERNAME$"">
<span class="bg_fon_r">$REPUTATION$</span>
<?if($AVATAR_URL$)?><img src="$AVATAR_URL$"><?else?>
<img src="http://talantlev.ucoz.ru/img/talantlev.png"><?endif?>
</a>
</div>
<?else?>
<div class="user_talantlev_block right_ava_inf_bc">
<a href="$PROFILE_URL$" title="Перейти в профиль $USERNAME$"">
<span class="bg_fon_r">$REPUTATION$</span>
<?if($AVATAR_URL$)?><img src="$AVATAR_URL$"><?else?>
<img src="http://talantlev.ucoz.ru/img/talantlev.png"><?endif?>
</a>
</div>
<?endif?>
<span class="batl_us_informer">VS</span>
Теперь на страницу где будет информер вставим код вывода
Код
<div class="bc_talantlev_inf_usera">
$MYINF_Номер вашего информера$
<div id="clr"></div>
</div>
Внимание в коде выше нужно заменить текст в данной строчке $MYINF_Номер вашего информера$ на номер вашего информера
Теперь подключим стили в свою таблицу в самый конец
Код
.bc_talantlev_inf_usera {
background: #4285f4;
padding: 20px;
background: -moz-linear-gradient(-45deg, #dc5766 0%, #967197 50%, #4b82d5 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #dc5766), color-stop(50%, #967197), color-stop(100%, #4b82d5));
background: -webkit-linear-gradient(-45deg, #dc5766 0%, #967197 50%, #4b82d5 100%);
background: -o-linear-gradient(-45deg, #dc5766 0%, #967197 50%, #4b82d5 100%);
background: -ms-linear-gradient(-45deg, #dc5766 0%, #967197 50%, #4b82d5 100%);
background: linear-gradient(135deg, #dc5766 0%, #967197 50%, #4b82d5 100%);
position: relative;
}
.user_talantlev_block {
width: 60px;
height: 60px;
border-radius: 50%;
border: 5px solid rgba(255,255,255,.4);
overflow: hidden;
position: relative;
}
.user_talantlev_block img {
width: 60px;
height: 60px;
object-fit: cover;
}
.right_ava_inf_bc {float: right;}
.bg_fon_r {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
color: #FFF;
background: rgba(0,0,0,.5);
width: 50px;
height: 60px;
border-radius: 50%;
line-height: 50px;
text-align: center;
display: none;
}
.user_talantlev_block:hover .bg_fon_r{display: block;}
.batl_us_informer {
font-size: 40px;
font-weight: bold;
color: #FFF;
position: absolute;
z-index: 2;
left: 50%;
width: 50px;
height: 50px;
margin-left: -25px;
top: 50%;
margin-top: -25px;
}
#clr {clear: both;}
Готово,
Демо смотрим тут Вопросы - отзывы, пожелание по доработки вида пишите в комментариях или на форуме.
waak 
