Необычный вид комментариев
830 просмотров || Скачали 230 раз || Оставили 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
Теги
Модификация "Тем", "Ответов" и "Автора темы" Замена админ-бара на свой / WoS-Bar Рип шаблона Urip.Ru Раздвижной полноэкранный 3D-слайдер с помощью jQuery и CSS3 Новый вид истории ЛС "Drag and drop" элементов сайта Эффект реалистичных дождевых капель на стекле через HTML5 Персональная страница пользователя в стиле Stalker Новая версия скрипта "Арена" от Яндекс'а Генератор смайлов! Рип игрового шаблона Acc-Team Запрет на определенные слова в названии темы Улучшаем навигацию в личных сообщениях Рип шаблона sstalkers.ru + бонус Новая модер-панель для каталога файлов Игровой шаблон Crea-Game Green для ucoz Очень красивый шаблон Ability Модуль Спасибо для uCoz Вид соотношения гостей и пользователей Набор кистей "Курсоры" Красивый флеш шаблон для uCoz Любое количество дополнительных полей для Каталога Файлов Флэш шаблон Travel Club Красивый вид опросов Psshablon Красивые Flash иконки социальных сетей Красивый вид code + подсветка синтаксиса Подробная информация об авторе материала Удобное добавление фотографии в фотоальбом Быстрая смена аватара в uWnd окне Автоматическая подгрузка материалов Скрипт изменения название модуля Редактирование титула в uWnd-окне Музыкальный шаблон для uCoz Шаблон Мегатрон 2.0 Быстрое редактирование материалов в каталоге файлов Рип аякс окон Скрипт Генератора пароля при регистрации Игра "Шарик" в Ajax Красивый вид замечаний со шкалой Новый вид отображения категорий Изменение кнопок "Редактировать" и "Удалить" на форуме PSD макет блога Блочный вид форума Красивый вид рейтинга материалов Игра Doodle Jump у вас на сайте! Большой сборник иконок социальных сетей с psd Шаблон Awurs для сайтов World of Tanks Автоматическое заполнение тегов для всего сайта Карта "Сталкер Зов Припяти" v1.0