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

Код
<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-конструктор для настройки стилей комментариев: Перейти »
TitanSword
Сообщений: 1
Репутация: 0

Сообщение # 31 | 21:02:36 26 Авг 2010
Можно ли поставив в форме добавления комментариев чекбокс, использовать его значения для изменения вида комментария? Например, поставил галочку и у добавленного комментария изменился цвет фона .
fflesh
Сообщений: 1784
Репутация: 1314

Сообщение # 32 | 07:31:38 27 Авг 2010
TitanSword,
Quote (TitanSword)
Можно ли поставив в форме добавления комментариев чекбокс, использовать его значения для изменения вида комментария? Например, поставил галочку и у добавленного комментария изменился цвет фона .

- Можно.
Использовать для этого любое свободное поле. Например $EMAIL$ .... или $SITE$ .... ヅ
Вот здесь (http://tng.ucoz.ru/news/2010-08-22-11), например - генерится случайное число (от нуля до десяти - на больше не хватило фантазии) ... и прописаны стили.
Можно сделать выпадающий список, например, со стилями для комментариев. Или набор чекбоксов. Список - лучше. И, в зависимости от выбора - комментарий будет таким или другим.
Всё от зависит вашей фантазии.
И не обязательно просто «цвет» - можно сделать и фон. картинку, и бордер, и шрифт .. да, по любому оформить можно. ヅ
...

...

Flesh
Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8
Сообщение отредактировал fflesh - Суббота, 28 Авг 2010, 06:39:24
Am1
Сообщений: 1
Репутация: 0

Сообщение # 33 | 02:25:35 17 Сен 2010
Quote (uCoz-XPert)
В шаблоне вида комментариев в самое начало ставьте:
<div id="com-$NUMBER$"></div> <script type="text/javascript">$('#com-$NUMBER$').load('/index/8-0-$USERNAME$ #rank_u');</script>
А в шаблоне персональной страницы пользователя найдите: $_RANK_ICON$ и замените на: <div id="rank_u">$_RANK_ICON$</div>

можно пожалуйста такой же скрипт для "Название группы" и "Статус пользователя"

Добавлено (17-Сен-2010, 02:25:35)
---------------------------------------------
Так же нужно при нажатии в комментариях на номер коммента открывалось окно с прямой ссылкой на этот коммент.

Делал из скрипта на вывод прямой ссылки с новости.
У меня почему то выводится ссылка которая в адресной строке, т.е. если нажать два раза на номер коммента тогда работает.
Думаю что, что-то помимо одной функции нужно вывести что-то еще в onclick,
чтоб типа сначала открывало в адресной строке ссылку с номером коммента, а потом само окно с прямой ссылкой,а что вывести не знаю sad sad

вот код скрипта:

Code

function nrmurl(){
$("#rchp, #normurl").show();  
$("#nrml, #chpy").hide();
}  

function chpyrl(){
$("#rchp, #normurl").hide();  
$("#nrml, #chpy").show();
}  

function urlopen(){
new _uWnd('link','Прямая ссылка на комментарий',400,310,{
align:0,shadow:1,autosize:1,maxh:350,minh:100,resize:0},
'<div id="normurl"><textarea readOnly style="width:100%; height:100%; font-size:11px; border:1px solid #E0E0E0;" onfocus="this.select();">'+window.location+'</textarea>');
};

sad sad

Сообщение отредактировал Am1 - Четверг, 09 Сен 2010, 19:10:45
fflesh
Сообщений: 1784
Репутация: 1314

Сообщение # 34 | 10:41:51 17 Сен 2010
Am1,
Quote (Am1)
Делал из скрипта на вывод прямой ссылки с новости.

.... Не совсем “красивый” скрипт ... ヅ ... где т я уже видел подобное ... (И почему кривые скрипты так быстро плодятся ..??.. )
Quote (Am1)
Думаю что, что-то помимо одной функции нужно вывести что-то еще в onclick,
чтоб типа сначала открывало в адресной строке ссылку с номером коммента, а потом само окно с прямой ссылкой

... Да ... вашей фантазии можно только позавидовать .... ヅ ... Никогда бы не додумался до такого ... не хватило бы ... чего-то ... ヅ
Quote (Am1)
вот код скрипта:
- Жуть ....

Всё гораздо проще ... ヅ ...
Code
<script type="text/javascript">
$(document).ready(function(){
/* Start DocumentReady */
$("a[name^=ent]").click(function(){
var nn=$(this).attr('href'),url=document.location.href.split('#')[0];
if(url.indexOf(nn)!=-1){alert(url);}else{alert(url+''+nn);}
});
/* End DocumentReady */
});
</script>


Flesh
Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8
Сообщение отредактировал fflesh - Пятница, 17 Сен 2010, 10:42:47
fullmetalray
Сообщений: 3
Репутация: 0

Сообщение # 35 | 13:01:36 17 Сен 2010
а как сделать аватары у гостей?
http://psp-movie.ucoz.ru/
http://psp-movie.net/
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 36 | 13:44:03 17 Сен 2010
fullmetalray,
geometriya ISO 3166-2 DEE
jazator
Сообщений: 11
Репутация: 26

Сообщение # 37 | 16:00:03 25 Фев 2011
Решил поменять вид комментариев, столкнулся с проблемой, что не у всех пользователей квадратный аватар.

Прошу помощи, как реализовать подобное решение:



вот ссылка на страницу, где сразу видно квадратные и не квадратные аватары.
Прикрепления: 4705855.jpg (32.0 Kb)
olegsuv
Сообщений: 1365
Репутация: 127

Сообщение # 38 | 22:22:34 26 Фев 2011
nightdrednout, Scorpik427, не морочьте человеку голову, если не знаете решения.

Code
<div class="avatarEdge"><img src=""></div>

.avatarEdge {width: 50px; height: 50px; overflow: hidden}
.avatarEdge img {max-width: 50px; max-height: 50px;}

Так будет отсечение низа изображения

Code
<table><tr><td class="avatarEdge" valign="middle"><img src=""></td></tr></table>

.avatarEdge {width: 50px; height: 50px; overflow: hidden}
.avatarEdge img {max-width: 50px; max-height: 50px;}

А так через ячейку таблицы - как нужно.
Любые работы по:
- Javascript, jQuery, HTML, CSS
- Верстке макетов и установке их на сайты
- Нестандартным решениям
nightdrednout
Репутация: 273
Уровень замечаний:

Сообщение # 39 | 22:31:48 26 Фев 2011
mob_dp2,
Quote
А так через ячейку таблицы - как нужно.

А вот с этим будет проблема с отображением в IE 5 - 7 да и в 8 если на сайте Doctype нормальный не стоит.
.avatarEdge img {max-width: 50px; max-height: 50px;}

Может и решение не плохое, но ему потом понадобится ещё пришить сюда аватар для гостей. Не слишком ли громоздко например для шаблона вида комментариев?

Quote
не морочьте человеку голову, если не знаете решения.
Решение приведено. И проще и короче, всего то с одним стилем который можно убрать в CSS .
И тем более его интересовал принцип спрайтов вот и выдал ему типа аналог под одно изображение. wink

Даже лучше написать так

<div style="background: transparent url('$USER_AVATAR_URL$') no-repeat scroll center center; width: 50px; height: 50px;"></div>

А вдруг у него есть аватары вытянутые по гризонтали !

Only Windows 7. Only Internet Explorer 9. Only Ms SPD, all other error.
Сообщение отредактировал nightdrednout - Суббота, 26 Фев 2011, 22:39:26
fflesh
Сообщений: 1784
Репутация: 1314

Сообщение # 40 | 22:39:19 26 Фев 2011
nightdrednout,
Quote (nightdrednout)
Вся проблема в том что бы это всё работало в сообщении на форуме. но выделение не работает и при редактировании содержание превращается в чистый HTML.

- Да что ты говоришь .... ヅ
Quote (nightdrednout)
Вся проблема в том что бы это всё работало в сообщении на форуме.

- Работает.

Quote (nightdrednout)
но выделение не работает ...

Проверил лично, в ИЕ > v6, Хроме, Опере, Сафари, Мозилле.

Скрины:




...
Прикрепления: 2663908.png (9.6 Kb) · 0923340.png (9.7 Kb)
Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8
Сообщение отредактировал fflesh - Суббота, 26 Фев 2011, 22:55:35
bayda-site
Сообщений: 1
Репутация: 1

Сообщение # 41 | 01:02:51 27 Фев 2011
fflesh,

Quote
Проверил лично, в ИЕ > v6, Хроме, Опере, Сафари, Мозилле.

А вы пробовали ПОВТОРНО войти в режим редактирования этого сообщения? Просто войти и потом просто сохранить?

содержание превращается в чистый HTML sad - Как вам и говорил nightdrednout

Если повторного редактирования не делать, то подходит и просто <TEXTAREA> Но очень редко все получается с первого раза

Сообщение отредактировал bayda-site - Воскресенье, 27 Фев 2011, 01:06:25
Воронова_В_Ю
Сообщений: 45
Репутация: 22

Сообщение # 42 | 09:59:37 07 Сен 2011
Как в комментариях вместо Quote(имя) и Quote сделать "Имя писал(а)" и "Цитата"?
FeniX_kz
Сообщений: 1642
Репутация: 971

Сообщение # 43 | 14:04:47 07 Сен 2011
Quote (Воронова_В_Ю)
Как в комментариях вместо Quote(имя) и Quote сделать "Имя писал(а)" и "Цитата"?

Скриптами, подобные есть в интернете, ищите.)
.::I'll be back::.
Выбор за тобой!
mrx
Сообщений: 309
Репутация: 51

Сообщение # 44 | 18:22:53 23 Сен 2011
Вопрос! Возможно ли изменить цвет цифр оценки комментария? Сейчас по умолчанию положительный рейтинг имеет синий цвет, а отрицательный - красный.
FeniX_kz
Сообщений: 1642
Репутация: 971

Сообщение # 45 | 18:40:19 23 Сен 2011
Quote (mrx)
Возможно ли изменить цвет цифр оценки комментария? Сейчас по умолчанию положительный рейтинг имеет синий цвет, а отрицательный - красный.

Смотрите классы этих цифр через исходный код страницы и ищите/прописывайте их в css стилях. Например, синяя цифра это класс myWinSuccess
.::I'll be back::.
Выбор за тобой!
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Комментарии: настройка дизайна (работа стилями)
Поиск: