Программы, игры, фильмы, музыка, книги, Portable, софт -
Развлекательно-познавательный портал softline2009.ucoz.ru
Главное меню
Разделы новостей
Аудиокниги [2688]
Безопасность/Антивирусы [63]
Графика и дизайн/Редакторы [189]
Заставки/часы/календари [0]
Игры/Games/PC [37]
Интернет и сеть [159]
Книги и Журналы [8969]
Всё для мобильных [47]
Музыка/MP3/WAV [1499]
Мультимедиа [137]
Картинки/Обои/Wallpapers [0]
Образование [831]
Portable Софт [277]
Полезные программы [4]
Программы [153]
Утилиты/Software [307]
Фильмы и мультфильмы [19]
Юмор/Приколы [1]
Случайная новость
из архива
Книги и Журналы
Коллектив авторов - Авиционный справочник
Образование
Два примера профессиональной портретной ретуши (2017)
Аудиокниги
Александр Михайлов, Владимир Томаровский - Обвиняются в шпионаже (Аудиокнига)
Образование
Выборочная коррекция цвета в Photoshop (2017)
Интернет и сеть
Яндекс браузер 14.12.2125.10034
Музыка/MP3/WAV
Русский новогодний корпоратив (2017)
Аудиокниги
Томас Скарлетт - Орхидея съела их всех (Аудиокнига)
Книги и Журналы
Илья Лазерсон - Кухни Средней Азии
Книги и Журналы
Советкина В.Е. и Котов В.П. - Как вырастить огурцы и томаты на приусадебном участке
Интернет и сеть
Firefox 36.0 Beta 4
Книги и Журналы
Легенда русского Интернета (16 книг)
Облако тегов
softline2009.ucoz.ru » Интернет и сеть » Tоп пользователей с дополнительной информацией V2
Лучший интернет магазин, скидки, возврат денег, кэшбэк
Интернет и сеть Скачать Tоп пользователей с дополнительной информацией V2
Всем доброго дня, сегодня мы будем создавать информер топ пользователей по комментариям uCoz, при наведении на которые появляется дополнительная информация о пользователе и всё на css

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

Для начала нам следует создать и установить на страницу сайта нужный нам информер пользователей, для этого заходим

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

Раздел: Пользователи
Способ сортировки: колл. комментарий
Количество материалов: 10
Количество колонок: 1

удаляем старый код и устанавливаем новый:

Код
<div class="ddm_top_user">
  <a href="$PROFILE_URL$" class="drop_top_user bottom_no" target="_blank" ><script type="text/javascript" src="http://activiks.ru/img/png.js"></script><img alt="$USERNAME$" src="$AVATAR_URL$http://bambun.ru/images/no_avoar.jpg"/>
  <strong>$USERNAME$</strong>
  <span>$COM_POSTS$</span>
  </a>

  <div class="ddm_cell_user">
  <span class="ddm_ugol_user"></span>  
  <div class="ddm_content_user">
  <div class="ddm_content_top">
  <strong>$FULL_NAME$</strong>
  <span>ID:$USER_ID$</span>
  </div>
  <ul>
  <li><span>Пол:</span>$GENDER$----------</li>
  <li><span>Ранг:</span> $RANK_NAME$----------</li>
  <li><span>Группа:</span> $GROUP_NAME$</li>
  <li><span>Репутация:</span> $REPUTATION$</li>
  <li><span>Комментариев:</span> $COM_POSTS$</li>
  <li><span>Зарегистрирован:</span> $REG_DATE$</li>
  </ul>
  </div>
  </div>
</div>


А теперь на страницу сайта в нужное место устанавливаем html каркас с информеров:

Код
<div class="top_user">
  <div class="top_user_title">Топ пользователей</div>
  $MYINF_1$  
</div>


Не забывайте, что $MYINF_1$ является номером вашего информера и его стоит прописывать системной переменной, а не отдельной ссылкой на js.

Шаг 2 - Установим CSS:

Теперь когда данное решение почти готово, пропишем ему следующие css стили:

Код
/* Tоп пользователей с дополнительной информацией
------------------------------------------*/
.top_user {
  float:left;
  width:250px;
  background: #fff;
  border-radius:3px;
  border: 1px solid #CAD3DA;
}

.top_user_title {
  font:11px Verdana,Arial,Helvetica, sans-serif;
  text-shadow: 1px 1px 1px #B0431B;
  text-align:right;
  font-weight:700;  
  color:#fff;

  float:left;
  width:232px;
  height:20px;
  background:#e77e57;
  margin: -1px -1px 0px -1px;  
   
  padding: 7px 10px 3px 10px;  
  border-radius:3px 3px 0px 0px;
}

.ddm_top_user {
  float:left;
  display:block;
  position:relative;
}
   
.drop_top_user {
  float:left;
  width:230px;
  font-weight:700;  
  height:25px;
  padding: 5px 10px 5px 10px;  
  border-bottom: 1px solid #CAD3DA;
}

.drop_top_user img {  
  float:left;
  width:25px;
  height:25px;
  margin-right: 10px;
}

.drop_top_user strong {  
  float:left;
  margin-top: 5px;  
}

.drop_top_user span {  
  float:right;
  width:55px;
  height:20px;  
  text-align:right;  
  padding: 5px 0px 0px 5px;  
  border-left: 1px solid #CAD3DA;
  background: url(ico_comment.png) no-repeat left;  
}  

.ddm_top_user:hover{
  background:#F7F9FB;
}

.ddm_cell_user,  
.ddm_ugol_user{
  width:250px;
}  

.ddm_cell_user {
  left:-999em;
  z-index:998;
  margin:0px auto;
  position:absolute;
  border:1px solid #CAD3DA;  
  border-radius:3px;
}  
   
   
.ddm_content_user {  
  color:#777;
  margin:0;
  width:230px;
  padding:5px 10px;
  overflow:hidden;
  background:#fff;
  border-radius:3px;
}  
   
.ddm_top_user:hover .ddm_cell_user{
  top: 0px;  
  right:255px;
  left:auto;  
}  
   
.ddm_ugol_user {  
  height:17px;  
  top: 10px;
  right: -9px;
  position:absolute;  
  background:url(angle_right.png) no-repeat right;  
}

.ddm_content_top {
  float:left;
  width:100%;
  margin-bottom: 10px;
  padding: 0px 0px 5px 0px;  
  border-bottom:1px solid #CAD3DA;  
}  

.ddm_content_top span {
  float:right;
  margin-top:2px;
  font:9px Verdana,Arial,Helvetica, sans-serif; color:#999;
}  

.ddm_content_user ul{  
  margin:0;
  padding:0;
  list-style:none;
}  

.ddm_content_user li{  
  float:left;
  width:100%;
  padding: 3px 0px 3px 0px;  
}  

.ddm_content_user li span{  
  float:left;
  width:120px;
}  

.cu_li1 {background:#fff}  
.cu_li2 {background:#F7F9FB;}  

.bottom_no {
  border-bottom:none;  
}


Шаг 3 - Установим JS:

А для того чтобы в появляющейся ячейки с дополнительной информацией пользователя, не пришлось вручную прописывать классы чётным спискам, следует установить вниз страницы перед закрывающим тегом </body> следующий js

Код
<script language="javascript">
  $(document).ready(function() {
  $('.ddm_content_user ul li:odd').addClass('cu_li1');
  $('.ddm_content_user ul li:even').addClass('cu_li2');  
  });  
</script>

Теги: Интернет и сеть, , Tоп пользователей с дополнительной информацией V2
Tоп пользователей с дополнительной информацией V2 Tоп пользователей с дополнительной информацией V2

Категория: Интернет и сеть | Просмотров: 791 | Добавил: budyvmaster
| Дата добавления:
09 Фев 2013 | Рейтинг:


Понравилась новость???
Нажмите на кнопку расположенную ниже,
чтобы отблагодарить budyvmaster за этот материал:
Или добавьте её в социальные закладки:

Как мне скачать бесплатно без СМС и регистрации Tоп пользователей с дополнительной информацией V2 с
RapidShare | DepositFiles | FileFactory | LetitBit | iFolder



Всего комментариев: 0 -Напишите отзыв и Вы будете первым!
Для добавления комментария требуется регистрация.
[ Регистрация | Вход ]

Copyright softline2009.ucoz.ru™ © 2009-2025 Хостинг от
Мини профиль
Московское время: 01:48
Сегодня 10 Дек 2025 года.










Гость!
Полное имя Гость
Ваша группа Гости сайта;
Ваш IP: 216.73.216.152;
Вы с нами день
Мы рады вам ГОСТЬ! Чтобы не видеть рекламу, получить личный профиль и неограниченный доступ на сайте, пожалуйста, зарегистрируйтесь или авторизуйтесь!
Правила сайта!
Правила добавления
новостей!

Поиск по сайту



Полезное
Случайная новость
АУДИОКНИГИ
Клуб Дюма, или Тень Ришелье (Аудиокнига)
МУЗЫКА
Суперсборник Попмузыки. Поехали! (2014)
МУЗЫКА
Life Dreamcatcher Effect (2014)
ПОРТАТИВНЫЙ СОФТ
VSO Media Player 1.3.9.469 Portable
МУЛЬТИМЕДИА
Windows Player 2.4.0.0 Rus
МУЗЫКА
Red Sky - Il Flauto (2014)
КНИГИ / ЖУРНАЛЫ
Врачебные советы - Артрит. Спецвыпуск газеты "Твое здоровье" №1 2014
ИНТЕРНЕТ
Chromium 34.0.1804.0 ML/Rus (Portable)
РАБОЧИЙ СТОЛ
Colorful vortex - Видео обои
МУЛЬТИМЕДИА
Daum PotPlayer 1.5.44465 Stable Eng/Rus + Portable by KGS
Статистика



Яндекс.Метрика

Онлайн всего: 5
Гостей: 5
Пользователей: 0

Кто on-line?
Нас посетили:
Последние статьи
Как самостоятельно похудеть
партнерка за смс, заработок на смс-партн...
Как попасть на первую страницу поисковой...
Что делать если наступил страховой случа...
Что нужно знать о независимой экспертизе...
Карта Квартира+ ПИК
Как разблокировать доступ к сайту
ошибки синего экрана смерти
Как выбрать сейф и какие они бывают
Как выбрать мебель в офис
Как завязывать галстук, шарф и платок. П...

Сайт адаптирован для просмотра с разрешением монитора 1280х1024 1024х768 в браузерах Mozilla Firefox и Opera. ВАШ браузер: , а
Файлы для обмена и ознакомления предоставлены пользователями сайта. Администрация не несёт ответственности за их содержание. На сервере хранятся только ссылки на файлы. Это значит, что мы не храним и не распространяем никаких нелегальных материалов, а так же материалов охраняемых авторским правом.
Для правообладателей!