Каталог статей
| Главная » Статьи » Web-мастерам » Шаблоны |
Шаблон вида комментариев для Ucoz
Автор: tester-disru | Дата: 10.02.2012 | Просмотров: 1151 |

Представляю вашему вниманию вид комментариев для Ucoz - только для светлых шаблонов.
Весит мало используется всего две картинки - грузится моментом - ошибок в написании нет.
И так начнем его ставить:
1) Для начала нам понадобится две картинки:
2) Создаем CSS файл и пихам все это туда:
@charset "utf-8";
/* CSS Document */
/*UL, LI*/
ul {
margin: 0;
padding-left: 16px;
list-style-position:outside;
list-style-image:none;
}
ul li { margin: 0; padding: 0; }
ol {
list-style-image: none;
list-style-position: outside;
list-style-type: decimal;
margin-bottom: 18px;
margin-left: 2.2em;
}
ul.reset, ul.reset li { list-style: none; padding: 0; margin: 0; }
.clr { clear: both; }
/*-----MAIN-----*/
.base { padding-bottom: 30px; }
.binner { padding: 0 13px;}
.storysort .binner { padding-bottom: 10px; background: transparent url("http://dis-design.ru/images3/storysort_bg.png") repeat-x left bottom; }
.storysort { font-size: 10px; padding-bottom: 5px; }
/*ЗАГОЛОВОК ЦЕНТРАЛЬНЫХ STORY*/
.heading { background: #891a1b url("http://dis-design.ru/images3/base_heading.png") repeat-x left top; }
.heading .binner {
padding-top: 14px; padding-bottom: 10px;
color: #f5f5dc;
}
.heading .binner a, .heading .binner { color: #f5f5dc; }
.heading h1 {
font-size: 14px;
font-weight: bold;
color: #f5f5dc;
font-family: Arial, Tahoma, Sans-serif;
}
.heading2 {
background: #696969 url("http://dis-design.ru/images3/base_heading2.png") repeat left top;
border-top: 3px solid #272727;
border-bottom: 3px solid #272727;
color: #ffffff;
}
.heading2 .binner { padding-top: 8px; padding-bottom: 6px;}
.heading2 .binner a, .heading2 .binner { color: #f5f5dc; }
.heading2 h1 {
font-weight: bold;
font-size: 0.9em;
text-transform: uppercase;
color: #f5f5dc;
}
.heading3 { background: #ffffff url("http://dis-design.ru/images3/topblock_bg.png") repeat-x left top; }
.heading3 .binner { padding-top: 19px; padding-bottom: 6px;}
.heading3 h1 {
font-weight: normal;
font-size: 20px;
color: #cd0000;
}
.storytags { padding-top: 10px; padding-bottom: 10px; }
.storytags div {
text-indent: 20px;
background: #f8faf6 url("http://dis-design.ru/images3/base_tags.png") no-repeat 4px 5px;
color: #161616;
padding: 3px;
}
/*AVATAR USERINFO.TPL*/
.avatar {
position: absolute;
top: 12px;
left: 23px;
background-repeat: no-repeat;
background-position: 50% 50%
}
.heading_com strong { font-size: 18px; padding-top: 14px; }
.heading_com .morefield { background: none; padding-top: 6px; }
.heading_com .morefield span { color: #99958c; font-size: 11px; }
.signature, .signature a { color: #b4b4b4; }
.comments .morelink .binner { padding-top: 6px; padding-bottom: 6px; border-top: 1px solid #e0e0e0; }
.comments { margin: 0; }
.comments .morelink .argr { margin-left: 10px; }
/*ARGUMENTS*/
.arg { padding-right: 9px; float: left; }
.arg img.left { margin: 2px 3px 0 0; }
.argr { float: right; padding-left: 6px; }
/*COMMENTS*/
.heading_com { background: #f6f6f6 url("../heading_com.png") repeat-x left top; height: 81px; }
.heading_com .binner {
background: transparent url("../heading_com_left.png") no-repeat left top;
height: 81px;
padding-left: 110px;
position: relative;
}
3) заходим в панель управления - вид комментариев и меняем там все на:
<link type="text/css" rel="StyleSheet" href="http://disru.ucoz.ru/Comments.css" />
<script type="text/javascript">
var selection='';function Insert(qname,text){if (text!=""){ qname=qname.replace(/[\[\]]/g, "|"); paste("[quote="+qname+"]"+text+"[/quote]\n", 0);} else {alert('Выделите текст для цитирования');}} function paste(text,flag){if ((document.selection)&&(flag)) {document.addform.message.focus();document.addform.document.selection.createRange().text = text;} else document.addform.message.value += text;}function get_selection() {if (window.getSelection){selection = window.getSelection();selection = selection.replace(/\r\n\r\n/gi, "_doublecaret_"); selection = selection.replace(/\r\n/gi, " "); while (selection.indexOf(" ") !=-1) selection = selection.replace(/ /gi, ""); selection = selection.replace(/_doublecaret_/gi, "\r\n\r\n"); } else selection = document.selection.createRange().text; }
</script>
<a name="comment"></a>
<div class="base comments">
<div class="heading_com"><div class="binner"><div>
<span class="argr" style="padding-top: 6px;"><b>$COMMENT_RATING$</b><b>$COMMENT_RATING$</b><b>+$COMMENT_RATING$</b> <a href="$GOOD_COMMENT_URL$"><img src="http://s37.ucoz.net/img/icon/thumbu.png" width="13" align="absmiddle" border="0" title="Хороший пост"></a> <a href="$BAD_COMMENT_URL$"><img src="http://s37.ucoz.net/img/icon/thumbd.png" width="13" border="0" align="absmiddle" title="Плохой пост"></a><img src="http://s37.ucoz.net/img/icon/thumbu_.png" align="absmiddle" width="13" border="0" title="Хороший пост"> <img src="http://s37.ucoz.net/img/icon/thumbd_.png" width="13" align="absmiddle" border="0" title="Плохой пост">$MODER_PANEL$</span>
<img class="avatar" title="$USERNAME$" src="$USER_AVATAR_URL$" border="0" width=65px>
<img class="avatar" title="$USERNAME$" src="http://tester-disru.ucoz.ru/design_orenj/images/Netavatara.png" width=65px>
<img class="avatar" title="$USERNAME$" src="http://tester-disru.ucoz.ru/design_orenj/images/Netavatara.png" width=65px>
<strong><a href="$PROFILE_URL$"><b>$USERNAME$</b></a><b>$NAME$</b> написал:</strong>
<div class="morefield">
<span class="arg">Комментарий:<a href="#ent$ID$" onclick="if (document.getElementById('comEnt$ID$')){$('body').scrollTo( { top:$('#comEnt$ID$').offset().top-22, left:0}, 500 );return false;}" name="ent$ID$"><b>[$NUMBER$]</b></a>
Добавлено: $DATE$ | $TIME$
<span class="myWinError">[Это ваш комментарий]</span> <span class="myWinSuccess">[Новый комментарий]</span>
</span>
<div class="clr"></div>
</div>
</div></div></div>
<div class="binner maincont" style="padding-top: 12px;"><div>
$MESSAGE$
<b>Ответ</b>: $ANSWER$
</div></div>
<div class="morelink"><div class="binner"><div>
<span class="argr">[<a href="javascript:Insert('$USERNAME$',selection);" onmouseover="get_selection();" class="postQuote">Цитировать</a>]</span>
<div class="clr"></div>
</div></div></div>
</div>
Вот и все - у нас красивый вид комментариев получилься. Да и повторюсь еще раз - это вид комментариев создан для светлых тонов. На темных будет смотреться не красиво или в крайнем случае убого. В последующем может сделаю и для темных - смотря как времени будет 
|
| ||
| ||
