Необычный вид комментариев
825 просмотров || Скачали 226 раз || Оставили 0 комментариев


Скачать. Размер файла: 7.7 Kb

Хороший вид комментариев, который подойдет почти под любой дизайн. Все довольно оригинально выглядит, нет ничего лишнего, да и весит всего ничего. Чтоб цветовую гамму настроить под себя, достаточно лишь поменять цвета в css. И так, приступим к установке.

Установка такая же простая. Заходим в ПУ → Управление дизайном → Комментарии → Вид комментариев → Заменяем все на это:
Код
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="$CLASS$"><tr><td style="padding:3px;">
  <div class="comment"><div class="comment-author vcard">
  <div class="avatar"><?if($USER_AVATAR_URL$)?><img alt="" align="left" src="$USER_AVATAR_URL$" width="60" border="0" /><?else?><img src="http://wos.ucoz.com/Scripts/noavatar.jpg" width="60" border="0"><?endif?></div>
  <cite class="fn"><?if($USERNAME$)?><a href="$PROFILE_URL$"><b>$USERNAME$</b></a><?else?><b>$NAME$</b><?endif?></cite>
  </div>
  <div class="comment-meta commentmetadata">$DATE$ $TIME$</div>  
  <div style="float:right;font-size:11px;font-family:Arial,sans-serif;"><?if($COMMENT_RATING$<0)?><span class="myWinError"><b>$COMMENT_RATING$</b></span><?else?><?if($COMMENT_RATING$=0)?><span style="color:gray;"><b>$COMMENT_RATING$</b></span><?else?><span class="myWinSuccess"><b>+$COMMENT_RATING$</b></span><?endif?><?endif?> <?if($GOOD_COMMENT_URL$)?><a href="$GOOD_COMMENT_URL$"><img alt="" src="http://s16.ucoz.net/img/icon/thumbu.png" width="13" align="absmiddle" border="0" title="Хороший пост"></a> <a href="$BAD_COMMENT_URL$"><img alt="" src="http://s16.ucoz.net/img/icon/thumbd.png" width="13" border="0" align="absmiddle" title="Плохой пост"></a><?else?><img alt="" src="http://s16.ucoz.net/img/icon/thumbu_.png" align="absmiddle" width="13" border="0" title="Хороший пост"> <img alt="" src="http://s16.ucoz.net/img/icon/thumbd_.png" width="13" align="absmiddle" border="0" title="Плохой пост"><?endif?> $MODER_PANEL$</div><div class="cTop" style="text-align:left;"><?if($IS_OWN$)?><span class="myWinError">*</span> <?else?><?if($IS_NEW$)?><span class="myWinSuccess">*</span> <?endif?><?endif?><a href="#ent$ID$" onclick="if (document.getElementById('comEnt$ID$')){$('body').scrollTo( { top:$('#comEnt$ID$').offset().top-22, left:0}, 500 );return false;}" name="ent$ID$"><b>$NUMBER$</b></a> <script src="http://wos.ucoz.com/Scripts/table.js" type="text/javascript"></script>
  </div>
  <div class="cMessage" style="text-align:left;clear:both;padding:2px 0;">$MESSAGE$</div>
<?if($ANSWER$)?><div class="cAnswer" style="text-align:left;clear:both;"><b>Ответ</b>: $ANSWER$</div><?endif?>
  <?if($ANSWER_URL$)?><div style="clear:both;padding:4px 0;font-size:7pt;">[<a href="$ANSWER_URL$">Ответить</a>]</div><?endif?> </div>  
</td></tr></table>

