Модератор форума: Yuri_G |
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Комментарии: настройка дизайна (работа стилями) |
Комментарии: настройка дизайна |
Стандартный шаблон комментариев теперь выглядит так:
Код <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-конструктор для настройки стилей комментариев: Перейти » |
Стандартный шаблон комментариев теперь выглядит так:
Код <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-конструктор для настройки стилей комментариев: Перейти » |
Есть 2 шаблона, которые отвечают за вид комментариев, оба находятся в разделе "Управление дизайном". Если у вас что-то выглядит не так как вы хотите, то идите в этот раздел и настраивайте так, как вам хочется.
1. Каскадные таблицы стилей (CSS) В шаблоне вида комментарив или материалов вы можете прописать или заменить любые названия классов. Любые сообщения о том, что что-то не получается будут удаляться, а пользователь будет изгоняться, это вам не детский сад, если решили делать сайт, так будьте добры, включайте голову. Если кого-то что-то не устраивает, вас тут никто не держит и на вас тут никто не собирается ориентироваться. |
Склонение числа комментариев
("1 комментарий", вместо "1 комментариев"; "2 комментария", вместо "Комментариев (2)" и т. д.) еще один блог: Лечим рекламный бар UcoZ в IE
Сообщение отредактировал AnD - Суббота, 08 Ноя 2008, 04:17:24
|
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
|
Здраствуйте!У меня к вам такой вопрос,подскажите пожайлуста как сделать вот такой вид комментариев:
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) --------------------------------------------- все разобрался!Спс за быстро оказанную помощь!) |
Ограничение на количество символов в комментариях
Я подумал, может кому-то пригодиться, чтобы пользователи в комментариях не писали целые простыни) Итак, в панели управления сайтом открываем шаблон " Комментарии - Форма добавления комментариев" Находим следующую строку:
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)
Code $('textarea').limit('100','#charsLeft'); Архив со скриптами можно скачать здесь Сообщение отредактировал dancelot - Понедельник, 20 Июл 2009, 11:09:08
|
А как сделать, чтобы вид и форма добавления комментариев выглядили по разному для разных модулей?? (А конкретно для модулей Каталог Сайтов и Доска Объявлений)
Вообще такое можно было сделать, использовав код $MODULE_ID$, но он не доступен в этих шаблонах P.S. Kron, вообще хорошо было бы,если такой код был доступен в этих шаблонах PCandGAMES.uCoz.Ru - твой игровой портал!
|
kubik-rubik, если нужно изменить только вид - то это можно сделать, пере-определяя на самой странице (где $MODULE_ID$ уже доступен) используемые в комментариях стили. Так же можно показывать или прятать некоторые элементы комментариев (при помощи стиля dispaly:none ).
Ну, а что-то более хитрое можно изменить уже скриптом (который тоже лучше располагать в шаблоне страницы). Потеряшка - поиск потерянных и помощь бездомным животным в Питере
|
А как сделать чтобы при нажатии на ссылку в $MESSAGE$ добавлялось
Code [video]содержимое поля с ID addvideo[/video] PCandGAMES.uCoz.Ru - твой игровой портал!
Сообщение отредактировал kubik-rubik - Понедельник, 05 Окт 2009, 16:53:08
|
kubik-rubik, onclick="$('#elementID').val('value');";
|
Quote (hell) elementID Это ID формы (или текстового поля)
Quote (hell) value Это текст вставки. |
| |||