Приветствуем Вас на сайте!
      Авторизировавшись на сайте Вы получаете возможность заказывать эксклюзивные вещи для Вашего сайта, скачивать новинки, общаться с друзьями.

      Если у Вас ещё нет аккаунта на BEST STUDIO, вы можете создать его потратив не более 10-ти секунд используя форму справа с заголовком "Вход на сайт"
Вход на сайт
Логин:

Пароль:
Вход
Войти по Логину и Паролю
О нас
Cтудия скриптов и дизайна BEST STUDIO, как студия перспективных веб-разработок, была основана 1 июля 2009 г. Уже более 17000 зарегистрированых пользователей! С момента ее создания мы четко придерживаемся принципа: «Быстро, качествено, дорого».

Заказывая работу для вашего сайта у нас, вы экономите время...

Стремитесь к лучшему - в Best Studio!
Войти | Зарегистрироваться
Настройки
Анимация Шапки
Анимация Меню
Анимация Футера
Автообновление Чата
Автообновление Статистики
Звуковые Оповещения
Авто Подгрузка Материалов

Перезагрузите страницу
Новый вид комментариев и Форма Добавления!.
DEMO +
Представляем вашему внимаю новый вид комментариев + форму добавления в одной стилистики!. Данный вид подойдет как для FLAT дизайнов, так и темных шаблонов uCoz

Требования:
1. Не использовать визуальный редактор комментариев.

Установка:
1. В вид комментариев:
Код

<div id="cell_comment">  
<div id="comment_message">  
<?if($USERNAME$)?><a href="$PROFILE_URL$"><img class="comment_avatar" alt="$USERNAME$" src="<?if($USER_AVATAR_URL$)?>$USER_AVATAR_URL$<?else?>http://www.center-dm.ru/img/no_avatar.jpg<?endif?>" /></a><?else?><img src="http://www.center-dm.ru/img/no_avatar.jpg" class="comment_avatar" alt="аватар отсутствует" /><?endif?>  
<div id="cell_dn"><?if($USERNAME$)?>$USERNAME$ <?else?>$NAME$<?endif?> $MODER_PANEL_RIGHT$<div id="clDate">$DATE$ в $TIME$</date></div></div>  
<div id="cell-mess">$MESSAGE$</div>  
<?if($ANSWER$)?><div class="comment_answer_admin"><a href="/index/8-1" ><img class="comment_avatar_admin" alt="админ" src="http://www.center-dm.ru/avatar/1DM.jpg"></a>$ANSWER$</div><?endif?>  
</div>  
<div class="comment_bottom">  
<strong> <?if($COMMENT_RATING$>0)?>Like | +$COMMENT_RATING$ <?endif?> <?if($COMMENT_RATING$=0)?><?if($GOOD_COMMENT_URL$)?><?else?>Like |<?endif?> $COMMENT_RATING$ <?endif?></strong>  
<?if($GOOD_COMMENT_URL$)?><a class="comment_like" href="$GOOD_COMMENT_URL$">Like</a><?endif?>  
</div></div>


2. В Форму добавления комментариев:
Код

<div class="uForm uComForm"><?if($USER_LOGGED_IN$)?>$ERROR$
<?if($UNSUBSCRIBE_URL$)?>
  <div style="text-align: right; padding: 5px 0;">
  <a target="_blank" href="$UNSUBSCRIBE_URL$">Отписаться от уведомлений</a>
  </div>
<?endif?>
<div class="uComForm-inner"><span class="ucf-avatar uf-with-tooltip">
  <?if($USER_AVATAR_URL$)?><img src="$USER_AVATAR_URL$" alt="avatar" /><?else?><img src="/.s/img/icon/social/noavatar.png" alt="avatar" /><?endif?>
  <span class="uf-tooltip"><?if($PROFILE_URL$)?><a class="uf-tt-item" href="$PROFILE_URL$" target="_blank">Профиль</a><?else?><a class="uf-tt-item" href="#" target="_blank">Профиль</a><?endif?>
  <span class="uf-tt-hr"></span>
  <a class="uf-tt-item uf-tt-exit" href="#!">Выйти</a>
  </span>
  </span>
  <div class="ucf-content">
  <?if($USER_CAN_POST$)?>
  <ul class="uf-form ucf-form"><?if($BBCODES$)?><li class="ucf-bb">$BBCODES$</li><?endif?><li>
  <table class="ucf-table">
  <tr>
  <td class="ucf-message-wrap"><textarea class="uf-txt-input commFl" style="height:135px;" rows="8" name="message" id="message" cols="50">$MESSAGE$</textarea></td>
  <?if($SMILES$)?>
  <td class="ucf-smiles">$SMILES$</td>
  <?endif?>
  </tr>
  </table>
  </li>
  <li class="ucf-options">
  <span class="uf-with-tooltip ucf-option"><label class="ucf-option-label ucf-option-share"><input class="uf-checkbox js-ucf-option" type="checkbox" name="share" /></label><span class="uf-tooltip">Публиковать в социальной сети</span></span>
<?if($ANONYMOUS_ALLOWED$)?><span class="uf-with-tooltip ucf-option"><label class="ucf-option-label ucf-option-anonymous"><input class="uf-checkbox js-ucf-option" type="checkbox" name="anonymous" /></label><span class="uf-tooltip">Анонимно</span></span><?endif?>
  <?if($SUBSCRIBE$)?><span class="uf-with-tooltip ucf-option"><label class="ucf-option-label ucf-option-subscribe"><input class="uf-checkbox js-ucf-option" type="checkbox" name="subscribe" <?if($SUBSCRIBE_BY_DEFAULT$)?>checked<?endif?>/></label><span class="uf-tooltip">Подписаться на комментарии к материалу</span></span><?endif?>
  <?if($MODULE_ID$=='shop')?><span class="uf-with-tooltip ucf-option"><label class="ucf-option-label ucf-option-additional" onclick="if($(this).hasClass('ucf-option-checked')){$(this).removeClass('ucf-option-checked');$('#ucf-details').hide();}else{$(this).addClass('ucf-option-checked');$('#ucf-details').fadeIn();}"><input class="uf-checkbox" type="checkbox"></label><span class="uf-tooltip">Дополнительные поля</span></span><?endif?>
  </li>
  <li>
  <input <?if($EMAIL$)?> style="display:none" <?endif?> class="uf-txt-input commFl" type="text" name="email" value="$EMAIL$" size="30" maxlength="60" placeholder="your@email.com">
  </li>
  <?if($MODULE_ID$=='shop')?><li id="ucf-details" class="uf-hidden"><ul class="uf-form ucf-form">
  <li><textarea class="uf-txt-input prosFl" rows="3" name="pros" id="pros" placeholder="Плюсы"></textarea></li>
  <li><textarea class="uf-txt-input consFl" rows="3" name="cons" id="cons" placeholder="Минусы"></textarea></li>
  </ul>
  </li>
  <?endif?>
  <li id="cls"><input class="commSbmFl uf-btn" id="addcBut" type="submit" name="submit" value="Отправить" /></li>
  </ul>
  <?else?>
  <div class="myWinError" style="text-align: center; height: 50px; line-height: 50px;">Вы относитесь к группе пользователей, которым запрещено совершать данное действие.</div>
  <?endif?>
  </div>
  </div><?else?>
  <div class="uauth-small-links uauth-links-set$IMAGE_SET$">Войдите: $SOCIAL_BTNS$</div><div class="uComForm-inner"><span class="ucf-avatar"><img src="/.s/img/icon/social/noavatar.png" alt="avatar" /></span>
  <div class="ucf-content ucf-start-content"><ul class="uf-form ucf-form"><li><textarea class="uf-txt-input commFl js-start-txt" placeholder="Оставьте ваш комментарий..."></textarea>
  </li><li><button class="uf-btn" onclick="preSaveMessage();window.open('/index/800?ref='+window.location.href,'SocialLoginWnd','width=500,height=410,resizable=yes,titlebar=yes');">Отправить</button>
  </li></ul></div>
  </div><?endif?>
</div>


3. В CSS Добавить:
Код

