Дата: Пн, 18.03.2013, 21:43:17 | Сообщение # 1
|
Здравствуйте дорогие читатели, сегодня хочу вас порадовать новым видом комментариев и модер-панель для uCoz, в этом виде комментария присутствует уголок что делает вид комментариев симпатичней, не стандартная модер-панель + кнопка "Ответить", небольшая кнопочка "Like" и аватар от center-dm, это моя первая web разработка в этом блоге по этому строго не судите и так посмотрим демо.
Шаг 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, оценивайте и пользуйтесь, спасибо за внимание.
Отец проверяет дневник сына: физика-2, химия-2, истрия-2, литература-2, пение-5 - Господи, этот дебил еше и поет....
Сообщение отредактировал -SAM- - Пн, 18.03.2013, 23:25:30
|
|
Дата: Вт, 19.03.2013, 16:45:22 | Сообщение # 2
|
M0DDII, вообще кульно , а есть-ли под темный диз?
|
|
Дата: Пн, 25.03.2013, 12:00:48 | Сообщение # 3
|