• Новые сообщения
  • Участники
  • Правила форума
  • Поиск
  • RSS
  • Страница 1 из 3
  • 1
  • 2
  • 3
  • »
Форум » Веб-разработка » HTML + CSS — коды » Скрипт последних комментариев для сайта ucoz (Вывод крайних комментариев по клику для сайта ucoz)
Скрипт последних комментариев для сайта ucoz
Kosten
 		Суббота, 26 Мая 2012, 19:38 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »

О скрипте:
Скрипт для тех кому интересно какие сообщения были последний не заходя на форум можно увидеть ответили на втой вопрос или на твою беседу , сам скрипт часто вижу на сайтах.
Приступаем к установке:
[ Комментарии · Материалы · Дата добавления материала D · Материалы: 4 · Колонки: 1 · Длина заголовка: 30 ]
В шаблон информера вставляем:
Code
<div class="lastComms">     
     <div class="lastCommsUser">     
     <?if($USERNAME$)?><a href="$PROFILE_URL$" ><b>$USERNAME$</b></a><?else?><a href="$PROFILE_URL$" ><b>$NAME$</b></a><?endif?> написал в <span title="$DATE$">$TIME$</span>     
     </div>     
     <div class="lastCommsMessage" title="$ENTRY_TITLE$"> <div class="lastCommsAvatar" ><?if($USER_AVATAR_URL$)?><img title="$USERNAME$" src="$USER_AVATAR_URL$" border="0"><?else?><img title="Аватарка не выбрана" src="http://s11.radikal.ru/i183/1205/77/166b7564a74a.jpg"><?endif?> </div><a href="$ENTRY_URL$">$MESSAGE$</a></div></div><hr>


В CSS
Code
.lastComms {border:1px solid #bfbfbf;background:#ededed;-moz-border-radius:3px;-webkit-border-top-right-radius:3px;-webkit-border-top-left-radius:3px;-webkit-border-bottom-right-radius:3px;-webkit-border-bottom-left-radius:3px;-khtml-border-radius:3px;border-radius:3px;}     
     .lastCommsUser {text-align:left;font-size:11px;color:#232323;text-shadow: 1px 1px 0px #fff;padding:0 0 2px 4px;border-bottom:1px dotted #ccc;}     
     .lastCommsMessage {padding: 3px 0 3px 5px;height:6%;overflow: hidden;}     
     .lastCommsMessage a {text-decoration:none;}     
     .lastCommsMessage a:hover {text-decoration:underline !important;}     
     .lastCommsAvatar img {     
     width: 45px;     
     height: 45px;     
float:right;    
     border-right: 1px solid rgba(0,0,0,.2);     
     border-bottom: 1px solid rgba(0,0,0,.2);     
     -webkit-border-radius: 2px;     
     -moz-border-radius: 2px;     
     border-radius: 2px;     
     padding: 3px;     
     background-color: #e0e0e0;     
     }


Источник ехе-ир
Страна: (RU)
elaim
 		Пятница, 08 Декабря 2017, 13:46 | Сообщение 2
Оффлайн
Пользователи
Сообщений:21
Награды: 0
« 0 »
Хороший информер. Переделал для себя.
Несколько вопросов:
1. Как изменить цвет текста? По умолчанию у меня цвет ссылок синего цвета
2. Как сделать кликабельным весь участок с комментарием? (чтобы не наводить курсор на сам текст)
Страна: (UA)
Kosten
 		Пятница, 08 Декабря 2017, 22:11 | Сообщение 3
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
elaim, ссылку на сайт пропишите, если информер уже установлен.
Страна: (RU)
waak
 		Пятница, 08 Декабря 2017, 22:47 | Сообщение 4
Оффлайн
Проверенные
Сообщений:588
Награды: 14
« 166 »
Цитата Kosten ()
Скрипт для тех кому интересно какие сообщения были последний не заходя на форум можно увидеть ответили на втой вопрос или на твою беседу , сам скрипт часто вижу на сайтах.


А причём тут форум??????
Данный информер не как не относится к форуму и не покажет инфу про которую вы указали в описании!!!

Цитата elaim ()
1. Как изменить цвет текста? По умолчанию у меня цвет ссылок синего цвета
2. Как сделать кликабельным весь участок с комментарием? (чтобы не наводить курсор на сам текст)


1 всё просто указать для ссылок свой цвет color: #;
2 Обвести весь блок ссылкой к материалу а другие убрать
Страна: (RU)
-SAM-
 		Суббота, 09 Декабря 2017, 03:03 | Сообщение 5
Оффлайн
Друзья сайта
Сообщений:896
Награды: 40
« 597 »
1) там в стилях найти .lastCommsMessage и нужно дописать, как waak сказал выше;
2) div с классом lastCommsMessage обернуть той ссылкой, что идёт вокруг $MESSAGE$


