О нас Форум Баннеры RSS картинка Нас уже 577, Присоединяйся
Пожаловаться

Красивый и одновременно простой вид комментариев. Убедитесь вы этому после того как установите его себе на сайт, так что дерзайте.

Переходим к установке:

И так для начало нам следует удалить старый html код вида комментарий, для этого идём в Админ панель => Дизайн => Управление дизайном => Комментарии => Вид комментариев и устанавливаем следующий код:
Code
<div class="cell_comment_os">
<div class="comment_p ">
<?if($USER_AVATAR_URL$)?>
<a href="$PROFILE_URL$">
<img class="comment_avatar" src="$USER_AVATAR_URL$" />
<?else?>
<img src="http:/images/noavatar.png" class="comment_avatar" alt="аватар отсутствует" />
<?endif?></a>
</div>

  <div class="comment_v grey">
  <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$"><strong>$NUMBER$</strong></a> |
  <strong class="gren"><?if($USERNAME$)?>$USERNAME$ <?else?>$NAME$<?endif?></strong> пишет: | $DATE$ | $TIME$ <?if($MODER_PANEL$ && $EMAIL$)?><a href="$EMAIL_JS$" title="Email"> ( E-mail )</a><?endif?>
  <span class="right">$MODER_PANEL$</span>
  <?if($ENTRY_URL$)?><a class="right" href="$ENTRY_URL$" target="_blank" title="Перейти на страницу материала">Страница с комментарием </a>|<?endif?>
  </div>

  <div class="comment_c text_11">
  $MESSAGE$
  <?if($ANSWER$)?><p class="vcc_otvet"><strong>Ответ</strong>: $ANSWER$<p><?endif?>
  </div>

  <div class="comment_n grey text_9">
  <?if($ANSWER_URL$)?><a href="$ANSWER_URL$">Ответить</a> |<?endif?>

<?if($GOOD_COMMENT_URL$)?>
<a href="$GOOD_COMMENT_URL$"><img src="http:/images/rat/plus_01.gif" alt="+" title="Хороший пост"/></a>
<span class="post_r">($COMMENT_RATING$)</span>
<a href="$BAD_COMMENT_URL$"><img src="http:/images/rat/minuc_01.gif" alt="-" title="Плохой пост"/></a><?else?>
<?if($COMMENT_RATING$=0)?>
<img src="http:/images/rat/plus_02.png" alt="+" title="Хороший пост"/>
<span class="post_r">($COMMENT_RATING$)</span>
<img src="http:/images/rat/minuc_02.png" alt="-" title="Плохой пост"/>
<?else?>
<?if($COMMENT_RATING$<0)?>
<img src="http:/images/rat/plus_02.png" alt="+" title="Хороший пост"/>
<span class="red">($COMMENT_RATING$)</span>
<img src="http:/images/rat/minuc_02.png" alt="-" title="Плохой пост"/>
<?else?>
<img src="http:/images/rat/plus_02.png" alt="+" title="Хороший пост"/>
<span class="gren">(+$COMMENT_RATING$)</span>
<img src="http:/images/rat/minuc_02.png" alt="-" title="Плохой пост"/>
<?endif?>
<?endif?>
<?endif?>

  </div>
  </div><div class="cell_comment_os">
<div class="comment_p ">
<?if($USERNAME$)?><a href="$PROFILE_URL$"><?if($USER_AVATAR_URL$)?> <img class="comment_avatar" src="$USER_AVATAR_URL$" /><?else?><img src="http:/images/noavatar.png" class="comment_avatar" alt="аватар отсутствует" /><?endif?></a><?else?><img src="http:/images/noavatar.png" class="comment_avatar" alt="аватар отсутствует" /><?endif?>
</div>

  <div class="comment_v grey">
  <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$"><strong>$NUMBER$</strong></a> |
  <strong class="gren"><?if($USERNAME$)?>$USERNAME$ <?else?>$NAME$<?endif?></strong> пишет: | $DATE$ | $TIME$ <?if($MODER_PANEL$ && $EMAIL$)?><a href="$EMAIL_JS$" title="Email"> ( E-mail )</a><?endif?>
  <span class="right">$MODER_PANEL$</span>
  <?if($ENTRY_URL$)?><a class="right" href="$ENTRY_URL$" target="_blank" title="Перейти на страницу материала">Страница с комментарием </a>|<?endif?>
  </div>

  <div class="comment_c text_11">
  $MESSAGE$
  <?if($ANSWER$)?><p class="vcc_otvet"><strong>Ответ</strong>: $ANSWER$<p><?endif?>
  </div>

  <div class="comment_n grey text_9">
  <?if($ANSWER_URL$)?><a href="$ANSWER_URL$">Ответить</a> |<?endif?>

