• Страница 1 из 16
  • 1
  • 2
  • 3
  • 15
  • 16
  • »
Модератор форума: Yuri_G  
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Комментарии: настройка дизайна (работа стилями)
Комментарии: настройка дизайна
Модератор форума
Сообщение # 1 | 12:15:43
Стандартный шаблон комментариев теперь выглядит так:

Код
<div class="$CLASS$" style="padding:3px;">
<div class="cDate" style="float:right">$DATE$ $MODER_PANEL$</div>
<div class="cTop"><span style="width:18px;">$NUMBER$.</span> <b>$NAME$</b>
<?if($USERNAME$)?>(<a href="$PROFILE_URL$">$USERNAME$</a>)<?endif?>
<?if($EMAIL$)?><a href="$EMAIL_JS$" title="Email"><img border="0" align="absmiddle" src="http:https://src.ucoz.ru/t/114/e.gif"></a><?endif?>
<?if($SITE$)?><a rel="nofollow" href="$SITE$" target="_blank" title="Site"><img border="0" align="absmiddle" src="http:https://src.ucoz.ru/t/114/h.gif"></a><?endif?>
</div>
<div class="cMessage">$MESSAGE$</div>
<?if($ANSWER$)?><div class="cAnswer"><b>Ответ администратора</b>: $ANSWER$</div><?endif?>
</div>


Или табличный такой:

Код
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="$CLASS$"><tr><td style="padding:3px;"><div style="float:right;font-size:11px;font-family:Arial,sans-serif;"><?if($COMMENT_RATING$<0)?><span class="myWinError"><b>$COMMENT_RATING$</b></span><?else?><?if($COMMENT_RATING$=0)?><span style="color:gray;"><b>$COMMENT_RATING$</b></span><?else?><span class="myWinSuccess"><b>+$COMMENT_RATING$</b></span><?endif?><?endif?>  <?if($GOOD_COMMENT_URL$)?><a href="$GOOD_COMMENT_URL$"><img alt="" src="http://s2.ucoz.net/img/icon/thumbu.png" width="13" align="absmiddle" border="0" title="Хороший пост"></a> <a href="$BAD_COMMENT_URL$"><img alt="" src="http://s2.ucoz.net/img/icon/thumbd.png" width="13" border="0" align="absmiddle" title="Плохой пост"></a><?else?><img alt="" src="http://s2.ucoz.net/img/icon/thumbu_.png" align="absmiddle" width="13" border="0" title="Хороший пост"> <img alt="" src="http://s2.ucoz.net/img/icon/thumbd_.png" width="13" align="absmiddle" border="0" title="Плохой пост"><?endif?> $MODER_PANEL$</div><div class="cTop" style="text-align:left;"><?if($IS_OWN$)?><span class="myWinError">*</span> <?else?><?if($IS_NEW$)?><span class="myWinSuccess">*</span> <?endif?><?endif?><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>
<?if($USERNAME$)?><a href="$PROFILE_URL$"><b>$USERNAME$</b></a><?else?><b>$NAME$</b><?endif?>   <span style="font-size:7pt;unicode-bidi:embed;">($DATE$ $TIME$)</span>
<?if($ENTRY_URL$)?>[<a href="$ENTRY_URL$" target="_blank" title="Перейти на страницу материала">Материал</a>]<?endif?>
</div>
<div class="cMessage" style="text-align:left;clear:both;padding:2px 0;"><?if($USER_AVATAR_URL$)?><a href="$PROFILE_URL$" title="$USERNAME$" style="padding-right:4px;"><img alt="" align="left" src="$USER_AVATAR_URL$" width="30" border="0" /></a><?endif?>$MESSAGE$</div>
<?if($ANSWER$)?><div class="cAnswer" style="text-align:left;clear:both;"><b>Ответ</b>: $ANSWER$</div><?endif?>
<?if($ANSWER_URL$)?><div style="clear:both;padding:4px 0;font-size:7pt;">[<a href="$ANSWER_URL$">Ответить</a>]</div><?endif?>
</td></tr></table>



То есть таблиц больше нет и совершенно поменялись классы. Естественно вы остались без оформления комментариев после обновлений от 12.06.07.

Но это дело поправимое. У нас теперь есть новые классы:

cDate - отвечает за вид даты добавления комментария.
cTop - отвечает за вид данных об авторе комментария.
cMessage - отвечает за вид самого комментария.
cAnswer - отвечает за вид ответа администратора.

