Необычный вид комментариев
909 просмотров || Скачали 273 раза || Оставили 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
Теги
Любое количество дополнительных полей для Каталога Файлов Карта "Сталкер Зов Припяти" v1.0 Новая версия скрипта "Арена" от Яндекс'а Выдвижная верхняя панель с красивым эффектом Генератор смайлов! Игра "Тетрис" на jQuery Добавление сообщения на форум без перезагрузки страницы Большой сборник иконок социальных сетей с psd Эффект реалистичных дождевых капель на стекле через HTML5 Изменение вида категорий при добавления файла Проверка на правильность ввода каптчи Модуль Спасибо для uCoz Музыкальный шаблон для uCoz Шаблон "daintiness" для сайтов uCoz Модификация "Тем", "Ответов" и "Автора темы" Способы скрыть админ-бар Рип игрового шаблона Acc-Team Раздвижной полноэкранный 3D-слайдер с помощью jQuery и CSS3 Очень красивый шаблон Ability Новый вид комментариев + модер-панель Подборка Flash часов №1 Шаблон Counter Strike Рип аякс окон Красивый вид опросов для uCoz Предпросмотр добавляемого материала в Ajax окне для любого модуля Дополнительные BB-коды для каталога файлов Рип шаблона sstalkers.ru + бонус Персональный дневник сталкера Эмуляция нажатия правой кнопки мыши Оригинал шаблона Info-Rip Clip2net Скрипт "Арена" для сталкер-сайтов Стильный вид материалов PSD макет блога Автоматическое заполнение тегов для всего сайта Статусы в списке пользователей Расширенная онлайн статистика для ucoz без php Красивый вид замечаний со шкалой Красивый вид code + подсветка синтаксиса Psshablon Удобное добавление фотографии в фотоальбом Автоматическое исправление глючного кода Набор кистей "Курсоры" Набор слайдеров для uCoz Шаблон DoubleGame для uCoz Снаряжение для профиля в стиле сталкер Подборка Flash часов №3 Вывод полного имени файла Скрипт "Преобразовать BB-код" Замена админ-бара на свой / WoS-Bar