Рейтинг: 0.0/0

Метки

вид комментариев для ucoz

Опрос: Чего добавлять больше?

Чего добавлять больше?
Всего ответов: 192

Главная » 2011 » Октябрь » 26 » Новый вид комментариев для модулей системы uCoz

Комментарии будут выглядеть следующим образом:







Установка

1. Открыть Панель управления сайтом, перейти в Управление дизайном, далее в Редактирование шаблонов. Выбрать шаблон "Вид комментариев" и заменить весь имеющийся в нём код на следующий

Code

<div class="jomentry2"><div class="s5_jcommentstl"><div class="s5_jcommentstr"><div class="s5_jcommentstm">  
</div></div></div>
<div class="s5_jcommentsml"><div class="s5_jcommentsmr"> <div class="s5_jcommentsmm">  
<div class="s5avatar_icon">
<div class="jc_avatar"><div class="avatarImg"><?if($USER_AVATAR_URL$)?><a href="$PROFILE_URL$" title="$USERNAME$"><img src="$USER_AVATAR_URL$" height="60" width="60" border="0" alt="$USERNAME$" /></a><?else?><img src="/images/noavatar.png" height="60" width="60" border="0" alt="$USERNAME$" /><?endif?></div></div>
</div>
<div class="s5comment_icon">
<a name="comment-35" id="comment-35"></a>
<h5 class="jc_comment_title"><span class="jc_comment_author"><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$"><b>№ $NUMBER$</b></a> <?if($IS_OWN$)?><span class="myWinError">*</span> <?else?><?if($IS_NEW$)?><span class="myWinSuccess">*</span> <?endif?><?endif?><?if($USERNAME$)?><a href="$PROFILE_URL$"><b>$USERNAME$</b></a><?else?><b>$NAME$</b><?endif?></span> ответил(а): </h5>
<div class="jc_comment_text">$MESSAGE$
<?if($ENTRY_URL$)?><p>[<a href="$ENTRY_URL$" target="_blank" title="Перейти на страницу материала">Материал</a>]</p><?endif?>
</div>
<?if($ANSWER$)?><div class="cAnswer" style="text-align:left;clear:both;"><b>Ответ</b>: $ANSWER$</div><?endif?>
<?if($ANSWER_URL$)?><div style="clear:both;padding:4px 0;font-size:7pt;">[<a href="$ANSWER_URL$">Ответить</a>]</div><?endif?>
<div class="jc_clear"></div><div class="jc_bottom_container"><div class="jc_user_details">
<span class="jc_comment_date">$MODER_PANEL$ $DATE$ $TIME$ </span>
</div>
   
<ul class="jc_comment_panel">
<li class="jc_comment_panel_report">
<a href="javascript:DoIt();" onclick="upostpm.zhaloba('$ID$')" title="Пожаловаться на комментарий">
<img src="/images/blank.gif" alt="Пожаловаться на комментарий" title="Пожаловаться на комментарий" height="14" width="14" border="0" />
</a>
<script type="text/javascript">  
  eName = '$ENTRY_TITLE$'; // название материала  
  eUrl = '$ENTRY_URL$'; // ссылка на материал  
  eAdmin = 'admin'; // логин администратора  
  </script>
</li>
<li class="jc_comment_panel_total">
<?if($COMMENT_RATING$<0)?>
<span class="myWinError"><b>$COMMENT_RATING$</b></span>
<?else?>
<?if($COMMENT_RATING$=0)?>
<span style="color:gray;"><b>$COMMENT_RATING$</b></span>
<?else?>
<span class="myWinSuccess"><b>+$COMMENT_RATING$</b></span>
<?endif?><?endif?>
</li>
<?if($GOOD_COMMENT_URL$)?>
<li class="jc_comment_panel_down">
<a href="$BAD_COMMENT_URL$" title="Плохой комментарий">
<img src="/images/blank.gif" alt="vote down" title="vote down" height="14" width="14" border="0" />
</a>
</li>
<li class="jc_comment_panel_up">
<a href="$GOOD_COMMENT_URL$" title="Хороший комментарий">
<img src="/images/blank.gif" alt="vote up" title="vote up" height="14" width="14" border="0" />
</a>
</li>
<?else?>
<li class="jc_comment_panel_down">
<a href="javascript:DoIt();" title="Плохой комментарий">
<img src="/images/blank.gif" alt="vote down" title="vote down" height="14" width="14" border="0" /></a>
</li>
<li class="jc_comment_panel_up">
<a href="javascript:DoIt();" title="Хороший комментарий">
<img src="/images/blank.gif" alt="vote up" title="vote up" height="14" width="14" border="0" /></a>
</li>
<?endif?>
</ul>
</div></div>
<div class="jc_clear"></div>
</div></div></div><div class="s5_jcommentsbl"><div class="s5_jcommentsbr"><div class="s5_jcommentsbm"></div></div></div>
</div>


