Читатели
Онлайн всего: 10
Гостей: 9
Пользователей: 1
RuleZ-DM
Новые пользователи

Новостей: 162 | Комментариев: 1389 | Отзывов: 52 | Блог: 8

Люди говорят
Поддержи проект

Поиск по тегамокна js Цитата сервис форма пользователи изображение Red новости Тень Blue code quote меню опрос css поля Браузер баннер ошибки CSS3 css sprite html-css Icon комментарии интервью дизайн menu Рамка блог комментарий кнопка кнопки Иконки Аватар контент окно яндекс разбор чат Шаблон Информер white углы Навигация лупа панель Код bb-код комментария javascript usability скрипты смайлы RSS ячейка календарь Игры фон форма входа прозрачность uСoz IMG иконка Black пример ucoz вход рейтинг заработок ошибка jQuery поиск сайт текст orange green генератор счётчик Ajax
Грасиан БальтасарВ любой деятельности, если знаешь мало о работе, советуйся с опытным человеком. Мудрецом хоть и не назовут, но зато посчитают человеком основательным.Грасиан Бальтасар ©
Rammdrum.com - сайт об ударнике Rammstein - Главная реклама

6 цветовых вариантов информера последних комментарий

просмотров 999 | комментарии (16)

Всем приветы, в этой статье мы будем создавать информер в системе uCoz, который будет отображать последние комментария пользователей на вашем сайте, но для начало давайте взглянем на Demo:

Шаг 1 - Создадим информер:

Для начало нам следует создать информер последних комментарий, для этого идём в админ панель вашего сайта:

Инструмента => Информеры => Создать информер

и создаём данный информер:

Раздел: Комментарии
Модуль: Все модули
Количество материалов: 10
Количество колонок:1

отлично, теперь заходим в шаблон данного информера, удаляем старый html код и устанавливаем следующий:

HTML
Code
<div class="last_comment_os transparency_i">
  <div class="lc_message">
  <a href="$ENTRY_URL$" title="$ENTRY_TITLE$">$MESSAGE$</a>
  </div>
  <div class="lc_uzer">  
  <span class="lc_ugol"></span>
<?if($USERNAME$)?>
  <a href="$PROFILE_URL$">
  <?if($USER_AVATAR_URL$)?>
  <img class="lc_avatar" alt="Аватар $USERNAME$" title="$USERNAME$" src="$USER_AVATAR_URL$" />
  <?else?>
  <img class="lc_avatar" title="$USERNAME$" alt="аватар отсутствует" src="http://www.center-dm.ru/site/no_avatar.jpg" />
  <?endif?>
  </a>
<?else?>  
  <img class="lc_avatar" title="$NAME$" alt="аватар отсутствует" src="http://www.center-dm.ru/site/no_avatar.jpg"/>
<?endif?>
  <span class="lc_name"><?if($USERNAME$)?><a href="$PROFILE_URL$">$USERNAME$</a><?else?>$NAME$<?endif?></span>
  <span class="lc_data">$DATE$ | $TIME$</span>
  </div>  
</div>
Шаг 2 - Установим CSS:

Отлично, теперь нам следует выбрать нужный цветовой вариант и скопировать к себе в css стили:

Белый вариант:
белый вариант информера последних комментарий
CSS
Code
/* Белый вариант последних комментарий
------------------------------------------*/
.last_comment_os {
  overflow: hidden;  
  float:left;
  font: 11px Verdana,Arial,Helvetica, sans-serif; color:#555;
  width:250px;
  margin: 5px 0px 5px 0px;  
}