select#fsize, select#fcolor {
  color: #fff !important;
}
div#cell_comment {
  width: 100%;border-bottom: 2px solid #000;
  display: inline-block;
  padding: 5px 0px 5px 5px;
  background: teal;
  margin: 3px 0px 5px -5px;
  border-radius: 3px;
}
.comment_avatar {
  float: left;
  width: 50px;
  height: 50px;
  margin: 0px 0px 0px 0px;
  border: 3px solid #bdd3e0;
  border-radius: 3px;
}
div#cell_dn {
  padding: 5px;
  background: #212C36;
  margin: -5px 0px 5px 4px;
  border-radius: 0px 0px 0px 5px;
  display: inline-block;
  width: 90.0%;
  font-weight: bolder;
}
div#cell-mess {
  padding: 5px 0px 0px 10px;
  display: inline-block;
  font-family: monospace;
  color: aquamarine;
  word-break: break-word;
  width: 560px;
}
div#clDate {
  display: inline-block;
  float: right;
  font-size: 8px;
  margin-top: 6px;
}
.comment_bottom {
  padding: 6px 0px 5px 0px;
  font: 10px Verdana,Arial,Helvetica, sans-serif;
  position: absolute;
  right: 0px;
  margin-top: -3%;
}
.wysibb .wysibb-toolbar {
  background-color: #50575D !important;padding: 0px 60px 0px 4px !important;}
.comm_input {  
  color:#999;  
  padding:5px;  
  width:245px;  
  background: #f9f9f9;  
  border: 1px solid #E0E0E0;  
  margin: 10px 0px 10px 0px;  
}  
.comm_input:focus,  
#forma_comment textarea:focus {  
  box-shadow:inset 0px 1px 3px #c3c3c3!important;  
  -webkit-box-shadow:inset 0px 1px 3px #c3c3c3!important;  
  -moz-box-shadow:inset 0px 1px 3px #c3c3c3!important;  
}  
span.ucf-avatar.uf-with-tooltip {
  padding: 5px;
  background: #008080;
}
li.ucf-bb {
  background: #008080;
  padding: 5px;
}
textarea#message {
  margin: -5px 0px 0px 5px !important;
  display: inline-block; color: #fff !important;
  background: #369C93 !important;
  border: none !important;
  border-radius: 1px !important;
}
td.ucf-smiles {
  padding: 5px !important;
  background: #008080;
  margin: -10px -46px 0px 11px;
  display: inline-block;
  width: 87px;
  border-radius: 0px 0px 0px 5px;
}
li#cls {
  display: inline-block;
  margin: -10px 0px 0px 5px !important;
  background: #369C93;
  padding: 5px;
  border-radius: 0px 0px 5px 4px;
}
.ucf-bb input {
  background: #212C36;
  border: 1px solid #008080;
  color: #fff !important;
  border-radius: 3px;
  padding: 2px 6.2px;
  width: auto !important;
}
.cell_comment {
  float: left;
  width: 102.3%;
  color: #666;
  background: #fff;
  margin: 6px 0px -4px -8px;
  overflow: hidden;
}
.comment_top {  
  float:left; margin-top: 5px;
  width:100%;  
  padding:5px 0px;  
  background:#F4F8F9;  
  border-bottom: 1px solid #E6F0F2;  
}  
.comment_name{  
  margin-left: 20px;  
  color:#34AB63;  
}  
.comment_number {  
  float:right;  
  background:#f5f7f9;  
  margin-right: 20px;  
}  
.comment_top span {  
  font:9px Verdana,Arial,Helvetica, sans-serif;  
  color:#999;  
}  
.comment_mp,  
.comment_page {  
  float:right;  
  margin-right: 20px;  
}  
.comment_message {  
  float:left;  
  font:115%/1.5 Verdana,Arial,Helvetica, sans-serif;  
  text-align:justify;  
color: #212C36;
  background: #fff;
  width: 94.3%;  
  overflow: hidden;  
  padding: 10px 20px 0px 20px;  
}  
.comment_answer:link,  
.comment_answer:visited{  
  float:left;  
  margin: 0px 0px 0px 20px;  
  background:#8cbec9;  
  padding: 2px 7px 2px 7px;  
  text-shadow: 1px 1px 1px #5d97a4;  
  color:#fff;  
}  
.comment_answer:hover {  
  background:#9dd0db;  
}  
.comment_answer:active {  
  box-shadow:inset 0px 0px 3px #5a95a2!important;  
}  
.comment_like:link,  
.comment_like:visited{  
  float:right;  
  background:#8ec98c;  
  padding: 2px 7px 2px 7px;  
  text-shadow: 1px 1px 1px #4aa44c;  
  color:#fff;  
}  
.comment_like:hover {  
  background:#abe6a9;  
}  
.comment_like:active {  
  box-shadow:inset 0px 0px 3px #349932!important;  
}  
.comment_bottom strong {  
  float:right;  
  padding: 2px 10px 2px 10px;  
  background:#dde9d9;  
  margin-right: 20px;  
}  
.comment_answer_admin{  
  float:left;  
  width:94%;  
  margin-top: 10px;  
  padding: 10px 20px 10px 20px;  
  background:#f4ecec;  
  border-radius:3px;  
}  
.comment_avatar_admin{  
  float:right;  
  width:50px;  
  height:50px;  
  margin: 0px 0px 10px 25px;  
  border: 3px solid #dca2a2;  
  border-radius:3px;  
}  
.cell_comment a:hover img {  
  filter: progid: DXImageTransform.Microsoft.Alpha(opacity=85);  
  -moz-opacity: 0.7;  
  opacity: 0.7;  
  filter: alpha(opacity=85);  
}
Данный раздел авторский все работы являются собственностью ucods.3dn.ru любое коммерческое использование строго запрещено.

При копировании материала указываем источник ucods.3dn.ru

Для редактирования кода необходимо иметь хотя бы базовые знания в HTML, CSS и Js технологиях.
Поделиться новостью в социальной сети.
Добавил: Best_Studio
Дата добавления: 02.01.2016 в 17:33 по МСК
Категория: Другие модули
Просмотров: 1243
Комментариев: 0
Эмоций:
  • Оценки читателей

    ЗАКРЫТЬ
    • 0 Лайк
    • 0 Лавки
    • 0 Ахахах!
    • 0 Ого!
    • 0 Восторг
    • 0 Печаль
    • 0 Грусняшь

Теги: Like, forma, vid, Avatar, Q40, comments
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]