Сохраняем изменения.

2. Далее переходим в шаблон "Страница материала и комментариев к нему" того модуля системы, для которого вы хотите подключить комментарии, я буду показывать на примере модуля "Каталог файлов".
Итак, открываем шаблон "Страница материала и комментариев к нему", находим код

Code

$COM_BODY$


и заключаем его в блок div

Code

<div id="jc_commentsDiv" style="display:block; visibility:visible; ">
$COM_BODY$
</div>


В этом же шаблоне в самом низу вставляем скрипт жалобы на комментарий

Code

<script type="text/javascript">var admin = 'PS-Studio';var re = 'Жалоба на Комментарий!';</script><style>#capc{width:125px;height:35px;text-align:center;color:grey;font-size:14pt;float:left}#cap{float:right}</style><script src="/js/447_upost.su.zhalob.js"type="text/javascript"></script>


Сохраняем изменения.

3. В таблицу стилей CSS добавьте следующее

Code

.jomentry2 {
  margin-bottom:5px;
  overflow:hidden;
  width: 616px;
  padding-bottom:17px;
  border:1px #ddd solid;  
   border-radius: 5px 5px 5px 5px / 5px 5px 5px 5px;  
  border-radius: 5px;  
  border-radius: 5px 5px / 5px; box-shadow: 5px 5px 2px #ececec;
   }

.jomentry2 .jc_comment_title {
  font-size: 1.1em;
  font-weight: 700;
  margin: 0 0 5px 0;
  padding: 3px 0 3px 0;
  color: #333333;
}

.jomentry2 .jc_avatar {
  float: right;
  padding: 2px;
  border: solid 1px #cccccc;
  margin: 0 0 3px 3px;
}

.jomentry2 .jc_comment_text {
  font-size: 12px;
  margin-bottom: 5px;
  padding-bottom: 5px;
}

.jomentry2 .jc_user_details {
  color: #999;
  font-size: 0.8em;
  width: 60%;
  float: left;
}

#jc_commentsDiv .jomentry2 .jc_comment_panel .jc_comment_panel_up a:link,
#jc_commentsDiv .jomentry2 .jc_comment_panel .jc_comment_panel_up a:visited {
  width: 21px;
  height: 20px;
  display: block;
  cursor: pointer;
  background: transparent url(/images/votings.gif) no-repeat 0 -20px;
  text-indent: -9999px;
  outline: none;
}

#jc_commentsDiv .jomentry2 .jc_comment_panel .jc_comment_panel_up a:hover {
  background: transparent url(/images/votings.gif) no-repeat 0 0;
}

#jc_commentsDiv .jomentry2 .jc_comment_panel .jc_comment_panel_total {
  height: 20px;
  width: 35px;
  display: block;
  color: #999999;
  text-align: center;
  font-weight: 700;
  font-size: 10px;
  line-height: 17px;
  background: transparent url(/images/votings.gif) no-repeat 0 -125px;
}

.jomentry2 .jc_comment_panel .jc_comment_panel_down a:link,
.jomentry2 .jc_comment_panel .jc_comment_panel_down a:visited {
  width: 19px;
  height: 20px;
  display: block;
  cursor: pointer;
  text-indent: -9999px;
  background: transparent url(/images/votings.gif) no-repeat 0 -62px;
  outline: none;
}

.jomentry2 .jc_comment_panel .jc_comment_panel_down a:hover {
  background: transparent url(/images/votings.gif) no-repeat 0 -42px;
}

.jomentry2 .jc_comment_panel .jc_comment_panel_report a:link,
.jomentry2 .jc_comment_panel .jc_comment_panel_report a:visited {
  width: 20px;
  height: 20px;
  display: block;
  text-indent: -9999px;
  cursor: pointer;
  background: transparent url(/images/votings.gif) no-repeat 0 -103px;
  outline: none;
}

.jomentry2 .jc_comment_panel .jc_comment_panel_report a:hover {
  background: transparent url(/images/votings.gif) no-repeat 0px -84px;
}

.jomentry2 .s5_jcommentstl {  
  background: url(/images/jcomments_gwh_tl.jpg) no-repeat;}  
   
.jomentry2 .s5_jcommentstr {  
  padding:0 8px;
  background: url(/images/jcomments_gwh_tr.jpg) no-repeat scroll right;}  
   
