» »

Вид комментариев плюс форма добавление uCoz


Вид комментариев плюс форма добавление uCoz

Здесь безусловно можно сказать, что вид комментариев и форма добавление идут уникальными по дизайну. Созданы они на чистом CSS и подойдут на любую тему сайта. Также можно заметить что идет Ava с ними, что отлично в писалось в дизайн. Если говорить о самих комментариях, то там еще идет красивый рейтинг, где можно ха хороший пост получить оценку.

Вид комментариев

Форму добавление пришлось немного изменить, а точнее она шла с углами, что нужно было сделать под одни стили и теперь уже нет их. Но все зависит от вам, нужны вам они, если да, то спокойно можно выставить обратно. Здесь все очень понятно и весь дизайн на стилях, а это означает, что как нужно вам так и будет. Вот к примеру поменял оттенок цвета у него. И про что хочу сказать, что вы сами здесь и подгоните вашу гамму под ваш портал.

Форма добавление комментарий

Теперь преступаем к установке.

Вид материала комментарий:

Код
<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://zornet.ru/Ajaxoskrip/Forma_skriptov/zZdU4oy.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://zornet.ru/Ajaxoskrip/Forma_skriptov/zZdU4oy.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>


Форма добавление:

Код
<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="http://zornet.ru/Ajaxoskrip/Forma_skriptov/zZdU4oy.jpg" 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>


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: 1px;
  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;  
  border-radius: 3px 0px 3px 3px;  
}  
li.ucf-bb {  
  background: #008080;  
  padding: 4px;  
border-radius: 0px 3px 0px 0px;  
}  
textarea#message {  
  margin: -5px 0px 0px 5px !important;  
  display: inline-block; color: #fff !important;  
  background: #369C93 !important;  
  border: none !important;  
  border-radius: 5px !important;  
}  
td.ucf-smiles {  
  padding: 5px !important;  
  background: #008080;  
  margin: -10px -46px 0px 11px;  
  display: inline-block;  
  width: 87px;  
  border-radius: 0px 5px 5px 5px;  
}  
li#cls {  
  display: inline-block;  
  margin: -10px 0px 0px 5px !important;  
  background: #369C93;  
  padding: 5px;  
  border-radius: 3px 3px 3px 3px;  
}  
.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);  
}


Источник: http://ucodes.ru/
09.01.2016 Просмотров: 525 Комментарий: (26)

Поделиться в социальных сетях

Материал разместил

Комментарий: 24
csretven
csretven 09.01.2016 22:011
0
В первые вижу, сам вид комментариев, чтоб сообветствовал и форме добавление. И здесь думаю нужно отключать визуальный редактор, то не будет работать.
Kvint
Kvint 09.01.2016 22:042
0
Но что то не очень он, но соглашусь, что под определенную тему и сам дизайн он будет актуален.
Kosten
Kosten 09.01.2016 22:428
0
Но а кто сказал, что само совершенство, но согласен, что он уникален по своему дизайну.
nikolla76
nikolla76 09.01.2016 22:4813
0
Но у каждого есть всегда свои не достатки, а заключаются они в том, что одним нравится а другие имеют другую точку зрение.
FeStemBer
FeStemBer 09.01.2016 23:0521
0
Но уникален, это слишком высоко звучит, а что оригинален,это точно.
Kosten
Kosten 09.01.2016 23:1123
0
Но каждый сам видит, такой как повторюсь в первые вижу, если говорить а про саму форму, но комментарий как не делай, они всегда будут похоже немного друг на друга.
Kosten
Kosten 09.01.2016 22:417
0
Спасибо что подсказали, просто забыл написать, что на визуальные комментарий не нужно ставить, а их отключить.
Сопрано
Сопрано 09.01.2016 22:073
0
Мне вот нравится и если подойдет по дизайну поставлю. Просто у меня видать один такой буден, но не приходилось встречать. Не очень только сильно форма добавление нравится, но есть же вид комментариев и это отлично.
Kosten
Kosten 09.01.2016 22:439
0
Можно просто вид комментария поставить и не нужно что то со стилями делать, а ставить их все.
Scheme
Scheme 09.01.2016 22:134
0
Сам вид простой, но надо же так все сделать под форму добавление, и что то мне подсказывает, что на темном фоне будет намного лучше смотреться.
Kosten
Kosten 09.01.2016 22:4310
0
Но не сказал бы что так простой, вид материала, возможно. Но сама форма, где вы видели еще такую.
FeStemBer
FeStemBer 09.01.2016 23:0522
0
Но такой точно не видел, а вот сами комментарий можно найти, но не такие, но похожее.
nikolla76
nikolla76 09.01.2016 22:4914
0
Но так почитаешь, все у вас просто, не думаю, кто его создавал так с вами согласится.
Kvint
Kvint 09.01.2016 22:195
0
Но с формой может немного перемудрили, здесь согласен, но не чего, зато она такая одна.
Kosten
Kosten 09.01.2016 23:0320
0
Вот как раз, все как нужно сделано и не чего лишнего нет.
Brung
Brung 09.01.2016 22:276
0
Что соглашусь, на темном от стоит намного красивей, так как поставил сейчас на светлый и не такой вид, который ожидал.
FeStemBer
FeStemBer 09.01.2016 22:5717
0
Но что, под светлый можно сделать, не думаю, что его темно синим сделать и поставить, должно нормально быть. Тут главное чтоб сам сайт был под такую гамму цвета.
Kosten
Kosten 09.01.2016 23:1324
0
Тут еще и кнопку и ней даже обвод сделали, что очень редко можно видеть, она основном всегда идет одна и без всякого вмешательства.
Kosten
Kosten 09.01.2016 22:4511
0
И все работает, рейтинг проверял, если ставишь, то он по своей форме меняется и становится немного больше.
Kosten
Kosten 09.01.2016 22:4612
0
Так как проверял на тестовом сайте, то скажу, что с ним работать очень просто, стили были почти все, нужно было немного добавить, но чтоб закруглить углы, но не все, так как не чень будет смотреться визуально.
Scheme
Scheme 09.01.2016 22:5015
0
Вот где кнопка редактирование, там нужно немного по другому сделать, то один угол закруглен как заметил,а другой нет.
Kosten
Kosten 09.01.2016 23:0319
0
Да знаю, пытался что то сделать, видать так изначально идет, но можно если кому не нравится убрать и не заморачиваться, если так оно не устраивает.
FeStemBer
FeStemBer 09.01.2016 22:5616
0
Сделали красиво, и стили понятные, тут нужно сказать, что в них нет не одной ссылки, и значит фотошоп над видом и формой не работал. Все сделали, а потом стили написали под скрипт, очень здорово и по уму получилось.
Kosten
Kosten 09.01.2016 23:0118
0
Всегда, что то то новое, кто то сделает, и кажется вот оно, все нормально, но топом столько кто то недостатков найдет, что можно будет смело забраковать. Всегда говорил и говорю, нужно сначало поставить и там виднее будет.
avatar