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