.jomentry2 .s5_jcommentstm {  
  height:9px;
  background: url(/images/jcomments_gwh_tm.jpg) repeat-x;}  
   
  .jomentry2 .s5_jcommentsml {  
  background: url(/images/jcomments_gwh_ml.jpg) repeat-y left;}  
   
  .jomentry2 .s5_jcommentsmr{  
  background: url(/images/jcomments_gwh_mr.jpg) repeat-y right;}  
   
  .jomentry2 .s5_jcommentsmm {  
  margin-left:5px;
  overflow:hidden;
  padding:0px;
  margin-right:5px;
  padding:5px 9px 9px;
  background:#ffffff;}  
   
.jomentry2 .s5_jcommentsbl {  
  background: url(/images/jcomments_gwh_bl.jpg) no-repeat;}  
   
.jomentry2 .s5_jcommentsbr {  
  padding:0 8px;
  background: url(/images/jcomments_gwh_br.jpg) no-repeat scroll right;}  
   
.jomentry2 .s5_jcommentsbm {  
  height:9px;
  background: url(/images/jcomments_gwh_bm.jpg) repeat-x;}  

.s5avatar_icon {
  float:left;width:69px;}

.s5comment_icon {
  float:left;
  margin-left:86px;
  margin-top:-71px;
  width:495px;}

.jc_clear {
  clear: both;
}

.jc_bottom_container {
  border-top: none;
  padding: 5px 0 0 0 !important;
  padding: 2px 0 0 0;
  margin: 0 0 2px 0;
}

/* Voting panel */
.jc_comment_panel {
  margin: 0;
  padding: 0;
  width: 20%;
  height: 21px;
  float: right;
}
.jc_comment_panel li {
  list-style: none;
  float: right;
  background: none;
  padding: 0;
  margin: 0;
}

#jc_commentsDiv .jomentry1 .jc_comment_panel .jc_comment_panel_up a:link,
#jc_commentsDiv .jomentry1 .jc_comment_panel .jc_comment_panel_up a:visited,
#jc_commentsDiv .jomentry2 .jc_comment_panel .jc_comment_panel_up a:link,
#jc_commentsDiv .jomentry2 .jc_comment_panel .jc_comment_panel_up a:visited {
  width: 21px;
  height: 20px;
  display: block;
  cursor: pointer;
  background: transparent url(/images/votings.gif) no-repeat 0 -20px;
  text-indent: -9999px;
  outline: none;
}
#jc_commentsDiv .jomentry1 .jc_comment_panel .jc_comment_panel_up a:hover,
#jc_commentsDiv .jomentry2 .jc_comment_panel .jc_comment_panel_up a:hover {
  background: transparent url(/images/votings.gif) no-repeat 0 0;
}
#jc_commentsDiv .jomentry1 .jc_comment_panel .jc_comment_panel_total,
#jc_commentsDiv .jomentry2 .jc_comment_panel .jc_comment_panel_total {
  height: 20px;
  width: 35px;
  display: block;
  color: #999999;
  text-align: center;
  font-weight: 700;
  font-size: 10px;
  line-height: 17px;
  background: transparent url(/images/votings.gif) no-repeat 0 -125px;
}
.jomentry1 .jc_comment_panel .jc_comment_panel_down a:link,
.jomentry1 .jc_comment_panel .jc_comment_panel_down a:visited,
.jomentry2 .jc_comment_panel .jc_comment_panel_down a:link,
.jomentry2 .jc_comment_panel .jc_comment_panel_down a:visited {
  width: 19px;
  height: 20px;
  display: block;
  cursor: pointer;
  text-indent: -9999px;
  background: transparent url(/images/votings.gif) no-repeat 0 -62px;
  outline: none;
}
.jomentry1 .jc_comment_panel .jc_comment_panel_down a:hover,
.jomentry2 .jc_comment_panel .jc_comment_panel_down a:hover {
  background: transparent url(/images/votings.gif) no-repeat 0 -42px;
}
.jomentry1 .jc_comment_panel .jc_comment_panel_report a:link,
.jomentry1 .jc_comment_panel .jc_comment_panel_report a:visited,
.jomentry2 .jc_comment_panel .jc_comment_panel_report a:link,
.jomentry2 .jc_comment_panel .jc_comment_panel_report a:visited {
  width: 20px;
  height: 20px;
  display: block;
  text-indent: -9999px;
  cursor: pointer;
  background: transparent url(/images/votings.gif) no-repeat 0 -103px;
  outline: none;
}
.jomentry2 .jc_comment_panel .jc_comment_panel_report a:hover {
  background: transparent url(/images/votings.gif) no-repeat 0px -84px;
}


4. Создайте в файловом менеджере папки images и js и загрузите в них содержимое одноименных папок из архива с исходниками.



5. На этом всё, если возникнут вопросы, задавайте.
Ссылка:
BB-код:
HTML-код:
Всего комментариев: 0
Оставь комментарий первым!
Имя *:
Email:
Код *: