Шаблоны для uCoz [18] |
Виды материалов [10] |
Мини профили [7] |
Мини чаты [8] |
Виды комментариев [14] |
Формы входа [3] |
Информеры [33] |
Украшения [16] |
Меню сайта [5] |
Кнопки [27] |
Шапки сайта [3] |
Медиа [19] |
Переключатели [8] |
Разное [65] |
Формы поиска [9] |
Скрипты [46] |
Игры на сайт [6] |
Аякс (Ajax) окна [1] |
PHP скрипты [3] |
16:34 Новый вид комментариев v.1.0 + Модер-панель для uCoz |
Здравствуйте дорогие читатели in.uCoz.org, сегодня хочу вам предложить новый вид комментариев с измененной модер-панелью для uCoz, в этом виде комментариев добавлен уголок, что делает вид комментариев привлекательней, а так же не стандартная модер-панель + кнопка "Ответить" и небольшая кнопочка "Like". Установка: Файлы архива закачайте в папку img файл менеджера. Для начала удаляем старый html код вида комментариев, для этого идём в Админ панель => Дизайн => Управление дизайном => Комментарии => Вид комментариев и устанавливаем следующий код: Код <div
class="content-com"> <div class="com_p text_r text_9"> <a href="$PROFILE_URL$"> <img class="avatar_comment wbr3" src="$USER_AVATAR_URL$" /><img src="/img/no_avatar.jpg" class="avatar_comment wbr3" alt="аватар отсутствует" /></a><img src="/img/no_avatar.jpg" class="avatar_comment wbr3" alt="аватар отсутствует" /> <a class="kcom_like ts_b wbr3" href="$GOOD_COMMENT_URL$">Like</a> </div> <div class="com_l wbr3"> <div class="com_v grey"> <div class="left_block"><a href="$ANSWER_URL$" title="Комментировать"><div class="otvet"></div></a></div> <div class="left_block top cherta-right gren">$USERNAME$</div><div class="left_block top cherta-right gren">$NAME$</div><div class="left_block top cherta-right gren">Гость</div> <div class="left_block top2 text_9">$DATE$ - $TIME$</div> <div class="right top2 text_9 grey cherta-left ">Like | 0<span class="gren">+$COMMENT_RATING$</span></div> <div class="right top2 text_9 grey cherta-left">№$NUMBER$</div> <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> </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; } |
Всего комментариев: 1 | ||
| ||