Бесплатные шаблоны

Продвинутый вид комментариев

Довольно таки интересный вариант отображения комментариев для uCoz. Рядом отображается аватарка пользователя, каждый комментарий имеет свой цветовой оттенок. Отличная замена стандартному варианту...

Новый вид комментариев для сайта на uCoz устанавливается в два счета.
Итак, поехали. Само собой в настройках модуля у вас должна быть активирована функция комментариев для тех модулей, которые у вас используются.

Этап-1.

Для изменения вида комментариев нужно перейти в Панель Управления -> Дизайн - Управление дизайном (шаблоны) - Комментарии - Вид комментариев и вместо старого HTML кода вставить новый код:

Код

<div class="cell_comment">

  <div class="comment_top">
  <strong class="comment_name">Гость </strong>
  <span> пишет: | 07.09.2026 | 16:50 </span>
  <a href="#ent4" onclick="if (document.getElementById('comEnt4')){$('body').scrollTo( { top:$('#comEnt4').offset().top-22, left:0}, 500 );return false;}" name="ent4"><strong class="comment_number">#</strong></a>


  </div>

  <div class="comment_message">
  <a href=""><img class="comment_avatar" alt="Гость" src="http://files4ucoz.com/img/no_avatar.jpg" /></a>


  </div>

  <div class="comment_bottom">

  <strong> Like | </strong>

  </div>

</div>

Не забываем сохраниться.

Примечание: ссылку на аватар и на страницу администратора в ячейки системной переменной , которая выводит ответ от админа, нужно прописать самостоятельно вручную.

Этап-2.

Теперь нужно добавить код стилей в Таблиц стилей, для этого переходим в Дизайн - Управление дизайном (CSS) и в самом конце добавляем следующее:

Код

/* Обновленный вид комментариев для uCoz с аватарами
------------------------------------------*/
.cell_comment {
  float:left;
  width:100%;
  color:#666;
  background:#fff;
  margin: 10px 0px;
  border: 5px solid #bdd3e0;
  border-radius:3px; overflow: hidden;
}

.comment_top {
  float:left;
  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;

  width:94%;
  overflow: hidden;
  padding: 10px 20px 15px 20px;
}

.comment_avatar {
  float:right;
  width:50px;
  height:50px;
  margin: 0px 0px 10px 20px;
  border: 3px solid #bdd3e0;
  border-radius:3px;
}

.comment_bottom {
  float:left;
  width:100%;
  padding:6px 0px 5px 0px;
  background:#F4F8F9;
  border-top: 1px solid #E6F0F2;
  font:10px Verdana,Arial,Helvetica, sans-serif;
}

.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);
}

Готово. Переходим на страницу с полной новостью и радуемся новому виду комментариев.

Делаем кнопку "Вверх" для uCoz

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

Что бы установить кнопку "Вверх" для uCoz сайта идем в Панель управления - Дизайн - Управление дизайном (CSS) и добавляем данный код в конец таблицы стилей:

Код

.upTop {
  display:none;
  width:100px;
  height:100%;
  position:fixed;
  left:0px;
  top:0px;
  z-index:100;
}
.upTopButton {
  background:#777777 url(http://files4ucoz.com/templates/goup.png) no-repeat;
  width:27px;
  height:27px;
  position:fixed;
  top:10px;
  left:10px;
  cursor:pointer;
}
.upTopZone {
  display:none;
  background:url(http://files4ucoz.com/templates/upbg.png) repeat;
  width:100px;
  height:100%;
  cursor:pointer;
}
.upTopZone p {
  background:#777777;
  font-size:12px;
  width:63px;
  height:27px;
  margin:0;
  position:fixed;
  top:10px;
  left:37px;
  color:#fff;
  font-family:"tahoma", "verdana", "arial";
  line-height:25px;
  text-align:center;
  text-shadow:1px 1px 1px #000000;
}
@media screen and (max-width:1024px) {
  .upTopZone {
  display:none !important;
  }
} .blue .upTopButton, .blue .upTopZone p {
  background-color:#3fa3e1;
}
.green .upTopButton, .green .upTopZone p {
  background-color:#60bf3a;
}
.red .upTopButton, .red .upTopZone p {
  background-color:#ca2929;
}
.orange .upTopButton, .orange .upTopZone p {
  background-color:#ef990b;
}
.purple .upTopButton, .purple .upTopZone p {
  background-color:#b053a0;
}
.grey .upTopButton, .grey .upTopZone p {
  background-color:#777777;
}

Сохраняемся.

Теперь, нужно добавить html код вывода кнопки в код шаблона перед закрывающим тегом </body> (например, в нижнюю часть сайта), вот:

Код

На этом установка закончена. По умолчанию кнопка "Вверх" для сайта на uCoz отображается с левой стороны.

P.S.: Что бы изменить стандартный синий цвет кнопки, достаточно заменить класс blue на один из этих:

blue - голубой
green - зеленый
red - красный
orange - оранжевый
purple - пурпурный
grey - серый