Помог? Скажи спасибо в виде "+" - вам мелочь, а мне приятно.
Бесплатное оказание помощи в ответах на "Вопросы про uCoz".
Страна: (UA)
elaim
 		Суббота, 09 Декабря 2017, 19:44 | Сообщение 6
Оффлайн
Пользователи
Сообщений:21
Награды: 0
« 0 »
Спасибо за ответы! Нашел еще один вариант последних комментариев со скролом. Совместил с этим варианом. И вот что вышло:

В шаблоне информера:

Код

<div class="lastComms">
<div class="lastCommsUser">
<div class="lastCommsAvatar" ><?if($USER_AVATAR_URL$)?><img title="$USERNAME$" src="$USER_AVATAR_URL$" border="0"><?else?><img title="Аватарка не выбрана" src="http://vsthouse.ru/FOTO/noavatar.gif"><?endif?> </div>
<?if($USERNAME$)?><a href="$PROFILE_URL$" ><b>$USERNAME$</b></a><?else?><a href="$PROFILE_URL$" ><b>$NAME$</b></a><?endif?></br>написал $DATE$ в <span title="$DATE$">$TIME$</span>
</div>
<div class="lastCommsMessage" title="$ENTRY_TITLE$"><a href="$ENTRY_URL$"><font color="646464">$MESSAGE$</font></a></div></div><hr>


В том месте, где стоит информер:

Код

<style>.scroll {
width:100%;
height:400px;
overflow:auto;
}

/* Для определенных скроллбаров */
.scroll::-webkit-scrollbar {
    width: 4px;
    background-color: #f3f3f3;
}

/* ползунок скроллбара */
.scroll::-webkit-scrollbar-thumb {
    width: 2px;
    background-color: #d7d7d7;
}

