Главная
Вход
Регистрация
Суббота, 18.05.2024, 16:23Приветствую Вас Гость
Меню сайта
 Главная  Файловый архив  Доска объявлений  Каталог сайтов

Поиск по сайту

Облако тегов
EVEREST.5.50.2100.Final.PC

Посещаемость сайта

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

Форма входа


Главная » 2013 » Март » 8 » Новый вид комментариев v.1.0 + Модер-панель для uCoz
17:31
Новый вид комментариев 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, оценивайте и пользуйтесь, спасибо за внимание.
Просмотров: 336 | Добавил: startsmart | Рейтинг: 0.0/0
Всего комментариев: 0

Похожие публикации:

    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]
    Друзья сайта
  • Создание не дорогих сайтов
  • Продажа компьютеров в Александрове
  • Интернет-магазин ИМГА
  • InstaForexTrading
  • InstaForexTrading
  • Forex four you
  • Оптимизация сайта.
  • Компьютерная помощь
  • Каталог сайтов-Мега ТИЦ
  • Пособие по HTML и CSS
  • клан Волкодавы
  • Forex Basic Information
  • Скачать пограммы бесплатно
  • Онлайн фильмы
  • Всё для uCOZ
  • Все новинки программх
  • Форекс для начинающих
  • Заработай на сайте
  • Видео онлайн 18+
  • Будем здоровы
  • Онлайн кино
  • Оптимизация сайта
  • Блюда на каждый день
  • Бизнес идея говорящие цветы

  • Wmlink.ru

    Entries archive

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


    Все материалы размещенные на сайте принадлежат их владельцам и публикуются исключительно в ознакомительных целях.
    После скачивания и ознакомления рекомендуем удалить файл или приобрести лицензионную версию.
    Незаконная реализация карается законами РФ и Украины: "Об авторском и смежном праве".

    При копировании материалов сайта ссылка на сайт обязательна!
    Для удобного просмотра Сайт оптимизирован  под расширение 1280x1024
    Администрация сайта не несет ответственности за материалы опубликованные на сайте, материалы легко доступны в сети интернет!


    Бетон Селятино | Бетон Одинцово | Бетон в Щелково | Бетон Подольск | Бетон Сергиев-Посад | Бетон в Люберцах | Бетон Мытищи | Бетон Королёв | Бетон Домодедово | Бетон Островцы | Бетон Дмитров | Бетон Балашиха | Бетон Реутово | Бетон в Краснознаменске | Бетон в Лобне | Бетон Пушкино | Бетон в Москве | Бетон Химки | Бетон Серпухов | Бетон Железнодорожный | Бетон Реутов | Бетон Люберцы | Заказать доставку: песка, щебня и сыпучие нерудные стройматериалын |

    Все новинки программ.РФ © 2024