<?if($GOOD_COMMENT_URL$)?>
<a href="$GOOD_COMMENT_URL$"><img src="http:/images/rat/plus_01.gif" alt="+" title="Хороший пост"/></a>
<span class="post_r">($COMMENT_RATING$)</span>
<a href="$BAD_COMMENT_URL$"><img src="http:/images/rat/minuc_01.gif" alt="-" title="Плохой пост"/></a><?else?>
<?if($COMMENT_RATING$=0)?>
<img src="http:/images/rat/plus_02.png" alt="+" title="Хороший пост"/>
<span class="post_r">($COMMENT_RATING$)</span>
<img src="http:/images/rat/minuc_02.png" alt="-" title="Плохой пост"/>
<?else?>
<?if($COMMENT_RATING$<0)?>
<img src="http:/images/rat/plus_02.png" alt="+" title="Хороший пост"/>
<span class="red">($COMMENT_RATING$)</span>
<img src="http:/images/rat/minuc_02.png" alt="-" title="Плохой пост"/>
<?else?>
<img src="http:/images/rat/plus_02.png" alt="+" title="Хороший пост"/>
<span class="gren">(+$COMMENT_RATING$)</span>
<img src="http:/images/rat/minuc_02.png" alt="-" title="Плохой пост"/>
<?endif?>
<?endif?>
<?endif?>

  </div>
  </div><div class="cell_comment_os">
<div class="comment_p ">
<?if($USERNAME$)?><a href="$PROFILE_URL$"><?if($USER_AVATAR_URL$)?> <img class="comment_avatar" src="$USER_AVATAR_URL$" /><?else?><img src="http:/images/noavatar.png" class="comment_avatar" alt="аватар отсутствует" /><?endif?></a><?else?><img src="http:/images/noavatar.png" class="comment_avatar" alt="аватар отсутствует" /><?endif?>
</div>

  <div class="comment_v grey">
  <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$"><strong>$NUMBER$</strong></a> |
  <strong class="gren"><?if($USERNAME$)?>$USERNAME$ <?else?>$NAME$<?endif?></strong> пишет: | $DATE$ | $TIME$ <?if($MODER_PANEL$ && $EMAIL$)?><a href="$EMAIL_JS$" title="Email"> ( E-mail )</a><?endif?>
  <span class="right">$MODER_PANEL$</span>
  <?if($ENTRY_URL$)?><a class="right" href="$ENTRY_URL$" target="_blank" title="Перейти на страницу материала">Страница с комментарием </a>|<?endif?>
  </div>

  <div class="comment_c text_11">
  $MESSAGE$
  <?if($ANSWER$)?><p class="vcc_otvet"><strong>Ответ</strong>: $ANSWER$<p><?endif?>
  </div>

  <div class="comment_n grey text_9">
  <?if($ANSWER_URL$)?><a href="$ANSWER_URL$">Ответить</a> |<?endif?>

<?if($GOOD_COMMENT_URL$)?>
<a href="$GOOD_COMMENT_URL$"><img src="http:/images/rat/plus_01.gif" alt="+" title="Хороший пост"/></a>
<span class="post_r">($COMMENT_RATING$)</span>
<a href="$BAD_COMMENT_URL$"><img src="http:/images/rat/minuc_01.gif" alt="-" title="Плохой пост"/></a><?else?>
<?if($COMMENT_RATING$=0)?>
<img src="http:/images/rat/plus_02.png" alt="+" title="Хороший пост"/>
<span class="post_r">($COMMENT_RATING$)</span>
<img src="http:/images/rat/minuc_02.png" alt="-" title="Плохой пост"/>
<?else?>
<?if($COMMENT_RATING$<0)?>
<img src="http:/images/rat/plus_02.png" alt="+" title="Хороший пост"/>
<span class="red">($COMMENT_RATING$)</span>
<img src="http:/images/rat/minuc_02.png" alt="-" title="Плохой пост"/>
<?else?>
<img src="http:/images/rat/plus_02.png" alt="+" title="Хороший пост"/>
<span class="gren">(+$COMMENT_RATING$)</span>
<img src="http:/images/rat/minuc_02.png" alt="-" title="Плохой пост"/>
<?endif?>
<?endif?>
<?endif?>

  </div>
  </div><div class="cell_comment_os">
<div class="comment_p ">
<?if($USERNAME$)?><a href="$PROFILE_URL$"><?if($USER_AVATAR_URL$)?> <img class="comment_avatar" src="$USER_AVATAR_URL$" /><?else?><img src="http:/images/noavatar.png" class="comment_avatar" alt="аватар отсутствует" /><?endif?></a><?else?><img src="http:/images/noavatar.png" class="comment_avatar" alt="аватар отсутствует" /><?endif?>
</div>

  <div class="comment_v grey">
  <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$"><strong>$NUMBER$</strong></a> |
  <strong class="gren"><?if($USERNAME$)?>$USERNAME$ <?else?>$NAME$<?endif?></strong> пишет: | $DATE$ | $TIME$ <?if($MODER_PANEL$ && $EMAIL$)?><a href="$EMAIL_JS$" title="Email"> ( E-mail )</a><?endif?>
  <span class="right">$MODER_PANEL$</span>
  <?if($ENTRY_URL$)?><a class="right" href="$ENTRY_URL$" target="_blank" title="Перейти на страницу материала">Страница с комментарием </a>|<?endif?>
  </div>

  <div class="comment_c text_11">
  $MESSAGE$
  <?if($ANSWER$)?><p class="vcc_otvet"><strong>Ответ</strong>: $ANSWER$<p><?endif?>
  </div>

  <div class="comment_n grey text_9">
  <?if($ANSWER_URL$)?><a href="$ANSWER_URL$">Ответить</a> |<?endif?>

<?if($GOOD_COMMENT_URL$)?>
<a href="$GOOD_COMMENT_URL$"><img src="http:/images/rat/plus_01.gif" alt="+" title="Хороший пост"/></a>
<span class="post_r">($COMMENT_RATING$)</span>
<a href="$BAD_COMMENT_URL$"><img src="http:/images/rat/minuc_01.gif" alt="-" title="Плохой пост"/></a><?else?>
<?if($COMMENT_RATING$=0)?>
<img src="http:/images/rat/plus_02.png" alt="+" title="Хороший пост"/>
<span class="post_r">($COMMENT_RATING$)</span>
<img src="http:/images/rat/minuc_02.png" alt="-" title="Плохой пост"/>
<?else?>
<?if($COMMENT_RATING$<0)?>
<img src="http:/images/rat/plus_02.png" alt="+" title="Хороший пост"/>
<span class="red">($COMMENT_RATING$)</span>
<img src="http:/images/rat/minuc_02.png" alt="-" title="Плохой пост"/>
<?else?>
<img src="http:/images/rat/plus_02.png" alt="+" title="Хороший пост"/>
<span class="gren">(+$COMMENT_RATING$)</span>
<img src="http:/images/rat/minuc_02.png" alt="-" title="Плохой пост"/>
<?endif?>
<?endif?>
<?endif?>

  </div>
  </div>