.ChatMess1 {border:1px solid #ccc; background:#fff; margin-bottom:3px; -webkit-border-radius:2px
2px 2px 2px;-moz-border-radius:2px 2px 2px 2px;border-radius:2px 2px 2px 2px;}
.ChatMesTop2 {border:0px; border-bottom:1px dotted #ccc; padding:3px 3px 3px 4px;
background:#f8f8f8; -webkit-border-radius:2px 2px 0px 0px;-moz-border-radius:2px 2px 0px 0px;border-radius:2px 2px 0px 0px;}
.ChatMesTop1 {border:0px; border-top:1px dotted #ccc; padding:3px 3px 3px 4px;
background:#f8f8f8; -webkit-border-radius:2px 2px 0px 0px;-moz-border-radius:2px 2px 0px 0px;border-radius:2px 2px 0px 0px;}
</style>

<div class="scroll">$MYINF_11$</div>


В CSS:

Код

/* СТИЛИ ДЛЯ ИНФОРМЕРА НОВЫЕ КОММЕНТАРИИ------------------------------------------*/
.lastComms {border:0px solid #bfbfbf;background:#ffffff;-moz-border-radius:3px;-webkit-border-top-right-radius:3px;-webkit-border-top-left-radius:3px;-webkit-border-bottom-right-radius:3px;-webkit-border-bottom-left-radius:3px;-khtml-border-radius:3px;border-radius:3px;}
.lastCommsUser {text-align:left;font-size:11px;color:#232323;text-shadow: 1px 1px 0px #fff;padding:0 0 2px 4px;border-bottom:1px dotted #ccc;}
.lastCommsMessage {padding: 3px 0 3px 5px;height:6%;overflow: hidden;}
.lastCommsMessage a {text-decoration:none;}
.lastCommsAvatar img {
width: 29px;
height: 29px;
float:left;
border-right: 1px;
border-bottom: 1px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
padding: 3px;
}
/* -------------------------------------- */


Цвет поменял, но со вторым вопросом так и не понял, как сделать кликабельным весь участок с комментарием? (чтобы не наводить курсор на сам текст)

Подскажите, что в коде изменить!

Еще вопрос по скролу. Изменил дизайн скрола таким образом:

Код

.scroll {
width:100%;
height:400px;
overflow:auto;
}

/* Для определенных скроллбаров */
.scroll::-webkit-scrollbar {
    width: 4px;
    background-color: #f3f3f3;
}

/* ползунок скроллбара */
.scroll::-webkit-scrollbar-thumb {
    width: 2px;
    background-color: #d7d7d7;
}


Проверил в Опере, Хроме, Яндекс браузере - дизайн измениля
В Мозиле и Интернет экслоурере - дизайн остался стандартный.
Может кто-нибудь в курсе, что еще нужно прописать для мозилы и интернет экплоурера?

Работу информера можно посмотреть на сайте: vsthouse.ru
Страна: (UA)
Kosten
 		Суббота, 09 Декабря 2017, 19:57 | Сообщение 7
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
Здесь на разных браузерах показывает по разному, не известно как сделать, главное, чтоб корректно выводило.
Страна: (RU)
-SAM-
 		Суббота, 09 Декабря 2017, 20:50 | Сообщение 8
Оффлайн
Друзья сайта
Сообщений:896
Награды: 40
« 597 »
elaim, известно - нужно подключать дополнительно js-плагин на полосу прокрутки, как пример Nicescroll jQuery Plugin или jScrollPane.


Помог? Скажи спасибо в виде "+" - вам мелочь, а мне приятно.
Бесплатное оказание помощи в ответах на "Вопросы про uCoz".

Сообщение отредактировал
-SAM- - Суббота, 09 Декабря 2017, 20:53
Страна: (UA)
elaim
 		Воскресенье, 10 Декабря 2017, 13:02 | Сообщение 9
Оффлайн
Пользователи
Сообщений:21
Награды: 0
« 0 »
-SAM-, понятно, спасибо!
По поводу второго вопроса: 2. Как сделать кликабельным весь участок с комментарием? (чтобы не наводить курсор на сам текст)
Что нужно изменить в коде, который я представил выше?
Страна: (UA)
-SAM-
 		Воскресенье, 10 Декабря 2017, 18:47 | Сообщение 10
Оффлайн
Друзья сайта
Сообщений:896
Награды: 40
« 597 »
Вот это:
Цитата elaim ()
<div class="lastCommsMessage" title="$ENTRY_TITLE$"><a href="$ENTRY_URL$"><font color="646464">$MESSAGE$</font></a></div>
Заменить на это:
Код
<a href="$ENTRY_URL$" title="$ENTRY_TITLE$"><div class="lastCommsMessage"><font color="646464">$MESSAGE$</font></div></a>
Или вот так еще можно сделать.


Помог? Скажи спасибо в виде "+" - вам мелочь, а мне приятно.
Бесплатное оказание помощи в ответах на "Вопросы про uCoz".
Страна: (UA)
elaim
 		Воскресенье, 10 Декабря 2017, 22:46 | Сообщение 11
Оффлайн
Пользователи
Сообщений:21
Награды: 0
« 0 »
-SAM-, спасибо! Теперь все отлично!
Еще вопрос. Комментариев на странице с материалом бывает очень много и найти нужный не так просто. Реально ли сделать, чтобы с информера перекидывало именно на сам комментарий?
Страна: (UA)
First-1
 		Воскресенье, 10 Декабря 2017, 22:52 | Сообщение 12
Оффлайн
Пользователи
Сообщений:716
Награды: 22
« 6 »
elaim, реально.
Замени
Код

$ENTRY_URL$

на
Код

$COMMENTS_URL$
Страна: (UA)
elaim
 		Воскресенье, 10 Декабря 2017, 23:20 | Сообщение 13
Оффлайн
Пользователи
Сообщений:21
Награды: 0
« 0 »
First, не получается так. Все равно перекидывает на материал с описанием, а не на сам коммент.
Страна: (UA)
First-1
 		Воскресенье, 10 Декабря 2017, 23:43 | Сообщение 14
Оффлайн
Пользователи
Сообщений:716
Награды: 22
« 6 »
elaim, ну тогда вот так попробуй
Код
$ENTRY_URL$#ent$ID$
Страна: (UA)
elaim
 		Понедельник, 11 Декабря 2017, 00:29 | Сообщение 15
Оффлайн
Пользователи
Сообщений:21
Награды: 0
« 0 »
First, и так не выходит ((
Страна: (UA)
Форум » Веб-разработка » HTML + CSS — коды » Скрипт последних комментариев для сайта ucoz (Вывод крайних комментариев по клику для сайта ucoz)
  • Страница 1 из 3
  • 1
  • 2
  • 3
  • »
Поиск: