MEGAsoft-Все для uCoz
Пусто
25.06.2025
 
| Главная | Форум | Поиск | Фотоальбом | FAQ | Ваша ссылка | Регистрация | Вход | Выход |
MEGAsoft-Все для uCoz MEGAsoft-Все для uCoz
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Новый вид комментариев v.1.0 + Модер-панель для uCoz
Nk_CheCДата: Четверг, 21.03.2013, 05:45 | Сообщение # 1



Сообщений: 27
[ 1 ]
ICQ:610471162

Offline

Здравствуйте дорогие читатели, сегодня хочу вас порадовать новым видом комментариев и модер-панель для uCoz, в этом виде комментария присутствует уголок что делает вид комментариев симпатичней, не стандартная модер-панель + кнопка "Ответить", небольшая кнопочка "Like" и аватар от center-dm, это моя первая web разработка в этом блоге по этому строго не судите и так посмотрим демо.

[/color]

[color=orange]Шаг 1 - Установим HTML:


Для начало нам следует удалить старый 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$)?><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" что бы наш вид комментариев отображался коректно и стал симпатичным.

CSS-Code
Код
/* Вид комментариев 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;          
}

На этом всё, это моя первая и не последня web разработка на center-dm, оценивайте и пользуйтесь, спасибо за внимание.

  • Страница 1 из 1
  • 1
Поиск:
Реклама
 
MEGAsoft-Все для uCoz
 
Все материалы размещенные на сайте пренадлежат их владельцам и предоставляются исключительно в ознакомительных целях.
Администрация ответственности за содержание материала не несет и убытки не возмещает.
По истечении 24 часов материал должен быть удален с вашего компьютера.
Незаконная реализация карается законами РФ и Украины: "Об авторском и смежном праве".
При копировании материала, ссылка на сайт обязательна!