Теперь давайте пропишем css стили, чтобы улучшить его внешний вид:
Code
/* Вид комментарий v.2.0
  ------------------------------------------*/
  .cell_comment_os {
float:left;
width:100%;
background:#fff;
border:1px solid #CAD1DB;
padding-bottom:3px;
margin-bottom:15px;
  }

  .comment_p {
float:right;
width:80px;
  }

  .comment_v {
margin: 5px 0px 5px 10px;
  }

  .comment_c {
overflow: hidden;
text-align:justify;
margin: 0px 0px 0px 10px;
padding: 5px 0px;
border-top: 1px solid #e7e7e7;
  }

  .comment_n {
text-align:right;
margin: 3px 78px 0px 10px;
  }
  .vcc_otvet {overflow:hidden!important; border: 1px solid #eccece; padding: 10px;background:#fcf6f6; }

  .comment_avatar {
width:40px;
height:40px;
padding: 4px;
margin: 8px 10px 0px 15px;
border: 1px solid #CAD1DB;
background:#F6F6F6;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
  }

  .red {color: #d20000;}
  .gren {color: #429e1e;}
  .grey {color: #999;}
  .text_9 {font: 9px Verdana,Arial,Helvetica, sans-serif;}
  .right {float:right;}


Вот и всё, более улучшенная по внешнему виду и верстке вид комментарий uCoz готов, а комментарии могут выводиться как в простом варианте так и в древовидном.


Спонсор :



Источник: http://center-dm.ru
Всего голосов: ... | ... | ...

Нет комментариев

Информация


Посетители, находящиеся в группе Гость, не могут оставлять комментарии к данной публикации.
Пожалуйста войдите на сайт как пользователь или зарегистрируйтесь.

Логотип сайта:
Навигация
Мини-чат
Витрина Активистов
Опрос
Как вы попали сюда?

Всего ответов: 198
Последние комментарии
  • Fatal1ti
    Оставлен 05.02.2013
    50+ качественных анимированных иконок загрузки для сайта
    Автор комментария: Fatal1ti
    Оставлен 05.02.2013 в 16:19
    Тема: 50+ качественных анимированных иконок загрузки для сайта
    Это просто gif картинки,
    А чтобы при загрузке страницы крутилась анимация, нужен скрипт
  • sasha26
    Оставлен 04.02.2013
    Новый, светлый мини-чат как на Zagruzka-Plus для uCoz
    Автор комментария: sasha26
    Оставлен 04.02.2013 в 12:43
    Тема: Новый, светлый мини-чат как на Zagruzka-Plus для uCoz
    С цветами разобрался, пришлось путь к файлу zvetaf.xml полностью писать.
  • sasha26
    Оставлен 04.02.2013
    Новый, светлый мини-чат как на Zagruzka-Plus для uCoz
    Автор комментария: sasha26
    Оставлен 04.02.2013 в 12:32
    Тема: Новый, светлый мини-чат как на Zagruzka-Plus для uCoz
    Что-то окно с цветами начинает открываться и сразу же пропадает.
    А как можно чат растянуть по высоте с 300рх до 500рх, где это меняется?
  • Mihail
    Оставлен 01.02.2013
    Замена alert на ajax окно с прямой ссылки к сообщению на форуме
    Автор комментария: Mihail
    Оставлен 01.02.2013 в 17:12
    Тема: Замена alert на ajax окно с прямой ссылки к сообщению на форуме
    А вот это супер )
  • Fatal1ti
    Оставлен 31.01.2013
    Форма добавления комментариев как на dle для uCoz
    Автор комментария: Fatal1ti
    Оставлен 31.01.2013 в 18:23
    Тема: Форма добавления комментариев как на dle для uCoz
    Должно работать, у некоторых файл zvetaf.xml
    Повреждается при загрузке, попробуй его перезалить

    Если ничего не изменяется, то ищи в коде такую строчку:
    Код
    <img src="http:/bbcodes/color.gif" id="kmn" title="Выбрать цвет" onclick="openLayerB('sda',0,'/bbcodes/zvetaf.xml','Выбор цвета',190,200,'1','','',0,'justify');return false;">


    И меняй на эту:
    Код
    <script type="text/javascript" src="http:/serv/zvet.js"></script>
    <img src="http:/bbcodes/color.gif" id="kmn" title="Выбрать цвет" onclick="viewzvet()">

    Должно заработать..
  • Fatal1ti
    Оставлен 27.01.2013
    Зелёное меню как на we-place для uCoz
    Автор комментария: Fatal1ti
    Оставлен 27.01.2013 в 15:05
    Тема: Зелёное меню как на we-place для uCoz
    DevilShadow, извини что сразу не ответил
    Чтобы счетчики были справа нужно в css найти такую строчку:
    Код
    .coole div {position: relative;margin-left: 173px;z-index: 1;}

    И заменить на эту
    Код
    .coole div {position: relative;margin-left: 219px;z-index: 1;}


    А чтобы и фото счетчик был, нужно после этой строчки:
    Код
    <script type="text/javascript" src="http://worldinfo.my1.ru//informer/6"></script>

    Добавить эту:
    Код
    <script type="text/javascript" src="http://worldinfo.my1.ru//informer/7"></script>


    И после скрипта, который находится снизу после меню, добавь ещё скрипт:
    Код
    <script type="text/javascript">  
      function setCatNumEnt(){  
      if(!window.uCatsOut)return;  
      $('div.naviglot a').each(function(){  
      var a=this,ah=a.href,cArr=window.uCatsOut;  
      if(!/\/photo\//.test(ah))return;  
      var t=ah.split('/'),id=t[t.length-1]||t[t.length-2],a=$(a).parent();  
      if(!isNaN(id)){  
      $.each(cArr,function(j){  
      if(cArr[j][0]==id){  
      a.prepend('</span><div class="coole"><div><span class="vnav-subnav2">'+cArr[j][6]+'</span></div></div>');  
      }  
      });  
      };  
      });  
      };setCatNumEnt();
      </script>
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Сегодня зашли на сайт
0 пользователя

Новых пользователей:
За месяц: 17
За неделю: 6
Вчера: 0
Сегодня: 0
У нас нашли
Загрузка...
Друзья сайта
Наш Баннер
Всё для новичков
Всё для новичков