Лучший пользователь сайта по комментариям v1

·	19.09.2013, 17:21
Хочу поделиться небольшой дизайнерской мелочью, которая не вошла в данную версию дизайна моего блога. Изначально я планировал её реализовать для форума, но так как от форума пришлось отказаться, я выкладываю её на общее скачивание. - заходим в админ панель сайта => Инструменты => Информеры => создать информер - Раздел: ( пользователи ) - Способ сортировки: ( количество комментарий ) - Количество материалов: ( 1 ) - Количество колонок: ( 1 ) теперь открываем информер и копируем туда следующий код, в котором я использовал основную ячейку div с закруглёнными углами, в которую поместил ещё две основные ячейки, верх и низ, благодаря этому мы видим вдавленную линию и разделения между информацией. HTML-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://ucoz-helper.ucoz.com/vid_info/no_avatar.jpg" alt="no" />endif?> </a> $USERNAME$ </div> <div class="comment_n"> <img src="http://ucoz-helper.ucoz.com/vid_info/ico_coment.png" alt="иконка комментария"> $COM_POSTS$ </div> </div> и незабываем про css стили, где я использовал закруглённые углы основной ячейки, добавил прозрачности изображению при наведении на него стрелкой мыши. 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); } Данную дизайнерскую мелочь можно использовать в качестве комментарий на форуме или поместить в анкету пользователя и добавить нужные функции или как многие блогеры любят делать, использовать данную ячейку в качестве основной информации об администраторе, кто, что сколько, как говориться.
1 2 3 4 5 Категория: Вид информеров \| Добавил: tashkent97
Просмотров: 401 \| Загрузок: 284 \| Источник: www.center-dm.ru \| Рейтинг: 5.0/1

Всего комментариев: 0