Затем идем в Таблицу стилей (css) и в самый низ ставим:
Код
.comment { float: right; clear: both; position: relative; width: 70%; padding: 15px; background: white; margin: 0 0 20px 0; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;}
.cBlock1 .comment{background:#ddeb84;}
.cBlock2 .comment{background:#F1F2F3;}
.comment-author { position: absolute; left: -210px; top: 0; }
.comment-author cite { display: block; margin-top: 0px; font-family: HelveticaNeue, Helvetica, Arial, Sans-Serif; font-style: normal; color: black;text-align:center;}
.comment-author cite a { color: black; border-bottom: 1px solid transparent; }
.cBlock1 .comment-author .avatar { width: 60px; height: 60px; -moz-border-radius: 38px; position: relative; -webkit-border-radius: 38px; border-radius: 38px; border: 8px solid #ddeb84; }
.cBlock1 .comment-author .avatar:after { content: ""; display: block; position: absolute; width: 142px; height: 8px; background: #ddeb84; left: 60px; top: 30px; }
.cBlock2 .comment-author .avatar { width: 60px; height: 60px; -moz-border-radius: 38px; position: relative; -webkit-border-radius: 38px; border-radius: 38px; border: 8px solid #F1F2F3; }
.cBlock2 .comment-author .avatar:after { content: ""; display: block; position: absolute; width: 142px; height: 8px; background: #F1F2F3; left: 60px; top: 30px; }
.comment-author .avatar img{ width: 60px; height: 60px; -moz-border-radius: 38px; position: relative; -webkit-border-radius: 38px; border-radius: 38px; }
  .comment .comment-meta { position: absolute; left: -210px; top: 95px; font-family: HelveticaNeue, Helvetica, Arial, Sans-Serif; text-transform: uppercase;font-size:9px; }  
  .fn {font-size:13px;}


На этом все. Картинку noavatar и js-файлик прикрепил в архиве. Если не лень, то залейте эти 2 файла себе в файловый менеджер и замените ссылки smile

Автор: Неизвестен
Сайт автора: Неизвестен



Категория: Другие | Добавил: Endless | Теги: комментариев, Необычный, для ucoz, другие, вид, юкоз
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Вход на сайт
Поиск по сайту
Случайная статья
Случайный материал
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Теги
Шаблон Awurs для сайтов World of Tanks Рип вида материалов ucozabc.ru Красивый вид замечаний со шкалой Шаблон "daintiness" для сайтов uCoz Модификация "Тем", "Ответов" и "Автора темы" Эффект реалистичных дождевых капель на стекле через HTML5 Набор кистей "Курсоры" Рип игрового шаблона Acc-Team Скрипт "Преобразовать BB-код" Добавление сообщения на форум без перезагрузки страницы Шаблон Counter Strike Подборка Flash часов №2 PSD Макет Skylight Автоматическое распределение списка пользователей по группам Статусы в списке пользователей Самостоятельный переход пользователей в другую группу Универсальный анти-мат на весь сайт Набор слайдеров для uCoz Игра "Тетрис" на jQuery Большой сборник иконок социальных сетей с psd Модуль Спасибо для uCoz Вывод полного имени файла Снаряжение для профиля в стиле сталкер Новый вид истории ЛС Быстрое редактирование материалов в каталоге файлов Новый вид истории репутации пользователя Способы скрыть админ-бар Персональный дневник сталкера Красивый флеш шаблон для uCoz Шаблон DoubleGame для uCoz Красивый слайдер с 3d эффектами на jQuery Анимированное появление блоков на jQuery и CSS3 Уникальный скрипт "Выстрел" Карта "Сталкер Зов Припяти" v1.0 Подробная информация об авторе материала Редактирование титула в uWnd-окне Красивый вид опросов Улучшаем навигацию в личных сообщениях Персональная страница пользователя в стиле Stalker PSD макет блога Автоматическая подгрузка материалов Скрипт изменения название модуля Красивый вид и форма добавления комментариев Расширенная онлайн статистика для ucoz без php Предпросмотр добавляемого материала в Ajax окне для любого модуля Красивая страница ошибки 404 Светлый шаблон zaucoz Красивый вид рейтинга материалов Замена админ-бара на свой / WoS-Bar Игра "Угадай число"