.last_comment_os a:link,  
.last_comment_os a:visited {color:#555;}
.last_comment_os a:hover {color:#999;}

.lc_message {
  float:left;
  margin: 0;
  padding:5px;
  width:238px;  
  background: #F6F6F6;  
  border: 1px solid #D6D6D6;  
}

.lc_uzer {
  float:left;
  text-align:right;  
  width:250px;  
  position: relative
}

.lc_ugol {
  position:absolute;
  float:right;
  background: url(http://www.center-dm.ru/ucoz/informer/coment/v1/lc_ugol_White.png) no-repeat right;  
  width: 27px;
  height: 27px;  
  top: -1px;
  right: 20px;  
}

.lc_avatar {
  float:right;
  width: 30px;
  height: 30px;  
  padding:3px;
  border: 1px solid #D6D6D6;
  margin: 10px 55px 0px 10px;  
}

.lc_name {
  float:right;
  width: 145px;
  margin: 13px 0px 2px 0px;  
  font-weight: bold;
}

.lc_data {
  float:right;
  font: 9px Verdana,Arial,Helvetica, sans-serif; color:#999;
  width: 145px;
}

.transparency_i a:hover img {
  filter: progid: DXImageTransform.Microsoft.Alpha(opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5;
  filter: alpha(opacity=50);
}  
/* ------------------------------------------*/
Тёмный вариант:
тёмный вариант информера последних комментарий
CSS
Code
/* Тёмный вариант последних комментарий
------------------------------------------*/
.last_comment_os {
  overflow: hidden;  
  float:left;
  font: 11px Verdana,Arial,Helvetica, sans-serif; color:#B5B5B5;
  width:250px;
  margin: 5px 0px 5px 0px;  
}

.last_comment_os a:link,  
.last_comment_os a:visited {color:#B5B5B5;}
.last_comment_os a:hover {color:#929292;}

.lc_message {
  float:left;
  margin: 0;
  padding:5px;
  width:238px;  
  background: #555;  
  border: 1px solid #2c2c2c;  
}

.lc_uzer {
  float:left;
  text-align:right;  
  width:250px;  
  position: relative
}

.lc_ugol {
  position:absolute;
  float:right;
  background: url(http://www.center-dm.ru/ucoz/informer/coment/v1/lc_ugol_Black.png) no-repeat right;  
  width: 27px;
  height: 27px;  
  top: -1px;
  right: 20px;  
}

.lc_avatar {
  float:right;
  width: 30px;
  height: 30px;  
  padding:3px;
  border: 1px solid #2c2c2c;
  margin: 10px 55px 0px 10px;  
}

.lc_name {
  float:right;
  width: 145px;
  margin: 13px 0px 2px 0px;  
  font-weight: bold;
}

.lc_data {
  float:right;
  font: 9px Verdana,Arial,Helvetica, sans-serif; color:#999;
  width: 145px;
}

.transparency_i a:hover img {
  filter: progid: DXImageTransform.Microsoft.Alpha(opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5;
  filter: alpha(opacity=50);
}  
/* ------------------------------------------*/
Оранжевый вариант:
Оранжевый вариант информера последних комментарий
CSS
Code
/* Оранжевый вариант последних комментарий
------------------------------------------*/
.last_comment_os {
  overflow: hidden;  
  float:left;
  font: 11px Verdana,Arial,Helvetica, sans-serif; color:#555;
  width:250px;
  margin: 5px 0px 5px 0px;  
}

.last_comment_os a:link,  
.last_comment_os a:visited {color:#cd781d;}
.last_comment_os a:hover {color:#f5c189;}

.lc_message {
  float:left;
  margin: 0;
  padding:5px;
  width:238px;  
  background: #fff7e0;  
  border: 1px solid #dacba2;  
}

.lc_uzer {
  float:left;
  text-align:right;  
  width:250px;  
  position: relative
}

.lc_ugol3 {
  position:absolute;
  float:right;
  background: url(http://www.center-dm.ru/ucoz/informer/coment/v1/lc_ugol_Orange.png) no-repeat right;  
  width: 27px;
  height: 27px;  
  top: -1px;
  right: 20px;  
}

.lc_avatar {
  float:right;
  width: 30px;
  height: 30px;  
  padding:3px;
  border: 1px solid #dacba2;
  margin: 10px 55px 0px 10px;  
}

.lc_name {
  float:right;
  width: 145px;
  margin: 13px 0px 2px 0px;  
  font-weight: bold;
}

.lc_data {
  float:right;
  font: 9px Verdana,Arial,Helvetica, sans-serif; color:#999;
  width: 145px;
}

.transparency_i a:hover img {
  filter: progid: DXImageTransform.Microsoft.Alpha(opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5;
  filter: alpha(opacity=50);
}  
/* ------------------------------------------*/
Синий вариант:
синий вариант информера последних комментарий
CSS
Code
/* Синий вариант последних комментарий
------------------------------------------*/
.last_comment_os {
  overflow: hidden;  
  float:left;
  font: 11px Verdana,Arial,Helvetica, sans-serif; color:#555;
  width:250px;
  margin: 5px 0px 5px 0px;  
}

.last_comment_os a:link,  
.last_comment_os a:visited {color:#4982a4;}
.last_comment_os a:hover {color:#9cbed3;}

.lc_message {
  float:left;
  margin: 0;
  padding:5px;
  width:238px;  
  background: #e7f6ff;  
  border: 1px solid #cedfe9;  
}

.lc_uzer {
  float:left;
  text-align:right;  
  width:250px;  
  position: relative
}

.lc_ugol {
  position:absolute;
  float:right;
  background: url(http://www.center-dm.ru/ucoz/informer/coment/v1/lc_ugol_Blue.png) no-repeat right;  
  width: 27px;
  height: 27px;  
  top: -1px;
  right: 20px;  
}

.lc_avatar {
  float:right;
  width: 30px;
  height: 30px;  
  padding:3px;
  border: 1px solid #cedfe9;
  margin: 10px 55px 0px 10px;  
}

.lc_name {
  float:right;
  width: 145px;
  margin: 13px 0px 2px 0px;  
  font-weight: bold;
}

.lc_data {
  float:right;
  font: 9px Verdana,Arial,Helvetica, sans-serif; color:#999;
  width: 145px;
}

.transparency_i a:hover img {
  filter: progid: DXImageTransform.Microsoft.Alpha(opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5;
  filter: alpha(opacity=50);
}  
/* ------------------------------------------*/
Зелёный вариант:
Зелёный вариант информера последних комментарий
CSS
Code
/* Зелёный вариант последних комментарий
------------------------------------------*/
.last_comment_os {
  overflow: hidden;  
  float:left;
  font: 11px Verdana,Arial,Helvetica, sans-serif; color:#555;
  width:250px;
  margin: 5px 0px 5px 0px;  
}

.last_comment_os a:link,  
.last_comment_os a:visited {color:#4a9d46;}
.last_comment_os a:hover {color:#82cf7e;}

.lc_message {
  float:left;
  margin: 0;
  padding:5px;
  width:238px;  
  background: #e3ffe0;  
  border: 1px solid #a5daa2;  
}

.lc_uzer {
  float:left;
  text-align:right;  
  width:250px;  
  position: relative
}

.lc_ugol {
  position:absolute;
  float:right;
  background: url(http://www.center-dm.ru/ucoz/informer/coment/v1/lc_ugol_Green.png) no-repeat right;  
  width: 27px;
  height: 27px;  
  top: -1px;
  right: 20px;  
}

.lc_avatar {
  float:right;
  width: 30px;
  height: 30px;  
  padding:3px;
  border: 1px solid #a5daa2;
  margin: 10px 55px 0px 10px;  
}

.lc_name {
  float:right;
  width: 145px;
  margin: 13px 0px 2px 0px;  
  font-weight: bold;
}

.lc_data {
  float:right;
  font: 9px Verdana,Arial,Helvetica, sans-serif; color:#999;
  width: 145px;
}

.transparency_i a:hover img {
  filter: progid: DXImageTransform.Microsoft.Alpha(opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5;
  filter: alpha(opacity=50);
}  
/* ------------------------------------------*/
Красный вариант:
Красный вариант информера последних комментарий
CSS
Code
/* Красный вариант последних комментарий
------------------------------------------*/
.last_comment_os {
  overflow: hidden;  
  float:left;
  font: 11px Verdana,Arial,Helvetica, sans-serif; color:#555;
  width:250px;
  margin: 5px 0px 5px 0px;  
}

.last_comment_os a:link,  
.last_comment_os a:visited {color:#b52626;}
.last_comment_os a:hover {color:#e39b9b;}

.lc_message {
  float:left;
  margin: 0;
  padding:5px;
  width:238px;  
  background: #ffe0e0;  
  border: 1px solid #daa2a2;  
}

.lc_uzer {
  float:left;
  text-align:right;  
  width:250px;  
  position: relative
}

.lc_ugol {
  position:absolute;
  float:right;
  background: url(http://www.center-dm.ru/ucoz/informer/coment/v1/lc_ugol_Red.png) no-repeat right;  
  width: 27px;
  height: 27px;  
  top: -1px;
  right: 20px;  
}

.lc_avatar {
  float:right;
  width: 30px;
  height: 30px;  
  padding:3px;
  border: 1px solid #daa2a2;
  margin: 10px 55px 0px 10px;  
}

.lc_name {
  float:right;
  width: 145px;
  margin: 13px 0px 2px 0px;  
  font-weight: bold;
}

.lc_data {
  float:right;
  font: 9px Verdana,Arial,Helvetica, sans-serif; color:#999;
  width: 145px;
}

.transparency_i a:hover img {
  filter: progid: DXImageTransform.Microsoft.Alpha(opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5;
  filter: alpha(opacity=50);
}  
/* ------------------------------------------*/

На этом всё...

Быстрая подписка на Email:

Ваша оценка новости
оценка новости4.5голосов: 13
Теги: orange, ucoz, комментарий, green, white, Black, Blue, Red
16 | turno пишет: | 04.02.2012 | 09:03 0
RuleZ-DM, изменил все на 300 - все равно не помогло. В чем еще может быть причина? Подскажи плиз)
Цитировать
15 | erudit пишет: | 01.02.2012 | 14:19 0
Довольно таки неплохо yes
Цитировать
аватар отсутствует
12 | wallaby пишет: | 31.01.2012 | 18:16 0
Светлая стилизация - Админ, убери в CSS "1"
Вот правельный CSS:
Code
/* Белый вариант последних комментарий   
   ------------------------------------------*/   
   .last_comment_os {   
   overflow: hidden;   
   float:left;   
   font: 11px Verdana,Arial,Helvetica, sans-serif; color:#555;   
   width:250px;   
   margin: 5px 0px 5px 0px;   
   }   

   .last_comment_os a:link,   
   .last_comment_os a:visited {color:#555;}   
   .last_comment_os a:hover {color:#999;}   

   .lc_message {   
   float:left;   
   margin: 0;   
   padding:5px;   
   width:238px;   
   background: #F6F6F6;   
   border: 1px solid #D6D6D6;   
   }   

   .lc_uzer {   
   float:left;   
   text-align:right;   
   width:250px;   
   position: relative   
   }   

   .lc_ugol {   
   position:absolute;   
   float:right;   
   background: url(http://www.center-dm.ru/ucoz/informer/coment/v1/lc_ugol_White.png) no-repeat right;   
   width: 27px;   
   height: 27px;   
   top: -1px;   
   right: 20px;   
   }   

   .lc_avatar {   
   float:right;   
   width: 30px;   
   height: 30px;   
   padding:3px;   
   border: 1px solid #D6D6D6;   
   margin: 10px 55px 0px 10px;   
   }   

   .lc_name {   
   float:right;   
   width: 145px;   
   margin: 13px 0px 2px 0px;   
   font-weight: bold;   
   }   

   .lc_data {   
   float:right;   
   font: 9px Verdana,Arial,Helvetica, sans-serif; color:#999;   
   width: 145px;   
   }   

   .transparency_i a:hover img {   
   filter: progid: DXImageTransform.Microsoft.Alpha(opacity=50);   
   -moz-opacity: 0.5;   
   opacity: 0.5;   
   filter: alpha(opacity=50);   
   }   
   /* ------------------------------------------*/
Цитировать
10 | turno пишет: | 31.01.2012 | 16:00 0
И все же, как изменить размер ширины?
Цитировать
13 | RuleZ-DM пишет: | 31.01.2012 | 23:37 +1
нужно изменить все значения width: на свои...
Цитировать
14 | turno пишет: | 01.02.2012 | 12:11 0
RuleZ-DM, изменил все на 300 - все равно не помогло. В чем еще может быть причина? Подскажи плиз)
Цитировать
аватар отсутствует
9 | uThemes пишет: | 31.01.2012 | 13:15 0
chernoffo, а почему на твоем сайте World electro dance не стоят копирайты uTHemes?
Цитировать
аватар отсутствует
6 | AssaI пишет: | 31.01.2012 | 10:27 0
Обожаю этот блог!!! biggrin
Цитировать
5 | turno пишет: | 31.01.2012 | 09:20 0
А как изменить размер ширины? Меняю в css вот это: width:250px; на это width:300px; но ничего не происходит.
Цитировать
4 | turno пишет: | 31.01.2012 | 09:08 -2
Урааа. Я герой сюжета!!!! Отлично смотрится!!! Побежал устанавливать на свой сайт)))
Цитировать
7 | chernoffo пишет: | 31.01.2012 | 10:54 0
и с какого ты стырил мой аватар спрашиваетя??
Цитировать
8 | turno пишет: | 31.01.2012 | 13:11 0
Я не знал, что этот аватар является твоей собственностью)) Все, сменил.
Цитировать
11 | chernoffo пишет: | 31.01.2012 | 17:22 0
мой аватар-моя собственность..т.к я его сделал
Цитировать
3 | 3loY пишет: | 30.01.2012 | 18:13 0
Весьма вэбдваинольно laugh
Цитировать
аватар отсутствует
2 | Bride пишет: | 30.01.2012 | 00:46 +1
Выглядит очень красиво bye
Цитировать
1-10 11-11
Bihttp:imgЦитатаСodeClose-BBСправкаПревью
200 Обновить
rssrss e-mailtwitter
Выбираем рубрику
Готовые решения на html-css [24]
Ошибки при создании сайта [4]
Немного о юзабилити [9]
Полезные сайты [16]
Это надо знать [15]
Живое интервью [3]
Web решения для uCoz
В целом о uCoz [11]
Форма добавления комментарий [3]
Форма регистрации [0]
Форма входа [3]
Форма Поиска [2]
Вид навигации [5]
Вид комментарий [3]
Вид новостей [1]
Вид Опроса [2]
Вид информеров [10]
Ajax окна [6]
jQuery и JS [25]
Слайдер для uCoz [4]
Разбор полётов uCoz [4]
Shortcodes
Вид Рейтинга [4]
Вид Календаря [3]
Вид Цитаты и кода [2]
Вид Панели BB-кодов [3]
Лучшие пользователи
Аватар RuleZ-DM

RuleZ-DM

Аватар chernoffo

chernoffo

Аватар 3loY

3loY

Аватар Silver

Silver

Аватар erudit

erudit

аватар отсутствует

armenka

аватар отсутствует

Angry

Аватар Skoda

Skoda

Аватар iGosu

iGosu

Обрати внимание
Twitter лента
Система Orphus
Наверх