Лучший пользователь сайта для ucoz
Лучший пользователь сайта для ucoz
Лучший пользователь сайта для ucoz. Это ячейка, в которой находиться аватар пользователя и его общее количество комментарий, подойдёт для блогов, в которых пользователи боряться за право быть лучшим пользователем блога.
Установка: - заходим в админ панель сайта => Инструменты => Информеры => создать информер
- Раздел: ( пользователи )
- Способ сортировки: ( количество комментарий )
- Количество материалов: ( 1 )
- Количество колонок: ( 1 )
теперь открываем информер и копируем туда следующий код, в котором я использовал основную ячейку div с закруглёнными углами, в которую поместил ещё две основные ячейки, верх и низ, благодаря этому мы видим вдавленную линию и разделения между информацией.
Code
<div class="comment_info transparency_i">
<div class="comment_v">
<a href="$PROFILE_URL$" title="Профиль пользователя $USERNAME$"><?if($AVATAR_URL$)?><img class="avatar_img" src="$AVATAR_URL$" /><?else?><img class="avatar_img" src="http://center-dm.ru//site/no_avatar.jpg" alt="no" /><?endif?>
</a>
$USERNAME$
</div>
<div class="comment_n">
<img src="ico_coment.png" alt="иконка комментария"> $COM_POSTS$
</div>
</div>
и незабываем про css стили, где я использовал закруглённые углы основной ячейки, добавил прозрачности изображению при наведении на него стрелкой мыши.
Code
.comment_info {
text-align:center;
font:9px Verdana,Arial,Helvetica, sans-serif; color:#85898f;
width:100px;
border:1px solid #d2d2d4;
background: #e4e5e7;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.avatar_img {
width:65px;
height:65px;
background: #fff;
border:1px solid #d2d2d4;
padding: 4px;
margin-bottom: 3px;
}
.comment_v {
border-bottom: 1px solid #d2d2d4;
padding: 10px 0px 4px 0px;
}
.comment_n {
border-top: 1px solid #fff;
padding: 5px 0px 5px 0px;
}
.transparency_i a:hover img {
filter: progid: DXImageTransform.Microsoft.Alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
filter: alpha(opacity=70);
}
Данную дизайнерскую мелочь можно использовать в качестве комментарий на форуме или поместить в анкету пользователя и добавить нужные функции или как многие блогеры любят делать, использовать данную ячейку в качестве основной информации об администраторе, кто, что сколько, как говориться.
Или прописать в информере:
- Количество материалов: ( 9 )
- Количество колонок: ( 3 )
уменьшить в css стилях ширину основной ячейки, добавить внешние отступы и получить готовый модуль
Code
.comment_info {
text-align:center;
font:9px Verdana,Arial,Helvetica, sans-serif; color:#85898f;
width:70px;
border:1px solid #d2d2d4;
background: #e4e5e7;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: 5px 5px 5px 5px;
}
вот и всё!