Сегодня же абсолютно случайно увидели простенький, но симпатичный плагин. Плагин заточен под то, чтобы делать стильный светлый дизайн окон комментариев. Для тех, кто способен оценить такой вариант оформления элемента страницы - готовы показать и рассказать.
Для тех же, кто предпочитает черный фон и красный текст, извините, не сегодня. Опять же Ucoz радует стильной новинкой - легкий и практичный белый или светлый дизайн. Никнеймы выделяет жирным, имеет графы времени добавления сообщения, возможность лайкнуть комментарий и перейти в приват, нажав на небольшой конвертик-письмо. Так же на светлом фоне отлично смотрятся яркие аватарки, так что ваши пользователи останутся довольны. Достойная аватарка на достойном фоне, скажу я вам - вещь важная и серьезная. А так же от белого фона глаза не так устают, если "в Интернете кто-то не прав" и приходится вести многочасовые молчаливые баталии с формучанами. Естественно, есть возможность размещать любимые смайлики. Для форумов с простой и понятной навигацией - такой плагине отличное решение - не перегружен ненужными цветами и элементами, но зато смотрится не дешево и придает общению на форуме нотку изысканности, ну вы понимаете о чем я - во всем нужно искать положительный момент, даже в простом по дизайне плагине от Ucoz.
Важно! Все картинки из прикреплённого архива залейте в папку img
Установка:
В виде материалов комментариев замените всё на: <divclass="content-com">
<divclass="com_p text_r text_9">
if($USERNAME$)?><ahref="$PROFILE_URL$">if($USER_AVATAR_URL$)?><imgclass="avatar_comment wbr3"src="$USER_AVATAR_URL$"/>else?><imgsrc="/img/no_avatar.jpg"class="avatar_comment wbr3"alt="аватар отсутствует"/>endif?></a>else?><imgsrc="/img/no_avatar.jpg"class="avatar_comment wbr3"alt="аватар отсутствует"/>endif?>
if($USER_LOGGED_IN$)?>
if($IS_OWN$)?>else?>
if($COMMENT_RATING$)?>else?>
<aclass="kcom_like ts_b wbr3"href="$GOOD_COMMENT_URL$">Like</a>
endif?>
endif?>
endif?>
</div>
<divclass="com_l wbr3">
<divclass="com_v grey">
if($ANSWER_URL$)?><divclass="left_block"><ahref="$ANSWER_URL$"title="Комментировать"><divclass="otvet"></div></a></div>endif?>
if($USERNAME$)?><divclass="left_block top cherta-right gren">$USERNAME$</div>else?>if($NAME$)?><divclass="left_block top cherta-right gren">$NAME$</div>else?><divclass="left_block top cherta-right gren">Гость</div>endif?>endif?>
<divclass="left_block top2 text_9">$DATE$ - $TIME$</div>
<divclass="right top2 text_9 grey cherta-left ">Like | if($COMMENT_RATING$=0)?>0else?><spanclass="gren">+$COMMENT_RATING$</span>endif?></div>
<divclass="right top2 text_9 grey cherta-left">№$NUMBER$</div>
if($MODER_PANEL$)?>
<atitle="Удалить"onclick="del_item($ID$);returnfalse;"id="di$ID$">
<divclass="delete-com right"></div>
</a>
<atitle="Редактировать"onclick="new _uWnd('Ie',' ',-600,-200,{autosize:1,closeonesc:1,resize:0},{url:'/index/37-$ID$'});returnfalse;">
<divclass="edit-com right"></div>
</a>
endif?>
</div>
<divclass="com_c text_115">$MESSAGE$ </div>
<divclass="com_n grey text_9">
<spanclass="left">
</span>
</div>
</div>
</div>
Следующий код разместите в самом низу вашего css:/* Вид комментариев v.1
------------------------------------------*/
/* Выравнивание */
div.left_block {float:left;}
div.right_block {float:right;}
/* Кнопки комментировать, редактировать, удалить */
.otvet {
background: url(/img/otvet.png);
background-position:0px0px;
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:0px0px;
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:-35px0px;
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:0px0;
background:#fff;
border:1px solid #cad1db;
margin:074px00;
overflow:hidden
}
.com_v {
height:23px;
border-bottom:1px solid #cad3da
}
.com_v,.com_n {
margin:00px00px
}
.com_c {
min-height:39px;
overflow:hidden;
margin:5px15px7px15px;
}
.com_c p {
padding:10px;
margin:10px0;
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:1px3px1px3px;
border:1px solid #666666
}
.kcom_like:hover {
text-decoration: none;
border:1px solid #666666!important;
color:#375e15!important;
text-shadow:1px1px1px#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:9pxVerdana,Arial,Helvetica, sans-serif;
}
.grey {
color:#b1b1b1;
}
.grey2 {
color:#cac8c8;
}
.gren {color:#429e1e;
font-weight:bold;
}
.right {
float:right;
}
.left {
float:left;
}
.top {
padding:4px12px0px12px;
}
.top2 {
padding:5px12px0px12px;
}
.bold {
font-weight:bold;
}
.text_115 {
font:115%/1.5Verdana,Arial,Helvetica, sans-serif;
}
При копирование материалов с сайта необходимо указать активную ссылку источника -
Скрипты для uCoz 2013 и
Светлый вид комментариев для uCoz
Расскажи друзьям интересные новости:
-
Установить на свой сайт блок социальных закладок
| 
Скачать/Download
