Красивый вид и форма добавления комментариев
4228 просмотров || Скачали 0 раз || Оставили 0 комментариев


Красивый вид и форма добавления комментариев

Установка:

Заходим в ПУ → Управление дизайном → Вид комментариев → Заменяем все на:

Code
<table style="margin: auto" width="100%">
  <tr>
  <td width="70" valign="top">
  <div class="avacoment">
  <?if($USER_AVATAR_URL$)?><a href="$PROFILE_URL$"><img alt="" width="45" src="$USER_AVATAR_URL$" /></a><?else?><img alt="" width="45" src="http://photo.usite.su/_ph/1/2/567110054.gif" /><?endif?>
  <br>
  <?if($ANSWER_URL$)?><a href="$ANSWER_URL$"><input type="submit" value="ответить"></a><?endif?>
  </div></td>
  <td valign="top">
  <div class="cell_coment">
  <div class="coment_info">
  <span class="tip"></span>
  <div class="coment_os">
  <div class="data">$DATE$ $TIME$ $WDAY$ | №$NUMBER$ <?if($MODER_PANEL$)?>$MODER_PANEL$<?endif?>< /div>  
  <div class="comlink"><?if($USERNAME$)?><a href="$PROFILE_URL$">$USERNAME$</a><?else?>Гость<?endif?></div>
  $MESSAGE$  
  </div>
  </div>
  </div></td>
  </tr>
</table>


Далее идем в форму добавления комментариев и заменяем все на:

Code
<style>
  .securityCode {
  border:0px;
  border-right:1px solid #ccc;
  }
</style>
   
<div style="padding:10px;border-radius: 2px;background: #000;color:#fff;margin-bottom:5px;"><b>Добавить комментарий</b></div>
   
<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr><td class="commTd2" colspan="2">$ERROR$</td></tr>
  <?if(!$USER_LOGGED_IN$)?>
  <tr><td width="240" class="commTd1" nowrap><input style="width:235px;border:1px solid #dcdcdc;border-radius: 4px;padding:8px;" type="text" name="name" placeholder="Имя" value="$NAME$"></td>
  <td class="commTd1" align="left"><input style="width:235px;border:1px solid #dcdcdc;border-radius: 2px;padding:8px;" type="text" name="email" placeholder="Email" value="$EMAIL$"></td>
   
  </tr>
  <?endif?>
  <tr><td class="commTd2" colspan="2"><table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td valign="top"><textarea class="commFl" style="height:80px;border:1px solid #dcdcdc;border-radius: 4px;padding:8px;margin-top:5px;margin-bottom:5px;" rows="8" name="message" id="message" cols="50">$MESSAGE$</textarea></td></tr></table></td></tr>
  <tr><?if($SECURITY_CODE$)?><td style="width: 250px !important;" align="right" class="commTd20">$SECURITY_CODE$</td><?endif?><td align="right"><input sty type="submit" class="commSbmFl" id="addcBut" name="submit" style="border:1px solid #000;border-radius: 2px;padding:8px;margin-left:5px;" value="Отправить"></td></tr>
</table>


И в css ставим (в самый низ):

Code
.cell_coment {
  position: relative;
}
.coment_info {
  position: relative;
  text-align: justify;
  color: #555;
  background: #fff;
  border: 1px solid #dddddd;
  padding: 10px;
  margin-bottom: 5px;
  border-radius: 4px;
}
.coment_os {
  overflow: hidden;
}
.tip {
  position: absolute;
  top: 10px;
  left: -7px;
  height: 13px;
  width: 9px;
  background: url("http://photo.usite.su/_ph/1/2/220972501.png") no-repeat top left;
}
.avacoment {
   
}
.avacoment img {
  padding: 5px;
  border: 1px solid #dddddd;
  border-radius: 4px;
}
.avacoment input {
  width: 57px;
  border-radius: 2px;
  border:1px solid #e1e1e1;
  margin-top:5px;
  color:#b5b5b5;
}
.comlink {
  font: 700 12px "Arial";
  color: #f23030 !important;
  margin-bottom: 5px;
}
.comlink a {
  font: 700 12px "Arial";
  color: #f23030 !important;
  text-decoration: none !important;
}
   
.comlink a:hover {
  text-decoration: underline !important;
}
   
.commTd20 {
  border-radius: 2px;
  border:1px solid #ccc;
  background: #fff;
}
   
.data {
  float: right;
  color:#3c3c3c;
  font: 700 10px "Arial";
}
.linkotvet {
  margin-top:3px;
}
   
.linkotvet a {
  border-radius: 2px;
  border:1px solid #ccc;
  font: 400 11x "Arial";
  color: #ccc;
  text-decoration: none !important;  
  padding:1px;
}


Все=)

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



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

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Теги
PSD макет блога Красивая страница ошибки 404 Новый вид репутации + сортировка Изменение кнопок "Редактировать" и "Удалить" на форуме Быстрое редактирование материалов в каталоге файлов Рип вида материалов ucozabc.ru Удобная форма добавления комментариев Карта "Сталкер Зов Припяти" v1.0 Выдвижная верхняя панель с красивым эффектом Шаблон Counter Strike PSD Макет Skylight Красивый вид code + подсветка синтаксиса Переключатели страниц как на uCozABC Изменение вида категорий при добавления файла Рип аякс окон Автоматическое распределение списка пользователей по группам Подборка Flash часов №2 Набор кистей "Курсоры" Скрипт "Преобразовать BB-код" Flash шаблон Frog Design Подборка Flash часов №1 Проверка на правильность ввода каптчи Модификация "Тем", "Ответов" и "Автора темы" Дополнительные BB-коды для каталога файлов Новый вид истории ЛС Подробная информация об авторе материала Игра "Шарик" в Ajax Красивый вид опросов для uCoz Удобное добавление фотографии в фотоальбом Новый вид истории репутации пользователя Новый вид отображения категорий Clip2net Упрощенный вид uNet-регистрации Персональная страница пользователя в стиле Stalker Предпросмотр добавляемого материала в Ajax окне для любого модуля Добавление сообщения на форум без перезагрузки страницы Генератор смайлов! Автоматическое исправление глючного кода Замена админ-бара на свой / WoS-Bar "Drag and drop" элементов сайта Самостоятельный переход пользователей в другую группу Анимированное появление блоков на jQuery и CSS3 Новая модер-панель для каталога файлов Вид соотношения гостей и пользователей Большой сборник иконок социальных сетей с psd Новая версия скрипта "Арена" от Яндекс'а Скрипт изменения название модуля Набор красивых Flash иконок Универсальный анти-мат на весь сайт Набор слайдеров для uCoz