И есть ещё очень интересная штука - $CLASS$ - CSS класс (разный для четных/нечетных комментариев) принимает вид:
cBlock1 - нечётные
cBlock2 - чётные

Есть ещё классы для оформления общего контейнера с комментариями:

commentsPart - общий вид.
csTop - отвечает за первую строку в контейнере с комментариями.
csQuantity - отвечает за вид надписи о количестве комментариев.

Есть ещё разные id, но их мы тут касаться не будем, это для знатоков.

В итоге пример самого простенького комментария:

/* Comments Style */
.cTop {font-size:11px;color:#C19454;font-weight:bold;padding-bottom:5px;}
.cDate {font-size:11px;color:#C19454;}
.cMessage{padding-left:5px;padding-top:2px;border:1px dashed #A67F48;text-align:justify;padding-bottom:5px;padding-right:3px;}
.cAnswer {padding-left:15px;padding-top:4px;font-style:italic;color:#7b2a24;}
/* -------------- */







CSS-конструктор для настройки стилей комментариев: Перейти »
Selena
Сообщений: 15657
Сообщение # 2 | 12:15:43
Стандартный шаблон комментариев теперь выглядит так:

Код
<div class="$CLASS$" style="padding:3px;">
<div class="cDate" style="float:right">$DATE$ $MODER_PANEL$</div>
<div class="cTop"><span style="width:18px;">$NUMBER$.</span> <b>$NAME$</b>
<?if($USERNAME$)?>(<a href="$PROFILE_URL$">$USERNAME$</a>)<?endif?>
<?if($EMAIL$)?><a href="$EMAIL_JS$" title="Email"><img border="0" align="absmiddle" src="http:https://src.ucoz.ru/t/114/e.gif"></a><?endif?>
<?if($SITE$)?><a rel="nofollow" href="$SITE$" target="_blank" title="Site"><img border="0" align="absmiddle" src="http:https://src.ucoz.ru/t/114/h.gif"></a><?endif?>
</div>
<div class="cMessage">$MESSAGE$</div>
<?if($ANSWER$)?><div class="cAnswer"><b>Ответ администратора</b>: $ANSWER$</div><?endif?>
</div>


Или табличный такой:

Код
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="$CLASS$"><tr><td style="padding:3px;"><div style="float:right;font-size:11px;font-family:Arial,sans-serif;"><?if($COMMENT_RATING$<0)?><span class="myWinError"><b>$COMMENT_RATING$</b></span><?else?><?if($COMMENT_RATING$=0)?><span style="color:gray;"><b>$COMMENT_RATING$</b></span><?else?><span class="myWinSuccess"><b>+$COMMENT_RATING$</b></span><?endif?><?endif?>  <?if($GOOD_COMMENT_URL$)?><a href="$GOOD_COMMENT_URL$"><img alt="" src="http://s2.ucoz.net/img/icon/thumbu.png" width="13" align="absmiddle" border="0" title="Хороший пост"></a> <a href="$BAD_COMMENT_URL$"><img alt="" src="http://s2.ucoz.net/img/icon/thumbd.png" width="13" border="0" align="absmiddle" title="Плохой пост"></a><?else?><img alt="" src="http://s2.ucoz.net/img/icon/thumbu_.png" align="absmiddle" width="13" border="0" title="Хороший пост"> <img alt="" src="http://s2.ucoz.net/img/icon/thumbd_.png" width="13" align="absmiddle" border="0" title="Плохой пост"><?endif?> $MODER_PANEL$</div><div class="cTop" style="text-align:left;"><?if($IS_OWN$)?><span class="myWinError">*</span> <?else?><?if($IS_NEW$)?><span class="myWinSuccess">*</span> <?endif?><?endif?><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>
<?if($USERNAME$)?><a href="$PROFILE_URL$"><b>$USERNAME$</b></a><?else?><b>$NAME$</b><?endif?>   <span style="font-size:7pt;unicode-bidi:embed;">($DATE$ $TIME$)</span>
<?if($ENTRY_URL$)?>[<a href="$ENTRY_URL$" target="_blank" title="Перейти на страницу материала">Материал</a>]<?endif?>
</div>
<div class="cMessage" style="text-align:left;clear:both;padding:2px 0;"><?if($USER_AVATAR_URL$)?><a href="$PROFILE_URL$" title="$USERNAME$" style="padding-right:4px;"><img alt="" align="left" src="$USER_AVATAR_URL$" width="30" border="0" /></a><?endif?>$MESSAGE$</div>
<?if($ANSWER$)?><div class="cAnswer" style="text-align:left;clear:both;"><b>Ответ</b>: $ANSWER$</div><?endif?>
<?if($ANSWER_URL$)?><div style="clear:both;padding:4px 0;font-size:7pt;">[<a href="$ANSWER_URL$">Ответить</a>]</div><?endif?>
</td></tr></table>



То есть таблиц больше нет и совершенно поменялись классы. Естественно вы остались без оформления комментариев после обновлений от 12.06.07.

Но это дело поправимое. У нас теперь есть новые классы:

cDate - отвечает за вид даты добавления комментария.
cTop - отвечает за вид данных об авторе комментария.
cMessage - отвечает за вид самого комментария.
cAnswer - отвечает за вид ответа администратора.

И есть ещё очень интересная штука - $CLASS$ - CSS класс (разный для четных/нечетных комментариев) принимает вид:
cBlock1 - нечётные
cBlock2 - чётные

Есть ещё классы для оформления общего контейнера с комментариями:

commentsPart - общий вид.
csTop - отвечает за первую строку в контейнере с комментариями.
csQuantity - отвечает за вид надписи о количестве комментариев.

Есть ещё разные id, но их мы тут касаться не будем, это для знатоков.

В итоге пример самого простенького комментария:

/* Comments Style */
.cTop {font-size:11px;color:#C19454;font-weight:bold;padding-bottom:5px;}
.cDate {font-size:11px;color:#C19454;}
.cMessage{padding-left:5px;padding-top:2px;border:1px dashed #A67F48;text-align:justify;padding-bottom:5px;padding-right:3px;}
.cAnswer {padding-left:15px;padding-top:4px;font-style:italic;color:#7b2a24;}
/* -------------- */







CSS-конструктор для настройки стилей комментариев: Перейти »
Kron
Сообщений: 2338
Репутация: 674

Сообщение # 3 | 19:44:36
Есть 2 шаблона, которые отвечают за вид комментариев, оба находятся в разделе "Управление дизайном". Если у вас что-то выглядит не так как вы хотите, то идите в этот раздел и настраивайте так, как вам хочется.

1. Каскадные таблицы стилей (CSS)
2. Вид комментариев

В шаблоне вида комментарив или материалов вы можете прописать или заменить любые названия классов.

Любые сообщения о том, что что-то не получается будут удаляться, а пользователь будет изгоняться, это вам не детский сад, если решили делать сайт, так будьте добры, включайте голову.

Если кого-то что-то не устраивает, вас тут никто не держит и на вас тут никто не собирается ориентироваться.

AnD
Репутация: 38

Сообщение # 4 | 04:17:06
Склонение числа комментариев

("1 комментарий", вместо "1 комментариев"; "2 комментария", вместо "Комментариев (2)" и т. д.)


Сообщение отредактировал AnD - Суббота, 08 Ноя 2008, 04:17:24
MyFriends
Сообщений: 1
Репутация: 0

Сообщение # 5 | 15:26:28
Подскажите пожалуста.. я хочу вивести на главную странитсу в самий низ коментарии материалов как мне ето сделать? wacko
Вот сайт dry

http://wa11market.3dn.ru/
Сообщение отредактировал MyFriends - Пятница, 08 Май 2009, 15:27:27
YuriT
Сообщений: 231
Репутация: 701
Уровень замечаний:

Сообщение # 6 | 02:50:26
Quote (zvirus)
MyFriends, фреймом, скриптом.

Лучше (и значительно проще) - информером для комментариев.

Потеряшка - поиск потерянных и помощь бездомным животным в Питере
YuriT
Сообщений: 231
Репутация: 701
Уровень замечаний:

Сообщение # 7 | 16:07:18
Mihaljch(best-image), вот скрипт, который делает такой рефреш.

Этот скрипт также очень легко приспособить и для многих других аналогичных задач, когда требуется что-то сделать после получения определенного ответа от сервера (не обязательно при добавлении комментариев) - например, поменять сам текст ответа на более подходящий, изменить какие-то элементы на странице и т.п.

Code
<script>
function _checkResponse(xmlRequest){
     if(xmlRequest.responseText.indexOf("успешно отправлен на")>0)
         window.location.reload();
}

$.ajax_orig=$.ajax;
$.ajax=function(object){
if(object.complete) {
     var complete=object.complete;
     object.complete=function(xmlRequest, textStatus){
       _checkResponse(xmlRequest);
       complete(xmlRequest, textStatus);
     }     
} else    
     object.complete=function(xmlRequest, textStatus){
       _checkResponse(xmlRequest);
}
return $.ajax_orig(object);
}
</script>

Скрипт вставить в шаблон "форма добавления комментариев", если такое поведение нужно для всех комментариев, или в шаблон нужной страницы (внутрь body), если только на отдельных страницах.

Соответственно, если нужно какое-то другое поведение - то просто редактируем функцию _checkResponse в самом начале скрипта. В ней можно проверить текст ответа, при желании сделать в нем какие-то замены, плюс выполнить какие-то дополнительные действия.


Потеряшка - поиск потерянных и помощь бездомным животным в Питере
Сообщение отредактировал YuriT - Понедельник, 01 Июн 2009, 16:13:37
-SiJ-
Сообщений: 1
Репутация: 3

Сообщение # 8 | 15:01:56
Здраствуйте!У меня к вам такой вопрос,подскажите пожайлуста как сделать вот такой вид комментариев:
1 фото: видим его сразу вот таким



2 фото: после того как начинаем по нему тыкать мышкой



3 фото:



Сделать такого вида я смог,вот код кому надо: (заходим в управление дизайном->Форма добавления комментариев)
Code

<table width="100%" border="0" cellspacing="0" cellpadding="2">
<tr><td>

<input class="textforms" type="text" name="name" id="nic" onFocus="if(this.value=='Имя')this.value=''; this.className='textformsiehover'" onBlur="if(this.value=='')this.value='Имя'; this.className='textforms'" value="Имя" size="20" maxlength="60">

</td><td width="100%" rowspan="4">

<textarea class="textforms" style="width: 97%; height:117px;" rows="7" name="message" id="message" cols="30" onFocus="this.className='textformsiehover'" onBlur="this.className='textforms'"></textarea>

</td></tr><tr><td>

<input class="textforms" type="text" name="email" onFocus="if(this.value=='Ваш e-mail')this.value='';this.className='textformsiehover'" onBlur="if(this.value=='')this.value='Ваш e-mail';this.className='textforms'" value="Ваш e-mail" size="20" maxlength="60">

</td></tr><tr><td>

<input class="textforms" type="text" name="www" onFocus="if(this.value=='Адрес вашего сайта')this.value='';this.className='textformsiehover'" onBlur="if(this.value=='')this.value='Адрес вашего сайта';this.className='textforms'" value="Адрес вашего сайта" size="20" maxlength="70">

</td></tr><tr><td align="center" nowrap="nowrap">

<input class="securityCode" type="text" name="code" size="5" maxlength="4" /><input type="hidden" name="seckey" value="2366333589" /> <img style="margin:0;padding:0;border:0;cursor:pointer;" id="secuImg" align="absmiddle" title="Обновить код безопасности" onclick="this.src='http://bishome.ru/secure/?k=2366333589;s=load;tm='+Math.random();" src="http://gigafilm.ucoz.ru/secure/?k=2366333589;s=load;tm=1245138045" />

</td>
</tr><tr><td colspan="2" align="center"><br>

<center><input onClick="if(document.getElementById('nic').value=='Имя')document.getElementById('nic').value='Гость';  if(email.value=='Ваш e-mail')email.value=''; if(www.value=='Адрес вашего сайта')www.value=''; " type="submit" class="button" style="padding-top: 0px; padding: 1px;" name="submit" value="Отправить комментарий ">

</td></tr></table>
    


Меня больше интересует именно подсветка,при клики мышкой на окно добавления комментария)Не подскажете как ее сделать?!!

Добавлено (19-Июн-2009, 15:01:56)
---------------------------------------------
все разобрался!Спс за быстро оказанную помощь!)
dancelot
Репутация: 50
Уровень замечаний:

Сообщение # 9 | 11:10:09
Ограничение на количество символов в комментариях

Я подумал, может кому-то пригодиться, чтобы пользователи в комментариях не писали целые простыни)

Итак, в панели управления сайтом открываем шаблон " Комментарии - Форма добавления комментариев"

Находим следующую строку:

Code
<tr><td class="commTd2" colspan="2"><div style="padding-bottom:2px">$BBCODES$</div><table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td valign="top"><textarea class="commFl" style="height:135px;" rows="8" name="message" id="message" cols="50">$MESSAGE$</textarea></td><?if($SMILES$)?><td width="5%" valign="top" align="center" valign="top" style="padding-left:3px;">$SMILES$</td><?endif?></tr></table></td></tr>

и вместо неё вставляем:

Code
<tr><td class="commTd2" colspan="2"><div style="padding-bottom:2px">$BBCODES$</div><table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td valign="top"><span class="w"><textarea class="commFl" style="height:135px;" rows="8" name="message" id="message" cols="50">$MESSAGE$</textarea><br>   
<span id="charsLeft"></span> знаков осталось.   
</span>   
</td><?if($SMILES$)?><td width="5%" valign="top" align="center" valign="top" style="padding-left:3px;">$SMILES$</td><?endif?></tr></table></td></tr>

Сохраняем и открываем шаблон " Новости сайта - Страница материала и комментариев к нему"

в этом шаблоне после тега

Code
<body>

подключаем фреймворк jquery:

Code
<script type="text/javascript" src="http://ucozme.ucoz.ru/jquery/jquery.js"></script>  
<script type="text/javascript" src="http://ucozme.ucoz.ru/jquery/jquery.limit.js"></script>

а в самом низу шаблона, перед закрывающим тегом

Code
</body>

вставим следующий скрипт:

Code
<script type="text/javascript">   
$(document).ready(function(){   
$('textarea').limit('100','#charsLeft');   
});   
</script>  

Теперь можете протестировать свою форму)

Добавлено (20-Июл-2009, 11:10:09)
---------------------------------------------
по умолчанию установлен лимит на 100 символов. Изменить его можно в строке

Code
$('textarea').limit('100','#charsLeft');

Архив со скриптами можно скачать здесь


Сообщение отредактировал dancelot - Понедельник, 20 Июл 2009, 11:09:08
kubik-rubik
Сообщений: 3
Репутация: 10
Уровень замечаний:

Сообщение # 10 | 14:00:20
А как сделать, чтобы вид и форма добавления комментариев выглядили по разному для разных модулей?? (А конкретно для модулей Каталог Сайтов и Доска Объявлений)
Вообще такое можно было сделать, использовав код $MODULE_ID$, но он не доступен в этих шаблонах sad
P.S. Kron, вообще хорошо было бы,если такой код был доступен в этих шаблонах biggrin

PCandGAMES.uCoz.Ru - твой игровой портал!
YuriT
Сообщений: 231
Репутация: 701
Уровень замечаний:

Сообщение # 11 | 14:37:41
kubik-rubik, если нужно изменить только вид - то это можно сделать, пере-определяя на самой странице (где $MODULE_ID$ уже доступен) используемые в комментариях стили. Так же можно показывать или прятать некоторые элементы комментариев (при помощи стиля dispaly:none ).

Ну, а что-то более хитрое можно изменить уже скриптом (который тоже лучше располагать в шаблоне страницы).


Потеряшка - поиск потерянных и помощь бездомным животным в Питере
Victor
Сообщений: 1141
Репутация: 576

Сообщение # 12 | 15:17:16
Quote (kubik-rubik)
Нужно чтобы были не кнопки, а ссылки. Так никак нельзя сделать?
И нужно добавить два бб-кода - [video] и [audio]
Скриптом можно. Обратитесь на хелпер.
kubik-rubik
Сообщений: 3
Репутация: 10
Уровень замечаний:

Сообщение # 13 | 16:52:41
А как сделать чтобы при нажатии на ссылку в $MESSAGE$ добавлялось
Code
[video]содержимое поля с ID addvideo[/video]
??

PCandGAMES.uCoz.Ru - твой игровой портал!
Сообщение отредактировал kubik-rubik - Понедельник, 05 Окт 2009, 16:53:08
o_Lisovenko
uProduct
Сообщений: 4704

Сообщение # 14 | 18:15:56
kubik-rubik, onclick="$('#elementID').val('value');";

o_Lisovenko
uProduct
Сообщений: 4704

Сообщение # 15 | 16:48:54
Quote (hell)
elementID

Это ID формы (или текстового поля)

Quote (hell)
value

Это текст вставки.

Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Комментарии: настройка дизайна (работа стилями)
  • Страница 1 из 16
  • 1
  • 2
  • 3
  • 15
  • 16
  • »
Поиск: