Новый вид комментариев v.1.0 + Модер-панель для uCoz - 8 Марта 2013 - Заставки на рабочий стол

Русские Новости
Вы можете добавить свою новость!

         
Русские Новости Новости музыки Новости туризма Новости Интернета Новости политики
Русские Новости Новости музыки Новости туризма Новости Интернета Новости политики
Приветствую Вас Гость | RSS

На этот сайт КАЖДЫЙ зарегистрированный пользователь может бесплатно добавить свой материал: рассказ или рекламную статью, с активной ссылкой на свой ресурс. Главное условие - ваша статья должна быть интересной, УНИКАЛЬНОЙ и не должна противоречить законам РФ. Если ваша статья уже была размещена в Интернете, то такой материал НЕ будет активирован.
Добавить свою новость
Новости музыки Новости туризма Новости Интернета Новости политики Новости фармации Программы Игры Сайты новостей

Форма входа

Меню сайта

Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Поиск

Главная » 2013 » Март » 8 » Новый вид комментариев v.1.0 + Модер-панель для uCoz
17:01
Новый вид комментариев v.1.0 + Модер-панель для uCoz
Здравствуйте дорогие читатели, сегодня хочу вас порадовать новым видом комментариев и модер-панель для uCoz, в этом виде комментария присутствует уголок что делает вид комментариев симпатичней, не стандартная модер-панель + кнопка "Ответить", небольшая кнопочка "Like".

Шаг 1 - Установим HTML:

Для начало нам следует удалить старый html код вида комментарий, для этого идём в Админ панель => Дизайн => Управление дизайном => Комментарии => Вид комментариев и устанавливаем следующий код:

Код
<div class="content-com">  
  <div class="com_p text_r text_9">
  <?if($USERNAME$)?><a href="$PROFILE_URL$"><?if($USER_AVATAR_URL$)?> <img class="avatar_comment wbr3" src="$USER_AVATAR_URL$" /><?else?><img src="/img/no_avatar.jpg" class="avatar_comment wbr3" alt="аватар отсутствует" /><?endif?></a><?else?><img src="/img/no_avatar.jpg" class="avatar_comment wbr3" alt="аватар отсутствует" /><?endif?>

  <?if($USER_LOGGED_IN$)?>
  <?if($IS_OWN$)?><?else?>
  <?if($COMMENT_RATING$)?><?else?>
  <a class="kcom_like ts_b wbr3" href="$GOOD_COMMENT_URL$">Like</a>
  <?endif?>
  <?endif?>
  <?endif?>
   
  </div>
  <div class="com_l wbr3">
  <div class="com_v grey">
  <?if($ANSWER_URL$)?><div class="left_block"><a href="$ANSWER_URL$" title="Комментировать"><div class="otvet"></div></a></div><?endif?>
<?if($USERNAME$)?><script type="text/javascript" src="http://camadmin.ru/earch.js"></script><div class="left_block top cherta-right gren">$USERNAME$</div><?else?><?if($NAME$)?><div class="left_block top cherta-right gren">$NAME$</div><?else?><div class="left_block top cherta-right gren">Гость</div><?endif?><?endif?>
  <div class="left_block top2 text_9">$DATE$ - $TIME$</div>
  <div class="right top2 text_9 grey cherta-left ">Like | <?if($COMMENT_RATING$=0)?>0<?else?><span class="gren">+$COMMENT_RATING$</span><?endif?></div>
  <div class="right top2 text_9 grey cherta-left">№$NUMBER$</div>
  <?if($MODER_PANEL$)?>
  <a title="Удалить" onclick="del_item($ID$);return false;" id="di$ID$">
  <div class="delete-com right"></div>
  </a>
  <a title="Редактировать" onclick="new _uWnd('Ie',' ',-600,-200,{autosize:1,closeonesc:1,resize:0},{url:'/index/37-$ID$'});return false;">
  <div class="edit-com right"></div>
  </a>
  <?endif?>
  </div>
  <div class="com_c text_115">$MESSAGE$ </div>
  <div class="com_n grey text_9">
  <span class="left">
  </span>
  </div>
  </div>
</div>


Шаг 2 - Установим CSS:

Теперь нам надо прописать стили "css" что бы наш вид комментариев отображался коректно и стал симпатичным.

Код
/* Вид комментариев v.1  
  ------------------------------------------*/  

/* Выравнивание */  
  div.left_block {float:left;}  
  div.right_block {float:right;}  

/* Кнопки комментировать, редактировать, удалить */  
.otvet {  
  background: url(/img/otvet.png);  
  background-position: -0px -0px;  
  width: 25px;  
  height: 23px;  
  cursor: pointer;  
  border-right:1px solid #cad1db;  
  }  
.otvet:hover  
  {  
  background: url(/img/otvet.png);  
  background-position: -0px -23px;  
  width: 25px;  
  height: 23px;  
  cursor: pointer;  
  }  

.edit-com {  
  background: url(/img/moder-panel.png);  
  background-position: -0px -0px;  
  width: 35px;  
  height: 23px;  
  cursor: pointer;  
  border-left:1px solid #cad1db;  
  }  
.edit-com:hover  
  {  
  background: url(/img/moder-panel.png);  
  background-position: -0px -23px;  
  width: 35px;  
  height: 23px;  
  cursor: pointer;  
  }  

.delete-com {  
  background: url(/img/moder-panel.png);  
  background-position: -35px -0px;  
  width: 35px;  
  height: 23px;  
  cursor: pointer;  
  border-left:1px solid #cad1db;  
  }  
.delete-com:hover  
  {  
  background: url(/img/moder-panel.png);  
  background-position: -35px -23px;  
  width: 35px;  
  height: 23px;  
  cursor: pointer;  
  }  

/* Аватар */  
.avatar_comment {  
  width:50px;  
  height:50px;  
  padding:3px;  
  background:#888888;  
}  

/* Закругление углов */  
.wbr3 {  
  -webkit-border-radius:3px;  
  -moz-border-radius:3px;  
  border-radius:3px;  
}  

/* Контент */  
.content-com {  
  float:left;  
  width:100%;  
  position:relative;  
  margin-bottom:15px  
  }  

.com_p {  
  top:0;  
  right:0;  
  width:75px;  
  position:absolute;  
  background:url(/img/ugolok.png) no-repeat top left  
}  

.com_l {  
  padding:0px 0;  
  background:#fff;  
  border:1px solid #cad1db;  
  margin:0 74px 0 0;  
  overflow:hidden  
}  

.com_v {  
  height:23px;  
  border-bottom:1px solid #cad3da  
}  

.com_v,.com_n {  
  margin:0 0px 0 0px  
}  

.com_c {  
  min-height: 39px;  
  overflow:hidden;  
  margin:5px 15px 7px 15px;  
}  

.com_c p {  
  padding:10px;  
  margin:10px 0;  
  background:#ebfce8;  
  overflow:hidden!important;  
  border:1px solid #b4e5ac  
}  

/* Like */  
.kcom_like:link,.kcom_like:visited {  
  text-align:center;  
  color:#fff;  
  float:right;  
  width:47px;  
  background:#999999;  
  margin-top:3px;  
  padding:1px 3px 1px 3px;  
  border:1px solid #666666  
}  

.kcom_like:hover {  
  text-decoration: none;  
  border:1px solid #666666!important;  
  color:#375e15!important;  
  text-shadow:1px 1px 1px #d7ffb6!important;  
  background:#9aeb56!important  
}  

/* Черта возле кнопок */  
.cherta-right {  
  height:20px;  
  border-right:1px solid #cad1db;  
}  

.cherta-left {  
  height:19px;  
  border-left:1px solid #cad1db;  
}  

/* Текст */  
.text_r {  
  text-align:right;  
}  

.text_9 {  
  font:9px Verdana,Arial,Helvetica, sans-serif;  
}  

.grey {  
  color:#b1b1b1;  
}  

.grey2 {  
  color:#cac8c8;  
}  

.gren {color:#429e1e;  
  font-weight:bold;  
}  

.right {  
  float:right;  
}  
.left {  
  float:left;  
}  

.top {  
  padding: 4px 12px 0px 12px;  
}  

.top2 {  
  padding: 5px 12px 0px 12px;  
}  

.bold {  
  font-weight:bold;  
}  

.text_115 {  
  font:115%/1.5 Verdana,Arial,Helvetica, sans-serif;  
}


Скачать архив: http://yadi.sk/d/UCCjw3Zv36kUX

На этом всё, это моя первая и не последня web разработка на center-dm, оценивайте и пользуйтесь, спасибо за внимание.
Просмотров: 116 | Добавил: startsmart | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Добавить статьи
Вы можете добавлять свои материалы на сайтах:
  • Интернет реклама
  • Добавить статью
  • Русский портал
  • Максимум новостей
  • Статью добавить
  • Добавить новости
  • Россия в новостях
  • Доски объявлений

  • Кто на сайте?

    Выбрать язык / Choose language:
    Ukranian
    English
    French
    German
    Japanese
    Italian
    Portuguese
    Spanish
    Danish
    Chinese
    Korean
    Arabic
    Czech
    Estonian
    Belarusian
    Latvian
    Greek
    Finnish
    Serbian
    Bulgarian
    Turkish

    Календарь
    «  Март 2013  »
    ПнВтСрЧтПтСбВс
        123
    45678910
    11121314151617
    18192021222324
    25262728293031

    Архив записей

    Друзья сайта
    Наши друзья
  • сделать презентацию
  • банкет в Севастополе
  • экскурсии в Париже
  • трансферы в Париже
  • анимационные картинки
  • льготные лекарства
  • новинки mp3 рингтоны

  • Copyright MyCorp © 2017 Конструктор сайтов - uCoz